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 可以拖动的DIV(二)
Jun 26 Javascript
浅谈javascript 归并方法
Jan 21 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
Jun 05 Javascript
AngularJs bootstrap详解及示例代码
Sep 01 Javascript
详解React-Todos入门例子
Nov 08 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
BootStrop前端框架入门教程详解
Dec 25 Javascript
从零学习node.js之搭建http服务器(二)
Feb 21 Javascript
深入理解Vue2.x的虚拟DOM diff原理
Sep 27 Javascript
JS中原始值和引用值的储存方式示例详解
Mar 23 Javascript
vue.config.js常用配置详解
Nov 14 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计算两个路径的相对路径
2013/06/14 PHP
PHP类中的魔术方法(Magic Method)简明总结
2014/07/08 PHP
为你总结一些php信息函数
2015/10/21 PHP
PHP登录验证功能示例【用户名、密码、验证码、数据库、已登陆验证、自动登录和注销登录等】
2019/02/25 PHP
JQuery CSS样式控制 学习笔记
2009/07/23 Javascript
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
JavaScript中的数组特性介绍
2014/12/30 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
一些实用性较高的js方法
2016/04/19 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
2016/06/06 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
详解React Native顶|底部导航使用小技巧
2017/09/14 Javascript
JS实现网页抢购功能(触发,终止脚本)
2017/11/27 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
2018/08/14 Javascript
对vue事件的延迟执行实例讲解
2018/08/28 Javascript
详解vuex的简单todolist例子
2019/07/14 Javascript
Vue监听滚动实现锚点定位(双向)示例
2019/11/13 Javascript
用Python登录好友QQ空间点赞的示例代码
2017/11/04 Python
对python实现合并两个排序链表的方法详解
2019/01/23 Python
python使用for循环计算0-100的整数的和方法
2019/02/01 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
Django如何继承AbstractUser扩展字段
2020/11/27 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
基于CSS3实现图片模糊过滤效果
2015/11/19 HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
2013/01/09 HTML / CSS
大学生工作推荐信范文
2013/12/02 职场文书
拾金不昧的表扬信
2014/01/16 职场文书
聚美优品广告词改编
2014/03/14 职场文书
妇联主席先进事迹
2014/05/18 职场文书
护士长2014年终工作总结
2014/11/11 职场文书
2015年学生会主席工作总结
2015/04/21 职场文书
2015小学语文教师个人工作总结
2015/05/20 职场文书
2015年机关党建工作总结
2015/05/22 职场文书
死亡诗社观后感
2015/06/05 职场文书
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python