js图片跟随鼠标移动代码

 更新时间:2015年11月26日 14:34:15   投稿:mrr   我要评论
大家浏览网页的时候,见到过图片跟随鼠标移动的js特效,效果非常好,是怎么实现的呢,实现这个功能很简单,感兴趣的朋友一起看看吧

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

在实现这个特效之前,需要了解JS中一个对象,event(事件对象),对,只需了解这一个对象。它的方法属性我不多说了,想详细了解的童鞋点击这里,//www.jb51.net/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;
 }

相关文章

  • 通过设置CSS中的position属性来固定层的位置

    通过设置CSS中的position属性来固定层的位置

    position 属性规定元素的定位类型,这个属性定义建立元素布局所用的定位机制,本文给大家介绍通过设置CSS中的position属性来固定层的位置,感兴趣的朋友一起学习吧
    2015-12-12
  • JS实现的贪吃蛇游戏完整实例

    JS实现的贪吃蛇游戏完整实例

    这篇文章主要介绍了JS实现的贪吃蛇游戏,结合完整实例形式分析了javascript实现贪吃蛇游戏的具体步骤、原理与相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • BootStrap modal实现拖拽功能

    BootStrap modal实现拖拽功能

    这篇文章主要为大家详细介绍了BootStrap modal实现拖拽功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • JS实现兼容性较好的随屏滚动效果

    JS实现兼容性较好的随屏滚动效果

    这篇文章主要介绍了JS实现兼容性较好的随屏滚动效果,演示了固定位置显示和随屏滚动两种效果的实现方法,涉及css样式的设置与结合时间函数递归调用实现滚屏的技巧,需要的朋友可以参考下
    2015-11-11
  • location.hash保存页面状态的技巧

    location.hash保存页面状态的技巧

    hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分)。接下来通过本文给大家介绍location.hash保存页面状态的相关内容,感兴趣的朋友一起学习吧
    2016-04-04
  • js经验分享 JavaScript反调试技巧

    js经验分享 JavaScript反调试技巧

    在这篇文章中,我打算跟大家总结一下关于JavaScript反调试技巧方面的内容。值得一提的是,其中有些方法已经被网络犯罪分子广泛应用到恶意软件之中了,需要的朋友可以参考下
    2018-03-03
  • cordova入门基础教程及使用中遇到的一些问题总结

    cordova入门基础教程及使用中遇到的一些问题总结

    这篇文章主要给大家介绍了关于cordova的入门基础教程以及在使用中遇到的一些问题,文中通过示例代码一步步介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-11-11
  • js简单实现交换Li的值

    js简单实现交换Li的值

    这篇文章主要介绍的是通过js简单实现交换Li的值,需要的朋友可以参考下
    2014-05-05
  • 用JS实现网页元素阴影效果的研究总结

    用JS实现网页元素阴影效果的研究总结

    用JS实现网页元素阴影效果的研究总结...
    2007-08-08
  • JavaScript解决Joseph问题

    JavaScript解决Joseph问题

    JavaScript解决Joseph问题...
    2007-02-02

最新评论