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 相关文章推荐
Javascript 键盘keyCode键码值表
Dec 24 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 Javascript
jQuery1.6 正式版发布并提供下载
May 05 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
Jan 23 Javascript
setInterval与clearInterval的使用示例代码
Jan 28 Javascript
JavaScript中的值类型详细介绍
Dec 29 Javascript
各式各样的导航条效果css3结合jquery代码实现
Sep 17 Javascript
解析JavaScript数组方法reduce
Dec 12 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
Jul 20 Javascript
JS判断微信扫码的方法
Aug 07 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
JS重学系列之聊聊new操作符
Mar 04 Javascript
学习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
php替换字符串中间字符为省略号的方法
2015/05/04 PHP
PHP中的类型提示(type hinting)功能介绍
2015/07/01 PHP
PHP4和PHP5版本下解析XML文档的操作方法实例分析
2017/05/20 PHP
Yii框架实现图片上传的方法详解
2017/05/20 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
javascript 时间比较实现代码
2009/10/28 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
2013/09/10 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
2014/01/13 Javascript
判断一个对象是否为jquery对象的方法
2014/03/12 Javascript
javascript常用方法汇总
2014/12/02 Javascript
jQuery层级选择器用法分析
2015/02/10 Javascript
深入理解setTimeout函数和setInterval函数
2016/05/20 Javascript
layui select动态添加option的实例
2018/03/07 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
2018/03/12 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
详解用async/await来处理异步
2019/08/28 Javascript
JavaScript经典案例之简易计算器
2020/08/24 Javascript
[40:17]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第一场
2018/04/06 DOTA
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
Python字符串格式化的方法(两种)
2017/09/19 Python
Python入门之三角函数全解【收藏】
2017/11/08 Python
python使用openpyxl库修改excel表格数据方法
2018/05/03 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
TripAdvisor印尼站:全球领先的旅游网站
2018/03/15 全球购物
乌克兰香水和化妆品网站:Notino.ua
2018/03/26 全球购物
希腊品牌鞋类销售网站:epapoutsia.gr
2020/03/18 全球购物
初三学习计划书范文
2014/04/30 职场文书
感恩母亲节演讲稿
2014/05/07 职场文书
2015年学校食堂工作总结
2015/04/22 职场文书
太行山上观后感
2015/06/05 职场文书
2016秋季运动会前导词
2015/11/25 职场文书
SpringBoot连接MySQL获取数据写后端接口的操作方法
2021/11/02 MySQL