电脑资料-学海荡舟 - 电脑乐园

当前位置：学海荡舟 -> 电脑乐园 -> JavaScript实例

　　　　图形跟随鼠标

效果演示：

　　看看什麽东西在跟着你的鼠标？

源代码如下：

这段程序放在<body>与</body>之间 <script language="JavaScript"> var newtop=0 var newleft=0 if (navigator.appVersion.indexOf("MSIE") != -1) { layerStyleRef="layer.style."; layerRef="document.all"; styleSwitch=".style"; } function doMouseMove() { layerName = 'iit' eval('var curElement='+layerRef+'["'+layerName+'"]') eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"') eval('curElement'+styleSwitch+'.visibility="visible"') eval('newleft=document.body.clientWidth-curElement'+styleSwitch+'.pixelWidth') eval('newtop=document.body.clientHeight-curElement'+styleSwitch+'.pixelHeight') eval('height=curElement'+styleSwitch+'.height') eval('width=curElement'+styleSwitch+'.width') width=parseInt(width) height=parseInt(height) if (event.clientX > (document.body.clientWidth - 5 - width)) { newleft=document.body.clientWidth + document.body.scrollLeft - 5 - width } else { newleft=document.body.scrollLeft + event.clientX } eval('curElement'+styleSwitch+'.pixelLeft=newleft') if (event.clientY > (document.body.clientHeight - 5 - height)) { newtop=document.body.clientHeight + document.body.scrollTop - 5 - height } else { newtop=document.body.scrollTop + event.clientY } eval('curElement'+styleSwitch+'.pixelTop=newtop')} document.onmousemove = doMouseMove;</script><script language="javascript"> if (navigator.appVersion.indexOf("MSIE") != -1) { document.write('<div ID=OuterDiv>') document.write('<img ID=iit src="img/rabbit.gif" STYLE="position:absolute;TOP:0pt;LEFT:0pt;Z-INDEX:2;visibility:hidden;">') document.write('</div>') }</script>

注：此效果只能在IE浏览器中实现，本例中所用的图形放在与本页面同级的“img”文件夹内，名为rabbit.gif。