js实现图片跟随鼠标移动效果


Posted in Javascript onOctober 16, 2019

本文实例为大家分享了js实现图片跟随鼠标移动效果的具体代码,供大家参考,具体内容如下

<head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
 #box {
 width: 1000px;
 height: 600px;
 background: #cecece;
 margin: 20px auto;
 }
 
 img{
 width: 50px;
 height: 50px;
 border-radius: 50%;
 background: #f00;
 position: absolute;
 }
 </style>
</head>

<body>
 <div id="box">
 <img src="img/1.png" class="img"/>
 <img src="img/1.png" class="img"/>
 <img src="img/1.png" class="img"/>
 <img src="img/1.png" class="img"/>
 <img src="img/1.png" class="img"/>
 <img src="img/1.png" class="img"/>
 <img src="img/1.png" class="img"/>
 <img src="img/1.png" class="img"/>
 <img src="img/1.png" class="img"/>
 <img src="img/1.png" class="img"/>
 <img src="img/1.png" class="img"/>
 <img src="img/1.png" class="img"/>
 <img src="img/1.png" class="img"/>
 <img src="img/1.png" class="img"/>
 <img src="img/1.png" class="img"/>
 <img src="img/1.png" class="img"/>
 <img src="img/1.png" class="img"/>
 <img src="img/1.png" class="img"/>
 <img src="img/1.png" class="img"/>
 <img src="img/1.png" class="img"/>
 <img src="img/1.png" class="img"/>
 <img src="img/1.png" class="img"/>
 <img src="img/1.png" class="img"/>
 <img src="img/1.png" class="img"/>
 </div>
 <script type="text/javascript">
 window.onload = function() {
 var oBox = document.getElementById("box");
 var oImg=document.getElementsByClassName("img");
 
 oBox.onmousemove = function(e) {
 var e = e || window.event;
 var left = e.clientX;
 var top = e.clientY;

 //console.log(left, top);
 //设置oImg偏移量
 //oImg.style.left = left + "px";
 //oImg.style.top = top + "px";
 oImg[0].style.left=left + "px";
 oImg[0].style.top=top + "px";
 
 for(var i=oImg.length-1;i>0;i--){
 oImg[i].style.left=oImg[i-1].style.left;
 oImg[i].style.top=oImg[i-1].style.top;
 }
 }
 }
 </script>
</body>

javascript入门教程专题点击链接查看:javascript入门教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript DOM 学习第三章 内容表格
Feb 19 Javascript
JS 表单验证大全
Nov 23 Javascript
JavaScript String.replace函数参数实例说明
Jun 06 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
Jan 11 Javascript
通过Jquery的Ajax方法读取将table转换为Json
May 31 Javascript
Knockout自定义绑定创建方法
Dec 26 Javascript
jquery实现页面常用的返回顶部效果
Mar 04 Javascript
Jquery操作cookie记住用户名
Mar 29 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 Javascript
微信小程序之自定义组件的实现代码(附源码)
Aug 02 Javascript
JS将时间秒转换成天小时分钟秒的字符串
Jul 10 Javascript
详解使用WebPack搭建React开发环境
Aug 06 Javascript
vue实现鼠标经过动画
Oct 16 #Javascript
javascript实现动态时钟的启动和停止
Jul 29 #Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 #Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
Oct 16 #Javascript
javascript实现点亮灯泡特效示例
Oct 15 #Javascript
vue-cli 为项目设置别名的方法
Oct 15 #Javascript
Vue 实现输入框新增搜索历史记录功能
Oct 15 #Javascript
You might like
php下过滤html代码的函数 提高程序安全性
2010/03/02 PHP
浅析php插件 Simple HTML DOM 用DOM方式处理HTML
2013/07/01 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(二)
2014/06/23 PHP
python进程与线程小结实例分析
2018/11/11 PHP
PHP实现文字写入图片功能
2019/02/18 PHP
Laravel timestamps 设置为unix时间戳的方法
2019/10/11 PHP
使用onbeforeunload属性后的副作用
2007/03/08 Javascript
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
Raphael带文本标签可拖动的图形实现代码
2013/02/20 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
js 获取元素在页面上的偏移量的方法汇总
2015/04/13 Javascript
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
PageSwitch插件实现100种不同图片切换效果
2015/07/28 Javascript
jQuery中选择器的基础使用教程
2016/05/23 Javascript
AngularJS表单详解及示例代码
2016/08/17 Javascript
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
各种选择框jQuery的选中方法(实例讲解)
2017/06/27 jQuery
关于Ajax的原理以及代码封装详解
2017/09/08 Javascript
JS跳转手机站url的若干注意事项
2017/10/18 Javascript
基于vue组件实现猜数字游戏
2020/05/28 Javascript
vue结合Echarts实现点击高亮效果的示例
2018/03/17 Javascript
Node.js 使用axios读写influxDB的方法示例
2018/10/26 Javascript
vue 路由子组件created和mounted不起作用的解决方法
2019/11/05 Javascript
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
[43:57]Liquid vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python编程之requests在网络请求中添加cookies参数方法详解
2017/10/25 Python
python实现拓扑排序的基本教程
2018/03/11 Python
Python OpenCV中的resize()函数的使用
2019/06/20 Python
应聘教师自荐信
2013/10/12 职场文书
继电保护工岗位职责
2014/01/05 职场文书
个人自我剖析材料
2014/02/07 职场文书
党员批评与自我批评
2014/02/12 职场文书
授权委托书范本
2014/04/03 职场文书
我的小天地教学反思
2014/04/30 职场文书
给医院的感谢信
2015/01/21 职场文书
Redis分布式锁Redlock的实现
2021/08/07 Redis