<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>甩不掉的跟屁虫</title> <script type="text/javascript" src="jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#bug").css("position","absolute"); $(document).mousemove(function () { var mouseX = event.clientX; var mouseY = event.clientY; $("#bug").css("top",mouseY+"px"); $("#bug").css("left",mouseX-$("#bug").prop("offsetWidth")+"px"); }); }); </script> </head> <body> <img id="bug" src="image/跟屁虫.png" alt="跟屁虫" /> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title></title> <script type="text/javascript"> window.onload=function(){ var imgBug = document.getElementById("imgBug"); imgBug.style.position = "absolute"; //1 注册鼠标移动的事件处理函数 document.οnmοusemοve=function(){ //2 改变图片的坐标 //获取鼠标的坐标 var x = event.clientX; var y = event.clientY; imgBug.style.left = x - imgBug.offsetWidth +"px"; imgBug.style.top = y+"px"; } } </script> </head> <body> <img id="imgBug" src="image/跟屁虫.png" alt="跟屁虫"/> </body> </html>