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导航制件jquery鼠标经过变色效果示例
Dec 05 Javascript
javascript中Number对象的toString()方法分析
Dec 20 Javascript
jquery图片切换插件
Mar 16 Javascript
函数window.open实现关闭所有的子窗口
Aug 03 Javascript
AngularJs bootstrap详解及示例代码
Sep 01 Javascript
javascript 面向对象function详解及实例代码
Feb 28 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
Sep 04 Javascript
JS实现遍历不规则多维数组的方法
Mar 21 Javascript
在Vue项目中使用d3.js的实例代码
May 01 Javascript
element-ui的回调函数Events的用法详解
Oct 16 Javascript
vue实现绑定事件的方法实例代码详解
Jun 20 Javascript
微信小程序按钮点击动画效果的实现
Sep 04 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+mysqli使用面向对象方式更新数据库实例
2015/01/29 PHP
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
对table和ul实现js分页示例分享
2014/02/24 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
2015/03/31 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
javascript瀑布流式图片懒加载实例
2020/06/28 Javascript
jQuery取消特定的click事件
2016/02/29 Javascript
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
2019/11/04 jQuery
javascript设计模式 ? 中介者模式原理与用法实例分析
2020/04/20 Javascript
Python编码时应该注意的几个情况
2013/03/04 Python
python先序遍历二叉树问题
2017/11/10 Python
Python处理文本换行符实例代码
2018/02/03 Python
Python实现的逻辑回归算法示例【附测试csv文件下载】
2018/12/28 Python
python re库的正则表达式入门学习教程
2019/03/08 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
python logging添加filter教程
2019/12/24 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
python+gdal+遥感图像拼接(mosaic)的实例
2020/03/10 Python
Windows下PyCharm配置Anaconda环境(超详细教程)
2020/07/31 Python
从一次项目重构说起CSS3自定义变量在项目的使用方法
2021/03/01 HTML / CSS
html5菜单折纸效果
2014/04/22 HTML / CSS
Swisse官方海外旗舰店:澳大利亚销量领先,自然健康品牌
2017/12/15 全球购物
选购国际女性时装设计师品牌:IFCHIC(支持中文)
2018/04/12 全球购物
Hunkemöller西班牙:欧洲最大的内衣连锁店
2018/08/15 全球购物
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
军训心得体会
2013/12/31 职场文书
出纳岗位职责
2015/01/31 职场文书
2015年董事长秘书工作总结
2015/07/23 职场文书
《暗黑破坏神2:重制版》本周进行第一轮A测 目前可官网进行申请报名
2021/04/07 其他游戏
Go语言切片前或中间插入项与内置copy()函数详解
2021/04/27 Golang