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

我们用到的只有这个对象的两个属性,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:0px; padding:0px;}
 #Img{ position:absolute; top:0px; left:0px;}
 #Main{ background-color:#F60; width:1177px; height:570px;}

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)-100)+"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;
   }

Effects:

很简单吧,去试试吧。

JS实现图片跟随鼠标移动的更多相关文章

  1. JS打造的跟随鼠标移动的酷炫拓扑图案

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. Unity3D GUI中的图片跟随鼠标旋转脚本

    var Mid : Texture2D; var mouse : Texture2D; //鼠标图片 var mousePs = Vector2.zero; //鼠标的位置 private var a ...

  3. 用JS控制图片随鼠标移动

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. 原生JS—实现图片循环切换及监测鼠标滚动切换图片

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...

  5. jQuery背景跟随鼠标移动的网页导航

    首页 PSD模板 CSS模板 特效插件 源码下载 酷站欣赏 建站资源 建站教程 心境之旅 在线留言 设为首页 加入收藏 我要投稿 联系站长 Search     首页 PSD模板 CSS模板 特效插件 ...

  6. 原生JS实现图片放大镜插件

      前  言 我们大家经常逛各种电商类的网站,商品的细节就需要用到放大镜,这个大家一定不陌生,今天我们就做一个图片放大镜的插件,来看看图片是如何被放大的…… 先看一下我们要是实现的最终效果是怎么样的  ...

  7. html5跟随鼠标炫酷网站引导页动画特效

    html5跟随鼠标炫酷网站引导页动画特效一款非常不错的引导页,文字效果渐变,鼠标跟随出绚丽的条纹.html5炫酷网站引导页,鼠标跟随出特效. 体验效果:http://hovertree.com/tex ...

  8. js手风琴图片切换实现原理及函数分析

    关键词: js手风琴 js百叶窗 js百页窗 实现原理解读 使用两层for循环实现, 第一层有三个功能,分别给第个li: 添加索引 预设位置 添加事件 第二层有两个功能,整理图片位置: 鼠标的li,以 ...

  9. Js学习笔记一(鼠标事件.....)

    1.encodeURI与decodeURI()转化url为有效的url(能被识别) Url="http://news.baidu.com/p.php?id='测试'&姓名=hkui& ...

随机推荐

  1. 第 1 章 jQuery EasyUI 入门

    学习要点: 1.什么是 jQuery EasyUI 2.学习 jQuery EasyUI 的条件 3.jQuery EasyUI 的功能和优势 4.其他的 UI 插件 5.是否兼容低版本 IE 6.下 ...

  2. 黑马程序员——OC语言基础语法 面向对象的思想

    Java培训.Android培训.iOS培训..Net培训.期待与您交流! (以下内容是对黑马苹果入学视频的个人知识点总结)(一)基础语法 1)关键字 @interface.@implementati ...

  3. VS2013环境问题

    1.多字节支持问题,多字节默认(GB2312格式),需要安装一个补丁: https://www.microsoft.com/zh-CN/download/confirmation.aspx?id=40 ...

  4. 常用JS效果 需要时更新。。。

    1.手风琴效果 JS: $(function() {     var aMenuOneLi = $(".menu-one > li");     var aMenuTwo = ...

  5. centos install kafka and zookeeper

    1.安装zookeeper ZooKeeper is a distributed, open-source coordination service for distributed applicati ...

  6. C/C++中调用python文件

    1.将python27安装目录下include.libs文件夹拷贝至Demo程序目录. 2.Demo项目设置包含Python.h.python27.lib); (因为安装python27的时候,pyt ...

  7. IE10以下的IE浏览器在form表单提交、a标签等场景下,接收application/json类型的响应时,会提示是否要下载该json文件

    IE10以下的IE浏览器并不支持application/json这种response格式,所以需要在服务端先将对象转成json字符串然后,设置Content-Type为text/html的类型,再返回 ...

  8. Java中正则Matcher类的matches()、lookAt()和find()的区别&lt;转&gt;

    在Matcher类中有matches.lookingAt和find都是匹配目标的方法,但容易混淆,整理它们的区别如下: matches:整个匹配,只有整个字符序列完全匹配成功,才返回True,否则返回 ...

  9. 11gr2 alert日志中报TNS-12535 TNS-00505原因及解决方法 (转载)

    前面新装了11GR2 RAC,某天在做巡检的时候发现alert日志中存在如下报错:Fatal NI connect error 12170. VERSION INFORMATION:        T ...

  10. ARM体系架构下的同步操作

    http://blog.hamobai.com/2012/06/28/synchronization-on-ARM-one/ 处理器在访问共享资源时,必须对临界区进行同步,即保证同一时间内,只有一个对 ...