js图片跟随鼠标移动代码

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

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

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

相关文章

  • js中的屏蔽的使用示例

    js中的屏蔽的使用示例

    本文为大家介绍下js中的屏蔽的应用;屏蔽网页内容选中、剪切、复制及拷屏总之你能想象的应该都有,感兴趣的朋友可以参考下,希望对大家学习js有所帮助
    2013-07-07
  • js点击事件的执行过程实例分析【冒泡与捕获】

    js点击事件的执行过程实例分析【冒泡与捕获】

    这篇文章主要介绍了js点击事件的执行过程,结合实例形式分析了js事件机制中的冒泡与捕获相关原理、操作技巧与注意事项,需要的朋友可以参考下
    2020-04-04
  • JS+canvas画一个圆锥实例代码

    JS+canvas画一个圆锥实例代码

    本篇文章给大家讲解html中用canvas函数配合JS画出一个圆锥形的图形实例,有需要的朋友学习测试下吧。
    2017-12-12
  • JavaScript实现分页效果

    JavaScript实现分页效果

    本文主要介绍了JavaScript实现分页效果的示例代码。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • JS+CSS3实现的简易钟表效果示例

    JS+CSS3实现的简易钟表效果示例

    这篇文章主要介绍了JS+CSS3实现的简易钟表效果,涉及JavaScript结合定时器的页面元素动态设置与数值计算相关操作技巧,需要的朋友可以参考下
    2019-04-04
  • js tr控制下面的tbody隐藏和显示

    js tr控制下面的tbody隐藏和显示

    这个问题弄了我几天没心思写程序,问了论坛很多网友才搞定的。
    2008-07-07
  • HTML+JavaScript实现扫雷小游戏

    HTML+JavaScript实现扫雷小游戏

    这篇文章主要为大家详细介绍了HTML+JavaScript实现扫雷小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • jquery插件jquery.confirm弹出确认消息

    jquery插件jquery.confirm弹出确认消息

    这篇文章介绍了插件jquery.confirm弹出确认消息的实现方法,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • js微信分享API

    js微信分享API

    这篇文章主要为大家详细介绍了js微信分享实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • js快速与任意QQ号码建立临时对话

    js快速与任意QQ号码建立临时对话

    那时候在群里讨论的,吸纳很多人的方法与意见,修改而成的
    2008-10-10

最新评论