透明图片鼠标跟踪


将以下代码加入<body>区域:
<STYLE type=TEXT/CSS>
.tm {FILTER: Alpha(Opacity=50)}
</STYLE>
<DIV id=Layer1 style="HEIGHT: 31px; LEFT: 409px; POSITION: absolute; TOP: 131px; WIDTH: 14px"><IMG class=tm src=http://www.blue1000.com/article/"./images/img-boder01.gif"></DIV>
<SCRIPT>
function move_layer()
{
Layer1.style.left=event.clientX+document.body.scrollLeft+10;
Layer1.style.top=event.clientY+document.body.scrollTop+10;
top.status="鼠标X="+event.clientX + " sX=" + document.body.scrollLeft + " 鼠标Y=" + event.clientY+ " sY=" + document.body.scrollTop;
}
document.onmousemove =move_layer;
</SCRIPT>
其中:
.tm {FILTER: Alpha(Opacity=50)}是定义设置图片透明度值的CSS;
IMG class=tm src=http://www.blue1000.com/article/"./images/img-boder01.gif 是显示图片的地址

制作方法实为简单,请参看效果

本文作者:
« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3