打印

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

snwebsite [楼主]

蓝色怪兽
版主

帖子: 4328
体力: 7370
威望: 68
离线: 1 天

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

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

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

例子 :

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

本帖最近评分记录

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

LOST

TOP

anxiers

高级会员

帖子: 315
体力: 724
威望: 0
离线: 2 天

发短消息

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

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

TOP

sinoaqua

高级会员

帖子: 312
体力: 616
威望: 0
当前: 上海闵行
离线: 3 天

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

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

TOP

clovey

黑屋子里躲猫猫
高级会员

帖子: 1307
体力: 673
威望: 0
离线: 1 天

发短消息

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

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

c-love-y || 我需要记住这个名字 || 安房直子

TOP

Arsan

中级会员

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

发短消息

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

太有创意了.收藏

TOP

givebest

初级会员

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

专长 网页设计,ASP,SEO

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

蛮好，收藏了！

静静曼延

TOP

jiawanlong

新手上路

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

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

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

TOP

inlet511

中级会员

帖子: 98
体力: 231
威望: 0

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

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

www.sadcafe.cn

TOP

taiha

初级会员

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

发短消息

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

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

TOP

snwebsite [楼主]

蓝色怪兽
版主

帖子: 4328
体力: 7370
威望: 68
离线: 1 天

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

TOP

welcome58

缘由心生
银牌会员

帖子: 453
体力: 1034
威望: 2
当前: 北京海淀区
离线: 3 天

专长 UI,前端制作,JS

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

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

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

TOP

blank

怿飞
版主

帖子: 2134
体力: 3195
威望: 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

初级会员

帖子: 89
体力: 169
威望: 2
离线: 252 天

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

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

TOP

sinoaqua

高级会员

帖子: 312
体力: 616
威望: 0
当前: 上海闵行
离线: 3 天

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

引用:

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

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

TOP

marvellous

金翅擘海
版主

帖子: 11215
体力: 26387
威望: 140

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

孤域客

追意
中级会员

帖子: 274
体力: 497
威望: 0
当前: 上海徐汇
离线: 8 天

专长 网页设计,Flash,AS

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

好东西。。

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

TOP

blank

怿飞
版主

帖子: 2134
体力: 3195
威望: 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

怿飞
版主

帖子: 2134
体力: 3195
威望: 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

初级会员

帖子: 89
体力: 169
威望: 2
离线: 252 天

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

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

TOP

hellojoy

新手上路

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

发短消息

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

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

TOP

antz

高级会员

帖子: 241
体力: 584
威望: 0
当前: 北京海淀区
离线: 49 天

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

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

antflash.com 蚂蚁-博客

TOP

hzc83hzc

初级会员

帖子: 105
体力: 168
威望: 0
离线: 17 天

发短消息

专长 JAVA,JSP,MSSQL

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

太强了各位，学习了……

TOP

lkp528

北溟游鱼
银牌会员

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

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

好贴呀
怎么能不顶顶顶

When the door to happiness

TOP

mental

小鱼的理想
高级会员

帖子: 286
体力: 585
威望: 0
当前: 山东威海

发短消息

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

引用:

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

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

TOP

duluohua

月亮上的狗
高级会员

帖子: 414
体力: 809
威望: 0
当前: 江苏苏州

专长 前端制作,ASP,.NET

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

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

TOP

SoftHt

土豆小子
中级会员

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

发短消息

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

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

TOP

stevezang

初级会员

帖子: 68
体力: 175
威望: 0
离线: 1 天

发短消息

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

不错，简单实用的例子。

TOP

mfkidt

新手上路

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

发短消息

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

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

TOP

blank

怿飞
版主

帖子: 2134
体力: 3195
威望: 115
当前: 浙江杭州

专长 前端制作,JS,WAP

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

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

先看懂LZ的帖子！

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

TOP

vcst

大王
高级会员

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

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

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

复制内容到剪贴板

代码:

ul#hovershow li:hover + li a{

}

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

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

TOP