js-跟着鼠标移动的图片

在这里玩一下页面中跟着鼠标移动的图片效果，在这里之前，大家需要对js有基本的认识，才能理解这个简单的代码
1.使用的工具：WebStorm(当然也可以用HBuilder)

2.先找一个图片，放到项目imges文件中
我的图片名是timg.gif

3.代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>移动</title><style>#img {position: relative;}</style>
</head>
<body><!--引入图片--><img src="./images/timg.gif" id="img"><script>//在这个页面上获取图片id，图片id为imgvar img=document.getElementById('img');//设置点击事件（鼠标移动时），达到动态效果document.onmousemove=function (e) {//设置图片的位置等于鼠标的位置（可以适当加减距离）img.style.left=e.pageX-80 + 'px';img.style.top=e.pageY-80 + 'px';}</script>
</body>
</html>

坐标（img.style.left，img.style.top）就是图片左上角的点
坐标（e.pageX,e.pageY）就是鼠标所在的位置

4.保存在浏览器查看：

在页面就可以看到跟着鼠标移动的效果了

js-跟着鼠标移动的图片相关推荐

html怎么鼠标经过添加蒙版遮罩,js实现鼠标移动到图片产生遮罩效果
本文实例为大家分享了js实现鼠标移动到图片产生遮罩效果的具体代码,供大家参考,具体内容如下 mask .pic{ width:300px; height:250px; background:url(i ...
JS实现鼠标中心放大图片功能原理及实例演示
版权声明:本文为博主原创文章,未经博主允许不得转载. 在制作网页的过程中,特别是对于浏览图片的网页,难免会涉及实现图片放大缩小及拖拽的功能,一般上述的功能很好实现,但是很多小伙伴发现其实有一个东西很难 ...
html 图片滚动放大缩小,js实现图片旋转 js滚动鼠标中间对图片放大缩小
从开通博客园到今天,有两个多月了.我发现之前没有开通博客记录自己所做的东西,真是后悔啊. 现在一点一点把自己所做的功能以博客的形式记录下来,一方面可以给大家分享,大家一起学习,同时自己也从新回顾一下. ...
JS实现鼠标移上去图片停止滚动移开恢复滚动效果
这是在做个人站的时候展示项目成果,因为不光需要展示,还需要介绍详细内容,就在滚动展示的地方做了这个效果以便于点开想要看的项目. 首先,要做的是一个需要滚动的区域.我前边写过一个关于图片循环滚动的示例, ...
JS实现鼠标滑过图片的抖动效果
在上网时候发现了这个效果(效果演示地址:http://www.baidu.com/search/baike/usertask/mingmantianxia/). 在鼠标放到图片上, 图片会有个上下抖动 ...
js定义鼠标经过变换图片
function changeImg(id, path) { document.getElementByIdx_x(id).src=path; } 示例: <a href="#&quo ...
js实现页面上的图片跟着鼠标箭头移动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
[读码][js,css3]能感知鼠标方向的图片遮罩效果
效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果] 近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证. 读码就要读比较全面的,读像是原著的代码 ...
jQuery实现图片跟着鼠标移动的效果
例子: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" con ...

js-跟着鼠标移动的图片

js-跟着鼠标移动的图片相关推荐

最新文章

热门文章