js实现简单鼠标跟随效果的方法


Posted in Javascript onApril 10, 2015

本文实例讲述了js实现简单鼠标跟随效果的方法。分享给大家供大家参考。具体分析如下:

鼠标跟随,顾名思义,就是在鼠标移动的时候,有个动画跟随着鼠标一起移动。
 
要点一:

var oEvent = evt || window.event;

这个是为了兼容ie和ff而写的,在ie下window.event表示event对象,而ff下,是给事件函数传一个参数,这个参数就表示事件对象。

要点二:

document.onmousemove = function(evt)

鼠标跟随是在鼠标移动时发生的事情。
 
要点三:

document.documentElement.scrollTop || document.body.scrollTop;

这是为了兼容chrome和其它浏览器,滚动条距上边滚动的距离,chrome用后边那个,其它浏览器用前面那个。

要点四:

oTop.style.top=oEvent.clientY+scrolltop+10+"px";

当鼠标移动时把鼠标的当前位置赋值给元素的位置值。

oEvent.clientY即为鼠标的当前Y坐标的位置,加scrolltop的距离是要在滚动到不是第一屏的时候,鼠标跟随效果依然不改变而写。
 
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
body{margin:0; padding:0}
#to_top{
width:30px;
height:40px;
padding:20px;
font:14px/20px arial;
text-align:center;
background:#06c;
position:absolute;
cursor:pointer;
color:#fff
}
</style>
<script>
window.onload = function(){
 var oTop = document.getElementById("to_top");
 document.onmousemove = function(evt){
  var oEvent = evt || window.event;
  var scrollleft = document.documentElement.scrollLeft || document.body.scrollLeft;
  var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
  oTop.style.left = oEvent.clientX + scrollleft +10 +"px";
  oTop.style.top = oEvent.clientY + scrolltop + 10 + "px";
 }
}
</script>
</head>
<body style="height:1000px;">
<a href="#">文字</a>
<div id="to_top">鼠标跟随</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 Javascript
JS模式之单例模式基本用法
Jun 30 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
Mar 12 Javascript
深入理解vue中的$set
Jun 01 Javascript
使用async-validator编写Form组件的方法
Jan 10 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
Sep 25 Javascript
微信小程序全局变量的设置、使用、修改过程解析
Sep 24 Javascript
countUp.js实现数字滚动效果
Oct 18 Javascript
js实现拖拽元素选择和删除
Aug 25 Javascript
javascript实现一款好看的秒表计时器
Sep 05 Javascript
js调用网络摄像头的方法
Dec 05 Javascript
基于JavaScript实现年月日三级联动
Jun 22 Javascript
js实现交换运动效果的方法
Apr 10 #Javascript
js实现简单的左右两边固定广告效果实例
Apr 10 #Javascript
javascript实现简单的鼠标拖动效果实例
Apr 10 #Javascript
js简单实现点击左右运动的方法
Apr 10 #Javascript
js实现透明度渐变效果的方法
Apr 10 #Javascript
js实现同一页面多个运动效果的方法
Apr 10 #Javascript
js实现同一个页面多个渐变效果的方法
Apr 10 #Javascript
You might like
基于mysql的bbs设计(二)
2006/10/09 PHP
如何修改Laravel中url()函数生成URL的根地址
2017/08/11 PHP
php使用curl获取header检测开启GZip压缩的方法
2018/08/15 PHP
javascript 静态对象和构造函数的使用和公私问题
2010/03/02 Javascript
javascript下高性能字符串连接StringBuffer类
2010/08/16 Javascript
jQuery对象和Javascript对象之间转换的实例代码
2013/03/20 Javascript
js获取html文件的思路及示例
2013/09/17 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
AngularJS表单编辑提交功能实例
2015/02/13 Javascript
javascript实现简单的html5视频播放器
2015/05/06 Javascript
js过滤HTML标签完整实例
2015/11/26 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
js与jquery分别实现tab标签页功能的方法
2016/11/18 Javascript
JS常用加密编码与算法实例总结
2016/12/22 Javascript
再谈Angular4 脏值检测(性能优化)
2018/04/23 Javascript
JavaScript门道之标准库
2018/05/26 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
2020/03/12 jQuery
javascript设计模式 ? 简单工厂模式原理与应用实例分析
2020/04/09 Javascript
vue实现表格合并功能
2020/12/01 Vue.js
Python实现可设置持续运行时间、线程数及时间间隔的多线程异步post请求功能
2018/01/11 Python
使用matplotlib画散点图的方法
2018/05/25 Python
python筛选出两个文件中重复行的方法
2018/05/31 Python
Python3实现的回文数判断及罗马数字转整数算法示例
2019/03/27 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
django 解决扩展自带User表遇到的问题
2020/05/14 Python
css3实现背景图片拉伸效果像桌面壁纸一样
2013/08/19 HTML / CSS
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
希尔顿酒店中国网站:Hilton中国
2017/03/11 全球购物
发现世界上最好的珠宝设计师:JewelStreet
2017/12/17 全球购物
英国性感内衣和睡衣品牌:Bluebella
2018/01/26 全球购物
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
2014年教师学期工作总结
2014/11/08 职场文书
员工试用期转正自我评价
2015/03/10 职场文书
幼儿园春季开学通知
2015/07/16 职场文书