教程集 > jQuery > jquery 教程 > 正文跟随鼠标的图片

跟随鼠标的图片

发布时间：2023-12-27 编辑：jiaochengji.com

教程集为您提供跟随鼠标的图片等资源，欢迎您收藏本站，我们将为您提供最新的跟随鼠标的图片资源

提示：您可以先修改部分代码再运行

<html> <head> <title>跟随鼠标的图片</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head>  <body id="mybody" bgcolor="#FFFFFF" cellpadding="0">  <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=""></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>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
javascript特效-跟着鼠标飞的图片
 当鼠标移动到图片上时跟随鼠标显示放大的图片效果
 jQuery当鼠标悬停时放大图片的效果实例
 7款吸引人眼球的jQuery/CSS3特效实例分享
 jQuery图片预览插件 imgPreview
美图秀秀拼图功能打造时尚海报效果教程
 photoshop鼠标绘制篮球教程
 Photoshop软件APP切图和标注教程分享
 jquery实现的提示浮层跟随鼠标移动
 Photoshop鼠标绘制可爱的大白教程

上一篇：禁用鼠标左右键

[关闭]

跟随鼠标的图片

最近更新

浏览排行