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 相关文章推荐
向fckeditor编辑器插入指定代码的方法
May 25 Javascript
JQuery each打印JS对象的方法
Nov 13 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
Jul 25 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
Nov 07 Javascript
jQuery删除当前节点元素
Dec 07 Javascript
原生Javascript插件开发实践
Jan 09 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
Sep 15 Javascript
Vue退出登录时清空缓存的实现
Nov 12 Javascript
JS XMLHttpRequest原理与使用方法深入详解
Apr 30 Javascript
JS数组reduce()方法原理及使用技巧解析
Jul 14 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
桌面中心(二)数据库写入
2006/10/09 PHP
php 分页原理详解
2009/08/21 PHP
PHP 身份验证方面的函数
2009/10/11 PHP
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
php广告加载类用法实例
2014/09/23 PHP
PHPCMS V9 添加二级导航的思路详解
2016/10/20 PHP
JavaScript动态插入script的基本思路及实现函数
2013/11/11 Javascript
jquery 获取dom固定元素 添加样式的简单实例
2014/02/04 Javascript
jquery解析JSON数据示例代码
2014/03/17 Javascript
JS数组的遍历方式for循环与for...in
2014/07/31 Javascript
jQuery中queue()方法用法实例
2014/12/29 Javascript
JavaScript结合AJAX_stream实现流式显示
2015/01/08 Javascript
jQuery创建DOM元素实例解析
2015/01/19 Javascript
JS中prototype的用法实例分析
2015/03/19 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
2016/02/16 Javascript
AngularJS 最常用的功能汇总
2016/02/17 Javascript
js 博客内容进度插件详解
2017/02/19 Javascript
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
vue打包的时候自动将px转成rem的操作方法
2018/06/20 Javascript
简单了解JavaScript中的执行上下文和堆栈
2019/06/24 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
8个有意思的JavaScript面试题
2019/07/30 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
Python实现Linux下守护进程的编写方法
2014/08/22 Python
Python列出一个文件夹及其子目录的所有文件
2016/06/30 Python
win7+Python3.5下scrapy的安装方法
2018/07/31 Python
Python Django框架单元测试之文件上传测试示例
2019/05/17 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
学生自我鉴定范文
2013/10/04 职场文书
毕业生应聘幼儿园的自荐信
2013/11/20 职场文书
市场营销专业求职信
2014/06/17 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
晋江市委常委班子四风问题整改工作方案
2014/10/26 职场文书
证劵公司反洗钱宣传活动总结
2015/05/08 职场文书
大学生党课感想
2015/08/11 职场文书