网页中的X光透视效果 |
|---|
| | www.iselong.com 作者: | | |
你一定也碰过这种情况:忽然间你看到的了一件不可思意的事情,而你不禁一边揉揉眼睛,一边纳闷,我真的看到那玩意儿了吗？遇到这种事情的时候最好把它分享出来，现在我就用这种方法和大家分享我看到的这种怪事。
这个技巧利用了CSS的clip性质来根据鼠标的位置显示一张被隐藏图片的某一小块区域.你可以自己处理被隐藏图片的颜色和大小,不过要注意的是正常的表层图片和被隐藏的图片的长宽必须相等.
首先要做的是把下面这段程序放进网页的 <HEAD> 区段里。然后调整 showWidth 和 showHeight 的数值，它们所代表的是鼠标作用区域的宽度和高度。
<script language="Javas cript">
var divX,divY,swtDiv,showWidth,showHeight;
showWidth=100;
showHeight=80;
function initEvents() {
swtDiv=document.getElementById?document.getElementById("swtHidden"):document.all?document.all["swtHidden"]:document.layers?document.layers["swtHidden"]:null;
if (document.layers) {
swtDiv.style=swtDiv;
document.captureEvents(Event.MOUSEMOVE);
}
if (swtDiv) {
document.onmousemove=doMouse;
}
}
window.onload=initEvents;
function doMouse(arg) {
ev=arg?arg:event;
divX=(ev.pageX?ev.pageX:ev.clientX)-parseInt(swtDiv.style.left);
divY=(ev.pageY?ev.pageY:ev.clientY)-parseInt(swtDiv.style.top);
if (swtDiv.clip) {
/* Nav 4 bugs addresed here: clip outside layer deactivates links,
event.pageX|pageY of zero evaluates as NaN. Go figure. */
swtDiv.clip.left=(divX>showWidth/2)?divX-showWidth/2:0;
swtDiv.clip.top=(divY>showHeight/2)?divY-showHeight/2:0;
newRight=(isNaN(divX)?0:divX)+showWidth/2;
maxRight=swtDiv.document.images[0].width;
swtDiv.clip.right=(newRight<maxRight)?newRight:maxRight;
newBottom=(isNaN(divY)?0:divY)+showHeight/2;
maxBottom=swtDiv.document.images[0].height;
swtDiv.clip.bottom=(newBottom<maxBottom)?newBottom:maxBottom;
} else {
swtDiv.style.clip="rect("+(divY-showHeight/2)+" "+(divX+showWidth/2)+" "+(divY+showHeight/2)+" "+(divX-showWidth/2)+")";
}
}
//-->
</script>
接下来再把下面的这段程序放到网页的 <BODY> 区段里。其中 图1 和 图2 就是网页中所要显示的图片， 图1 是正常的正常的表层图片，而 图2则是隐藏饿透视图片。并调整好图片的宽和高。
<div style="top:80;left:20;position:absolute;">
<img src="image1.jpg" width=350 height=250>
</div>
<div style="top:80;left:20;position:absolute;clip:rect(0 0 0 0);" id="swtHidden">
<img src="image2.jpg" width=350 height=250>
</div>
好了！现在你又再一次证明了，还有更多是肉眼看不到的东西就在我和你的身边。:)
|
文档更新时间: 2003-7-5 23:41:00
检索关键字:病毒,漏洞
文档来源:不详
万千英语族转载此文档旨在传达更多资讯之目的.若您认为涉及版权问题请跟我们联系.
|
| | |
