跟随鼠标的网页小宠物，始终保持一定距离

发布时间：2018-08-20 03:01:28 所属栏目：交互来源：站长网

导读：跟随鼠标的网页小宠物，始终与鼠标保持一定距离，感觉非常有意思，其实这里的小宠物也可以是其它图片，原理是 Java Script利用鼠标相关的函数，将图片控制在鼠标周围，非常不错的小代码，放在个人博客很不错。小提示：鼠标不要移动的太快哦，否则小宠物会

　　跟随鼠标的网页小宠物，始终与鼠标保持一定距离，感觉非常有意思，其实这里的小宠物也可以是其它图片，原理是JavaScript利用鼠标相关的函数，将图片控制在鼠标周围，非常不错的小代码，放在个人博客很不错。

　　小提示：鼠标不要移动的太快哦，否则小宠物会乱跑的，嘿嘿！

　　代码如下：

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>被鼠标牵引而束缚的屏幕宠物</title> </head> <body bgcolor="#FFFFFF"> <STYLE> v:* { BEHAVIOR: url(#default#VML) } </STYLE> <SCRIPT language="JavaScript"> var stringcolor="black" var ballsrc="/uploads/allimg/1101/liehuo_cw.gif" if (document.all&&window.print){ document.write('<IMG id=Om style="LEFT: -10px; POSITION: absolute" src="'+ballsrc+'">') ddx=0;ddy=0;PX=0;PY=0;xm=0;ym=0 OmW=Om.width/2;OmH=Om.height/2 } function Ouille(){ x=Math.round(PX+=(ddx+=((xm-PX-ddx)*3)/100)) y=Math.round(PY+=(ddy+=((ym-PY-ddy)*3-300)/100)) Om.style.left=x-OmW Om.style.top=y-OmH elastoc.to=x+","+y //elastoc.strokecolor="RGB("+x+","+(2*y)+",0)" elastoc.strokecolor=stringcolor setTimeout("Ouille()",1) } function momouse(){ xm=window.event.x+5 ym=window.event.y+document.body.scrollTop+15 elastoc.from=xm+","+ym } if(document.all&&window.print){ code="<v:line id=elastoc style='LEFT:0;POSITION:absolute;TOP:0' strokeweight='1.5pt'></v:line>"} else { code="<v:group style='LEFT:-10;WIDTH:100pt;POSITION:absolute;TOP:0;HEIGHT:100pt' coordsize='21600,21600'><v:line id=elastoc style='LEFT:0;WIDTH:100pt;POSITION:absolute;TOP:0;HEIGHT:100pt' strokeweight='1.5pt'></v:line></v:group>"} if(document.all&&window.print){ document.body.insertAdjacentHTML("afterBegin",code) document.onmousemove=momouse Ouille() } </SCRIPT> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

5G如何帮助企业探索物	新趋势下物联网将在哪
献礼记者节北京电信5	电信套餐不能变成套路