如实通过JavaScript实现图片随鼠标移动?
鼠标点击图片跟着动的实现原理:
通过event.clientX和event.clilentY获取鼠标位置,然后将鼠标的X轴值和Y轴的值分别赋值给绝定位(absolute)的图片的left值和top值。
下面我们通过代码具体来实现:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>鼠标点击图片跟随鼠标移动效果-黑马程序员web前端培训高手班http://web.itheima.com</title> <style> img { /* 通过修改图片的top值和left值实现图片移动,所以图片需要绝对定位 */ position: absolute; width: 200px; } </style> </head> <body> <img src="http://www.itheima.com/images/logo.png" id="ke" class="img_ke"> </body> <script> // 定义im为需要点击的图片对象,通过getElementsByTagName()找到元素 var im = document.getElementsByTagName('img')[0]; // 给im对象绑定点击事件 im.onclick = function () { // 鼠标可以在整个页面移动,所以给docume绑定鼠标移动事件 document.onmousemove = function(e){ // 通过event.clientX和event.clilentY获取鼠标位置 // 将鼠标的x轴值和Y轴值赋值给图片的left和top im.style.left = e.clientX+'px'; im.style.top = e.clientY+'px'; } } </script> </html>
效果:
文章转自:黑马web前端培训课程 http://web.itheima.com