js图片跟随鼠标移动代码


Posted in Javascript onNovember 26, 2015

在很多网站上能看到图片跟随鼠标移动的JS特效,其实做法很简单,在这里与大家分享下。

在实现这个特效之前,需要了解JS中一个对象,event(事件对象),对,只需了解这一个对象。它的方法属性我不多说了,想详细了解的童鞋点击这里,https://3water.com/article/17266.htm。

我们用到的只有这个对象的两个属性,clientX与clientY,就是触发当前事件(可能是Click,也肯能是onmousemove等等事件)时鼠标在窗口区域的X,Y坐标(它们都是只读属性,所以只能get,不能set),说到这里可能很多童鞋已经知道怎么做了,没错,就是这样!把得到的坐标赋值给图片定位属性中的Left与Top即可,很简单吧!下面提供一个实现的小Demo.
材料:两张你喜欢的图片,在这里就命名为"MUp.png"与"MDown.png",为什么会有两张图片呢,这里还实现了一个鼠标按下变化图片的效果。

HTML Code is Here:

<div id="Main">
   <img src="MUp.png" id="Img"/>
 </div>
CSS Code is Here:
 *{ margin:px; padding:px;}
 #Img{ position:absolute; top:px; left:px;}
 #Main{ background-color:#F; width:px; height:px;}
JS Code is Here:
 window.onload=Main;
 //全局坐标变量
  var x="";
  var y="";
  //定位图片位置
  function GetMouse(oEvent)
  {
   x=oEvent.clientX;
   y=oEvent.clientY;
  document.getElementById("Img").style.left=(parseInt(x)-)+"px";
  document.getElementById("Img").style.top=y+"px";
  }
 //入口
 function Main()
 {
  var ele=document.getElementById("Main");
  //注册鼠标移动事件
  ele.onmousemove=function(){GetMouse(event);}
  // 注册鼠标按下事件
  ele.onmousedown=function(){ChangeBg("Img","MUp.png");}
  //注册鼠标弹回事件
  ele.onmouseup=function(){ChangeBg("Img","MDown.png");}
  }
 //图片变化
 function ChangeBg(id,url)
 {
  document.getElementById(id).src=url;
 }

js图片跟随鼠标移动代码

js图片跟随鼠标移动代码

Javascript 相关文章推荐
Mootools 1.2教程 设置和获取样式表属性
Sep 15 Javascript
jquery选择器之内容过滤选择器详解
Jan 27 Javascript
Javascript堆排序算法详解
Dec 03 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
Mar 23 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
Apr 06 Javascript
java必学必会之static关键字
Dec 03 Javascript
JS实现支持Ajax验证的表单插件
Mar 24 Javascript
关于vue-router的那些事儿
May 23 Javascript
微信小程序排坑指南详解
May 23 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
Mar 12 Javascript
three.js如何实现3D动态文字效果
Mar 03 Javascript
Vue2项目中对百度地图的封装使用详解
Jun 16 Vue.js
学习JavaScript设计模式(封装)
Nov 26 #Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
Nov 26 #Javascript
学习JavaScript设计模式(接口)
Nov 26 #Javascript
Jquery中request和request.form和request.querystring的区别
Nov 26 #Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
Nov 26 #Javascript
JS延时提示框实现方法详解
Nov 26 #Javascript
js使用cookie记录用户名的方法
Nov 26 #Javascript
You might like
菜鸟修复电子管记
2021/03/02 无线电
php 301转向实现代码
2008/09/18 PHP
PHP重定向的3种方式
2013/03/07 PHP
php上传图片客户端和服务器端实现方法
2015/03/30 PHP
jQuery Tips 为AJAX回调函数传递额外参数的方法
2010/12/28 Javascript
关于js数组去重的问题小结
2014/01/24 Javascript
JS实现的网页倒计时数字时钟效果
2015/03/02 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
2015/03/12 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
Angularjs 实现移动端在线测评效果(推荐)
2017/04/05 Javascript
jQuery获取table下某一行某一列的值实现代码
2017/04/07 jQuery
angularjs下拉框空白的解决办法
2017/06/20 Javascript
Angularjs 1.3 中的$parse实例代码
2017/09/14 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
js动态生成表格(节点操作)
2021/01/12 Javascript
python 捕获 shell/bash 脚本的输出结果实例
2017/01/04 Python
python+selenium识别验证码并登录的示例代码
2017/12/21 Python
Python字符串格式化%s%d%f详解
2018/02/02 Python
PyQt5每天必学之QSplitter实现窗口分隔
2018/04/19 Python
Django ModelForm组件使用方法详解
2019/07/23 Python
python手写均值滤波
2020/02/19 Python
python Selenium 库的使用技巧
2020/10/16 Python
分享PyCharm最新激活码(真永久激活方法)不用每月找安装参数或最新激活码了
2020/12/27 Python
巴西婴儿用品商店:Bebe Store
2017/11/23 全球购物
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
WEB控件及HTML服务端控件能否调用客户端方法?如果能,请解释如何调用?
2015/08/25 面试题
函授本科自我鉴定
2013/11/03 职场文书
电子商务专业求职信
2014/03/08 职场文书
运动会演讲稿300字
2014/08/25 职场文书
学校趣味运动会开幕词
2016/03/04 职场文书
Redis缓存-序列化对象存储乱码问题的解决
2021/06/21 Redis
Python标准库pathlib操作目录和文件
2021/11/20 Python
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL
golang操作redis的客户端包有多个比如redigo、go-redis
2022/04/14 Golang