ch8-102.html

来自「javascript demo thanks please」· HTML 代码 · 共 55 行

HTML
55
字号
<HTML>
<HEAD>
<TITLE>鼠标特效篇--图形跟随鼠标</TITLE>
</HEAD>

<BODY bgcolor="#fef4d2" background="../images/background3.jpg">

<br><br>
<center>
<font color="red"><h2>鼠标特效篇--图形跟随鼠标</h2></font>
<hr width=300>
<br><br>

<!-- 案例代码开始 -->

<script language=JavaScript>
        
function MousePicture() {
 layerRef="document.all";
 styleSwitch=".style";
 layerName = 'Picture'
 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 - 6 - width)) { newleft=document.body.clientWidth + document.body.scrollLeft - 6 - width }
 else { newleft=document.body.scrollLeft + event.clientX  }
 eval('curElement'+styleSwitch+'.pixelLeft=newleft')
 if (event.clientY > (document.body.clientHeight - 6 - height)) { newtop=document.body.clientHeight + document.body.scrollTop - 6 - height }
 else { newtop=document.body.scrollTop + event.clientY    }
 eval('curElement'+styleSwitch+'.pixelTop=newtop')
}

document.onmousemove = MousePicture;
document.write('<div ID=OuterDiv>')
<!-- [Step1]: 这里可以更改跟随鼠标的图形名称 -->
<!-- [Step2]: 在此能够设置图形的宽度和高度-->
document.write('<img ID=Picture src="gif1.gif" STYLE="position:absolute; TOP:0pt; LEFT:0pt; width=150; height=50; Z-INDEX:2; visibility:hidden;">')
document.write('</div>')
   
</script>

<!-- 案例代码结束 -->



</BODY>

</HTML>

⌨️ 快捷键说明

复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?