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 相关文章推荐
jQuery为iframe的body添加click事件的实现代码
Apr 07 Javascript
基于jquery的一个拖拽到指定区域内的效果
Sep 21 Javascript
浅谈jQuery hover(over, out)事件函数
Dec 03 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
Jan 05 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
Bootstrap Table快速完美搭建后台管理系统
Sep 20 Javascript
vue2.x select2 指令封装详解
Oct 12 Javascript
vue生成token并保存到本地存储中
Jul 17 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
Aug 06 Javascript
工作中常用到的ES6语法
Sep 04 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
Sep 25 Javascript
Vue中图片Src使用变量的方法
Oct 30 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与javascript实现变量交互的示例代码
2013/07/23 PHP
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
PHP 二维数组和三维数组的过滤
2016/03/16 PHP
Yii中CGridView禁止列排序的设置方法
2016/07/12 PHP
PHP实现与java 通信的插件使用教程
2019/08/11 PHP
JavaScript电子时钟倒计时第二款
2016/01/10 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
2016/07/01 Javascript
微信小程序 购物车简单实例
2016/10/24 Javascript
实现JavaScript高性能的数据存储
2016/12/11 Javascript
setTimeout学习小结
2017/02/08 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
JavaScript中附件预览功能实现详解(推荐)
2017/08/15 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
vue+element树组件 实现树懒加载的过程详解
2019/10/21 Javascript
小程序使用wxs解决wxml保留2位小数问题
2019/12/13 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
javascript实现拼图游戏
2021/01/29 Javascript
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
python类和继承用法实例
2015/07/07 Python
实现python版本的按任意键继续/退出
2016/09/26 Python
Python学习笔记之错误和异常及访问错误消息详解
2019/08/08 Python
keras 特征图可视化实例(中间层)
2020/01/24 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
2016/04/26 HTML / CSS
Scholastic父母商店:儿童书籍
2017/01/01 全球购物
彪马英国官网:PUMA英国
2019/02/11 全球购物
证婚人搞笑证婚词
2014/01/10 职场文书
小学运动会口号
2014/06/07 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
师德师风建设整改措施思想汇报
2014/10/11 职场文书
小学感恩节活动总结
2015/03/24 职场文书
百万英镑观后感
2015/06/09 职场文书
董事长秘书工作总结
2015/08/14 职场文书
关于企业的执行力标语大全
2020/01/06 职场文书