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 相关文章推荐
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
Oct 22 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
Oct 15 Javascript
js替代copy(示例代码)
Nov 27 Javascript
Javascript的&amp;&amp;和||的另类用法
Jul 23 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 Javascript
JavaScript仿百度图片浏览效果
Nov 23 Javascript
Bootstrap的class样式小结
Dec 01 Javascript
vue组件详解之使用slot分发内容
Apr 09 Javascript
JS对象与json字符串相互转换实现方法示例
Jun 14 Javascript
layui table 获取分页 limit的方法
Sep 20 Javascript
JS实现普通轮播图特效
Jan 01 Javascript
JS实现省市县三级下拉联动
Apr 10 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正则走开
2008/03/15 PHP
php批量上传的实现代码
2013/06/09 PHP
php文件上传、下载和删除示例
2020/08/28 PHP
PHP Mysqli 常用代码集合
2016/11/12 PHP
javascript深入理解js闭包
2010/07/03 Javascript
深入了解javascript中的prototype与继承
2013/04/14 Javascript
Jquery实现的tab效果可以指定默认显示第几页
2013/10/16 Javascript
window.open打开页面居中显示的示例代码
2013/12/27 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
深入解析JavaScript中函数的Currying柯里化
2016/03/19 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
JavaScript编写一个简易购物车功能
2016/09/17 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
2016/10/28 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
理解javascript中的Function.prototype.bind的方法
2017/02/03 Javascript
JS回调函数简单用法示例
2017/02/09 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
node.js ws模块搭建websocket服务端的方法示例
2019/04/25 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
2019/10/15 Javascript
Python实现简单的代理服务器
2015/07/25 Python
python用pickle模块实现“增删改查”的简易功能
2017/06/07 Python
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
python生成n个元素的全组合方法
2018/11/13 Python
使用django实现一个代码发布系统
2019/07/18 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
台湾百利市购物中心:e-Payless
2017/08/16 全球购物
美国著名的女性内衣零售商:Frederick’s of Hollywood
2018/02/24 全球购物
The Beach People美国:澳洲海滨奢华品牌
2018/07/05 全球购物
汉米尔顿手表官网:Hamilton
2020/09/13 全球购物
促销活动总结
2014/04/28 职场文书
毕业生求职信
2014/06/10 职场文书
城市规划应届毕业生自荐信
2014/07/04 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript