跟随鼠标的图片，有变化的哦

2007-03-08　源自:IT粉丝网　网友评论 0 条　进入视频教程

将两个源代码复制到body区域内，改一改相应的图片即可。

<html><head><title>网页<a href='http://www.itfensi.com/exploit/web/' target='_blank' class='infotextkey'>特效</a>|itfensi.com/Js|---跟随鼠标的图片</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head><body id="mybody" bgcolor="#FFFFFF" cellpadding="0"cellspacing="0" width="500" align="center"><table width="520">  <tr>    <td align="left" width="512" valign="top">      <p align="center"></td>    <td align="left" valign="top" width="5"><script>picFollow = new Image();picFollow.src = "images/heart.gif";picolimpic = new Image();picolimpic.src = "images/love.gif";document.onmousemove = getMousePosition;document.onmouseout = pauseheart;document.write("<div id=/"diva/" style=/"position:absolute/">");document.write("<img name=/"pic/"src=" + picFollow.src + "></div>");var picX = 20;var picY = 100;var step = 10;var speed = 10;var tolerance = step/2 +1;var mouseX = 0;var mouseY = 0;var mouseOut = true;var followMouse = false;myInterval = setInterval('moveheart()', speed);function pauseheart() {mouseOut = true;}function getMousePosition(e) {mouseX = window.event.x + document.body.scrollLeft;mouseY = window.event.y + document.body.scrollTop;mouseOut = false;if (followMouse) {diva.style.left = mouseX - pic.width / 2;diva.style.top = mouseY - pic.height / 2;   }}function calcNewPos() {if (mouseX == picX)return;arg = (mouseY-picY) / (mouseX-picX);mult = 1;if (mouseX - picX < 0)mult = -1;alpha = Math.atan(arg);dx = mult * step * Math.cos(alpha);dy = mult * step * Math.sin(alpha);picX += dx;picY += dy;}function collision() {if ((Math.abs(picX-mouseX) < tolerance) && (Math.abs(picY-mouseY) < tolerance) && (!mouseOut))return true;return false;}function moveheart() {calcNewPos();window.status = "("+mouseX+","+mouseY+")";diva.style.left = picX - pic.width / 2;diva.style.top = picY - pic.height / 2;if (collision()) {clearInterval(myInterval);pic.src = picolimpic.src;followMouse = true;mybody.style.cursor="hand"   }}    </script></td>  </tr></table><table><tbody><script language="Javascript"></script><table border="0" cellpadding="0" cellspacing="0" width="500" align="center">  <tr>  </tr></table><table width="100%">  <tr>  </tr> </table>  <table width="100%">   <tr>   </tr></table></body>

提示：您可以先修改部分代码再运行，复制代码和保存代码功能在Firefox下无效。

转自于 iT粉丝网_鼠标特效

[评论][挑错][复制链接发给好友][收藏本文]

复制本文链接(URL)发送给朋友：

上一篇：显示鼠标坐标信息 ·下一篇：类似Windows自定义过的鼠标

跟随鼠标的图片，有变化的哦

相关文章推荐阅读

专题教程推荐

热门推荐