打印

[教程] "好玩的放大镜效果" 的另一种实现方法.

snwebsite [楼主]

蓝色怪兽

荣誉管理团队

帖子: 4348
体力: 7370
威望: 69

1^# 大中小发表于 2006-10-31 10:10

前段时间嗷嗷有发过"好玩的放大镜效果",今天看了下,发现还有简单的方法也能够实现,即利用内外补丁的调整.

有兴趣的可以在琢磨琢磨.

例子 :

提示：您可以先修改部分代码再运行

本帖最近评分记录

Apothem 威望 +3 我很赞同 2006-11-2 10:52
greengnn 威望 +3 原创内容 2006-10-31 10:47

LOST - FRINGE

TOP

西部数码VPS主机1G内存仅266元

anxiers

高级会员

帖子: 371
体力: 848
威望: 0
当前: 广东珠海
离线: 25 天

专长 网页设计,UI,平面

2^# 大中小发表于 2006-10-31 11:37

收藏..有空慢慢研究: )

TOP

广州周立功诚聘—平面/网页/UI/工业设计师 | 天业互联-酷睿租用599￥

sinoaqua

高级会员

帖子: 379
体力: 739
威望: 0
当前: 上海长宁

专长 网页设计,前端制作,Python

3^# 大中小发表于 2006-10-31 12:24

顶一个~~~这样做LBS的美化就有希望了

TOP

认证您的手机，获得手机认证图标

，更多手机认证的好处

clovey

黑屋子里躲猫猫

高级会员

帖子: 1430
体力: 652
威望: 0
离线: 5 天

4^# 大中小发表于 2006-10-31 12:53

现在发现看不懂，研究阵子

c-love-y囧

TOP

用CSS布局建站从零开始 | Photoshop中打造史诗般梦幻场景 | 05年第一次软件行业创业的惨痛教训

Arsan

中级会员

帖子: 154
体力: 266
威望: 0
当前: 北京海淀区
离线: 345 天

5^# 大中小发表于 2006-10-31 12:53

太有创意了.收藏

TOP

givebest

初级会员

帖子: 81
体力: 154
威望: 0
当前: 广东深圳
离线: 1 天

专长 网页设计,ASP,SEO

6^# 大中小发表于 2006-10-31 14:50

蛮好，收藏了！

静静曼延

TOP

jiawanlong

新手上路

帖子: 27
体力: 0
威望: 0
离线: 58 天

7^# 大中小发表于 2006-10-31 17:46

其实方法并不难，只是很少人能想到！不错！

TOP

inlet511

中级会员

帖子: 111
体力: 259
威望: 0
离线: 63 天

8^# 大中小发表于 2006-10-31 18:07

margin的负值属性是什么意思啊？

www.sadcafe.cn

TOP

taiha

初级会员

帖子: 47
体力: 97
威望: 0
当前: 广东佛山
离线: 109 天

9^# 大中小发表于 2006-11-1 14:35

换成图片时,图片要是能放大就好了,我做的试了，图片不能放大！~

TOP

snwebsite [楼主]

蓝色怪兽

荣誉管理团队

帖子: 4348
体力: 7370
威望: 69

10^# 大中小发表于 2006-11-1 15:26

引用:

原帖由 taiha 于 2006-11-1 14:35 发表
换成图片时,图片要是能放大就好了,我做的试了，图片不能放大！~

举一反三:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style type="text/css">

</style>
<div>
<a href="#">
<img src="http://bbs.blueidea.com/images/common/xml.gif" alt="" />
</a>
<a href="#">
<img src="http://bbs.blueidea.com/images/common/xml.gif" alt="" />
</a>
<a href="#">
<img src="http://bbs.blueidea.com/images/common/xml.gif" alt="" />
</a><a href="#">
<img src="http://bbs.blueidea.com/images/common/xml.gif" alt="" />
</a><a href="#">
<img src="http://bbs.blueidea.com/images/common/xml.gif" alt="" />
</a><a href="#">
<img src="http://bbs.blueidea.com/images/common/xml.gif" alt="" />
</a><a href="#">
<img src="http://bbs.blueidea.com/images/common/xml.gif" alt="" />
</a><a href="#">
<img src="http://bbs.blueidea.com/images/common/xml.gif" alt="" />
</a><a href="#">
<img src="http://bbs.blueidea.com/images/common/xml.gif" alt="" />
</a><a href="#">
<img src="http://bbs.blueidea.com/images/common/xml.gif" alt="" />
</a></div>

提示：您可以先修改部分代码再运行

LOST - FRINGE

TOP

welcome58

缘由心生

银牌会员

帖子: 466
体力: 1062
威望: 2
当前: 北京海淀区
离线: 1 天

专长 UI,前端制作,JS

11^# 大中小发表于 2006-11-1 15:48

图片可以放大，但效果不太好，解决办法我认为只能用两张不同大小的图片代替，不知还有什么办法

不懂就问
http://www.welcome58.cn

TOP

blank

怿飞

版主

认证
帖子: 2336
体力: 3413
威望: 115
当前: 浙江杭州

专长 前端制作,JS,WAP

12^# 大中小发表于 2006-11-1 16:26

比我以前看的那段代码简单多了，顶一个！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>给放大的分页</title>
<meta name="KEYWords" content="css,xhtml,display,layout, style,lab, sheets, w3c,w3, web standards,pagination" />
<meta name="DEscription" content="一个好玩的分页,Internet Explorer7或者Firefox可以看到附带的效果" />
<meta name="author" content="aoao" />
<meta content="all" name="robots" />
<link rel="start" href="http://www.loaoao.com" title="Home" />
<style type="text/css">
ul#hovershow{
	list-style-type: none;
	margin: 50px;
	width:200px;
	float: left;
	display: inline;
	clear: both;
}
ul#hovershow li{
	float: left;
	display: inline;
	width:20px;
	height: 20px;
	margin: 2px;
			
}
ul#hovershow li a {
	display: block;
	width:20px;
	height:20px;
	border:1px #999 solid;
	color:#0984FF;
	background-color:#fff;
	text-decoration: none;
	line-height: 20px;
	font-size: 12px;
	text-align: center;
	font-weight: bold;
}
ul#hovershow li a:hover{
	position: absolute;
	width:40px;
	height: 40px;
	line-height: 40px;
	font-size: 32px;
	z-index:100;
	margin: -10px 0 0 -10px;
}
ul#hovershow li:hover + li a{
	position: absolute;
	width:30px;
	height: 30px;
	line-height: 30px;
	font-size: 24px;
	z-index:99;
	margin: -5px 0 0 -5px;
}
</style>
</head>
<body>
<h1>给放大的分页</h1>
<p>一个好玩的分页,Internet Explorer7或者Firefox可以看到附带的效果,因为真的很懒.美化后的样式没更新上来.因为那个是配合我的页才能用滴..挖哈哈..</p>
<ul id="hovershow">
	<li><a href="#1" title="#1">1</a></li>
	<li><a href="#2" title="#2">2</a></li>
	<li><a href="#3" title="#3">3</a></li>
	<li><a href="#4" title="#4">4</a></li>
	<li><a href="#5" title="#5">5</a></li>
	<li><a href="#6" title="#6">6</a></li>
	<li><a href="#7" title="#7">7</a></li>
</ul>
<p id="copyright">Copyright &copy; 2006 <a rel="me" href="http://www.loaoao.com/" title="Beautiful Style &laquo; 样式之美 &raquo; www.loaoao.com">aoao</a> .  <a rel="license" href="http://creativecommons.org/licenses/by/2.5/" title="知识共享组织">Some rights reserved</a>.</p>
</body>
</html>

提示：您可以先修改部分代码再运行

个人Blog：PlanABC 团队Blog：淘宝UED 专注Web前端技术！

TOP

gonewtw

初级会员

帖子: 90
体力: 171
威望: 2
离线: 96 天

13^# 大中小发表于 2006-11-1 16:34

margin:5px 1px 0 1px;和margin:0 -9px 0 -9px;咋回事
不太明白

TOP

sinoaqua

高级会员

帖子: 379
体力: 739
威望: 0
当前: 上海长宁

专长 网页设计,前端制作,Python

14^# 大中小发表于 2006-11-1 16:56

引用:

原帖由 welcome58 于 2006-11-1 15:48 发表
图片可以放大，但效果不太好，解决办法我认为只能用两张不同大小的图片代替，不知还有什么办法

其实还不用用一个象素图做背景好一点儿呢~PNG半透明图最有感觉了.然后再加上文字

TOP

marvellous

金翅擘海

荣誉管理团队

帖子: 13287
体力: 27867
威望: 143
当前: 北京朝阳区

15^# 大中小发表于 2006-11-2 00:38

把原作品略微发挥了一下

<table cellpadding="0" cellspacing="0" width="100%" height="100%"><tr><td align="center" valign="middle">
	<table cellpadding="0" cellspacing="22" width="50%" height="300" bgcolor="#000000" style="border:1px dashed #ccc;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#ECFFF2', EndColorStr='pink');"><tr><td bgcolor="#FFFFFF" valign="middle" align=center>
    <style type="text/css">
        
        ul#hovershow2{
            list-style-type: none;
            margin: 50px;
            width:440px;
            float: left;
            display: inline;
            clear: both;
        }
        ul#hovershow2 li{
            float: left;
            display: inline;
            width:20px;
            height: 20px;
            margin: 2px;
                    
        }
        ul#hovershow2 li a {
            text-decoration: none;
            display: block;
            width:20px;
            height:20px;
            border:1px red solid;
            background-color: White;
            line-height: 20px;
            font-size: 12px;
            text-align: center;
        }
        ul#hovershow2 li a:hover{
        position: absolute;
        width:40px;
        height: 40px;
        line-height: 40px;
        font-size: 32px;
        z-index:100;
        margin: -10px 0 0 -10px;font-family:华文行楷;
        }
        
    </style>
<ul id="hovershow2">
    <li><a href="1#" title="test"><span>枯</span></a></li>
    <li><a href="2#" title="test"><span>藤</span></a></li>
    <li><a href="3#" title="test"><span>老</span></a></li>
    <li><a href="4#" title="test"><span>树</span></a></li>
    <li><a href="5#" title="test"><span>昏</span></a></li>
    <li><a href="6#" title="test"><span>鸦</span></a></li>
    <li><a href="7#" title="test"><span>古</span></a></li>
    <li><a href="1#" title="test"><span>道</span></a></li>
    <li><a href="2#" title="test"><span>西</span></a></li>
    <li><a href="3#" title="test"><span>风</span></a></li>
    <li><a href="4#" title="test"><span>瘦</span></a></li>
    <li><a href="5#" title="test"><span>马</span></a></li>
    <li><a href="6#" title="test"><span>小</span></a></li>
    <li><a href="7#" title="test"><span>桥</span></a></li>
    <li><a href="4#" title="test"><span>流</span></a></li>
    <li><a href="5#" title="test"><span>水</span></a></li>
    <li><a href="6#" title="test"><span>人</span></a></li>
    <li><a href="7#" title="test"><span>家</span></a></li>
</ul>
</td></tr></table>
</td></tr></table>

提示：您可以先修改部分代码再运行

┏┯┓┏┯┓┏┯┓┏┯┓
┠知┨┠往┨┠观┨┠来┨
┗┷┛┗┷┛┗┷┛┗┷┛

TOP

孤域客

追意

高级会员

帖子: 286
体力: 507
威望: 0
当前: 上海徐汇
离线: 114 天

专长 网页设计,Flash,AS

16^# 大中小发表于 2006-11-2 08:52

好东西。。

http://www.ui17.com你我一起

TOP

blank

怿飞

版主

认证
帖子: 2336
体力: 3413
威望: 115
当前: 浙江杭州

专长 前端制作,JS,WAP

17^# 大中小发表于 2006-11-2 09:22

引用:

原帖由 gonewtw 于 2006-11-1 16:34 发表
margin:5px 1px 0 1px;和margin:0 -9px 0 -9px;咋回事
不太明白

我相信估计有不少初学者对此例子中的margin没有理解透，如果你没有理解或理解透请看下图，如果你很熟悉了，请一带而过，嘿嘿！

[ 本帖最后由 blankzheng 于 2006-11-2 09:26 编辑 ]

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

个人Blog：PlanABC 团队Blog：淘宝UED 专注Web前端技术！

TOP

blank

怿飞

版主

认证
帖子: 2336
体力: 3413
威望: 115
当前: 浙江杭州

专长 前端制作,JS,WAP

18^# 大中小发表于 2006-11-2 14:08

我上面的图是在楼主的代码去掉“a:hover ”中“padding:0 5px;”并该“margin:0 -9px 0 -9px”为“margin:0 -4px 0 -4px”的效果图！

图中的20px为开始的大小，30px为放大后的大小，1px为开始“margin:5px 1px 0 1px;”中的“1px”;上标5px为“margin:5px 1px 0 1px;”中的“5px”;设置5px为的是放大时能看到整个效果，设置1px是为了不同数字间的间隔美观区分。左标5px为放大后较原先位置放大的部分，4px是就是“margin:0 -4px 0 -4px”中的4px!

个人Blog：PlanABC 团队Blog：淘宝UED 专注Web前端技术！

TOP

gonewtw

初级会员

帖子: 90
体力: 171
威望: 2
离线: 96 天

19^# 大中小发表于 2006-11-2 14:32

上午我把上边的代码改成margin:0 -500 -50px
了
才看明白点

TOP

hellojoy

新手上路

帖子: 1
体力: 2
威望: 0
离线: 975 天

20^# 大中小发表于 2006-11-2 19:02

哇,-px.而且好简洁.掂

TOP

antz

高级会员

帖子: 250
体力: 529
威望: 0
当前: 北京海淀区
离线: 32 天

21^# 大中小发表于 2006-11-3 00:51

有趣，只是简单的-px就搞定了。牛。

antflash.com 蚂蚁-博客

TOP

hzc83hzc

黑白灰823

初级会员

帖子: 109
体力: 176
威望: 0
当前: 浙江杭州
离线: 57 天

专长 JAVA,JSP,MSSQL

22^# 大中小发表于 2006-11-3 09:25

太强了各位，学习了……

TOP

lkp528

北溟游鱼

银牌会员

帖子: 1444
体力: 1465
威望: 0
当前: 广东深圳
离线: 1 天

23^# 大中小发表于 2006-11-3 14:45

好贴呀
怎么能不顶顶顶

紫色的水

TOP

mental

小鱼的理想

高级会员

认证
帖子: 462
体力: 805
威望: 1
当前: 山东威海
离线: 15 天

专长 PHP

24^# 大中小发表于 2006-11-3 16:00

引用:

原帖由 welcome58 于 2006-11-1 15:48 发表
图片可以放大，但效果不太好，解决办法我认为只能用两张不同大小的图片代替，不知还有什么办法

其实只要放一个大点的图片上去,图片会被束缚在指定了大小的"box"中,鼠标放上后调用hover会还原原来的图象,这样就不会不清晰了!

TOP

duluohua

月亮上的狗

银牌会员

帖子: 677
体力: 1232
威望: 0
当前: 江苏苏州
离线: 5 天

专长 前端制作,ASP,.NET

25^# 大中小发表于 2006-11-3 18:00

自己修改了一下符合自己站的确实很好用谢谢了

TOP

SoftHt

土豆小子

中级会员

帖子: 175
体力: 314
威望: 0
当前: 北京海淀区
离线: 203 天

26^# 大中小发表于 2006-11-3 19:01

我觉得用作分页条挺好，呵呵

TOP

stevezang

楚天麦子

中级会员

帖子: 124
体力: 293
威望: 0
离线: 127 天

27^# 大中小发表于 2006-11-4 13:26

不错，简单实用的例子。

TOP

mfkidt

新手上路

帖子: 13
体力: 20
威望: 0
离线: 242 天

28^# 大中小发表于 2006-11-4 21:52

我怎么看着这个好看点。
http://lab.loaoao.com/demo/effect/pagination/index.html
用楼主的代码可以做成跟这个一模一样吗？

TOP

blank

怿飞

版主

认证
帖子: 2336
体力: 3413
威望: 115
当前: 浙江杭州

专长 前端制作,JS,WAP

29^# 大中小发表于 2006-11-4 23:11

楼上的，两种不是一样的效果吗？

先看懂LZ的帖子！

个人Blog：PlanABC 团队Blog：淘宝UED 专注Web前端技术！

TOP

vcst

大王

高级会员

帖子: 601
体力: 672
威望: 3
离线: 1 天

专长 网页设计,前端制作,JS

30^# 大中小发表于 2006-11-5 10:48

复制内容到剪贴板

代码:

ul#hovershow li:hover + li a{

}

li:hover后面那个“+” 是啥意思？

爱情来的快去的也快,只有猪肉卷是永恒的~~~~

TOP