主题:  5d 5d!我的5d!(一个不错的页面特效)

helmet
职务：版主
等级：4
金币：10.0
发贴：1559
注册：2004/1/30 15:59:27
#12001/12/12 5:28:57

页面：点这儿参观


http://www.bang5.com

helmet
职务：版主
等级：4
金币：10.0
发贴：1559
注册：2004/1/30 15:59:27
#22001/12/12 5:33:13
我的方法：

1，首先建立一个层(800*600)，层里的内容任意(我用的是5dbbs首页)。
然后，层上应用clip属性(长宽为200*200)。
我们知道:clip范围内的东西是可见的，而clip范围外的东西是透明的，
所以整个页面只显示clip(200*200)里的层中内容，其他地方都透明，
也就是露出了页面的原始背景(背景里啥也没有，而且颜色是BLACK)。

就是这样地：

页面：点这儿参观


http://www.bang5.com

helmet
职务：版主
等级：4
金币：10.0
发贴：1559
注册：2004/1/30 15:59:27
#32001/12/12 5:34:39
2，然后，我们让鼠标控制clip的位置(注意:不是控制层，层已经固定了)
代码：
function lm()
{
clipH=200 //clip的高度。
clipW=200 //clip的宽度。
x=event.x //鼠标横坐标。
y=event.y //鼠标纵坐标。
clipRight=x+100 //对应clip:rect(上 右 下 左)的右。
clipBottom=y+100 //对应下。
clipTop=y-clipH+100 //详细见图。(注意:距离都是相对于层的，不是页面！)
clipLeft=x-clipW+100
document.all.up1.style.clip="rect("+clipTop+" "+clipRight+" "+clipBottom+" "+clipLeft+")"
}
再加上 。



效果是这样地：

页面：点这儿参观

编辑历史:[这消息被deathcult编辑过(编辑时间2001-12-12 05:35:20)]
[这消息被deathcult编辑过(编辑时间2001-12-12 05:36:39)]

http://www.bang5.com

helmet
职务：版主
等级：4
金币：10.0
发贴：1559
注册：2004/1/30 15:59:27
#42001/12/12 5:39:08
3，最后，再弄一个层，这个层位于第一个层的上面(z-index:x)，也就是
盖上第一个层。这个层里只有一个内容:自定义的图片。
层的大小和图片的大小都与第一个层的clip的大小一致，也就是(200*200)，
并且这个层也随着鼠标移动。这样就ok了。

我用的图片是这样的：





总结，这个效果很巧妙，clip与图片的结合，先用clip切出一块可视区，然后在可
视区里盖图片，这样就可以随意定义可视区的摸样了。


http://www.bang5.com

sui.smile~
职务：普通成员
等级：3
金币：16.0
发贴：1169
注册：2001/10/14 15:47:39
#52001/12/12 9:00:11
真不错~

举几个实际中如何应用的例子吧~



5D原创文章版主
职务：版主
等级：1
金币：10.0
发贴：234
注册：2000/9/15 12:32:23
#62001/12/12 9:09:57
效果很好，太经典了



再坚持就会胜利
职务：普通成员
等级：3
金币：10.0
发贴：1241
注册：2001/1/11 11:05:12
#72001/12/12 11:35:56
不错,不错
弄个漂亮点的例子



cmlarry
职务：普通成员
等级：1
金币：0.0
发贴：17
注册：2001/12/1 16:19:47
#82001/12/12 16:28:13
mask???

没想到用代码也可以实现!!厉害

5D荣誉斑竹
职务：普通成员
等级：5
金币：10.0
发贴：3292
注册：2001/5/24 10:01:29
#92001/12/13 15:45:38
好象有BUG，鼠标在clip内移动时无效，（IE5）

哦，明白了，页面里不适合用IFRAME，因为IFRAME的body里没有onmouseover

编辑历史:[这消息被hve编辑过(编辑时间2001-12-13 15:51:04)]

5D荣誉斑竹
职务：普通成员
等级：5
金币：10.0
发贴：3292
注册：2001/5/24 10:01:29
#102001/12/13 16:17:13
嘿嘿，改了一下


页面：点这儿参观

编辑历史:[这消息被hve编辑过(编辑时间2001-12-13 16:17:51)]

再坚持就会胜利
职务：普通成员
等级：3
金币：10.0
发贴：1241
注册：2001/1/11 11:05:12
#112001/12/13 16:18:44
老大,看不到



5D荣誉斑竹
职务：普通成员
等级：5
金币：10.0
发贴：3292
注册：2001/5/24 10:01:29
#122001/12/13 16:20:46
木木树在上个帖子中说
引用:
老大,看不到


空间太慢，刷新一下吧



下雪
职务：普通成员
等级：3
金币：10.0
发贴：1176
注册：2001/1/6 20:05:13
#132002/1/18 22:05:32
hve在上个帖子中说
引用:
嘿嘿，改了一下


页面：点这儿参观

真服了你了
换个能看的吧



顺子
职务：普通成员
等级：4
金币：10.0
发贴：1867
注册：2000/10/14 21:55:00
#142002/1/18 23:13:08
效果很有创意啊，佩服！！！



hungerytiger
职务：普通成员
等级：2
金币：1.0
发贴：312
注册：2001/1/11 10:33:07
#152002/2/4 22:21:41
高手就是高手，不得不佩服，拍两下马屁了，呵呵，不过这是值得的了