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 相关文章推荐
javascript 关于# 和 void的区别分析
Oct 26 Javascript
JS DOM 操作实现代码
Aug 01 Javascript
引用 js在IE与FF之间的区别详细解析
Nov 20 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
Aug 10 Javascript
JavaScript用select实现日期控件
Jul 17 Javascript
JS截取字符串实例详解
Nov 24 Javascript
JS代码防止SQL注入的方法(超简单)
Apr 12 Javascript
jquery对dom节点的操作【推荐】
Apr 15 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
Aug 30 Javascript
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
Vue-cli3.x + axios 跨域方案踩坑指北
Jul 04 Javascript
微信小程序实现通讯录列表展开收起
Nov 18 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
php简单封装了一些常用JS操作
2007/02/25 PHP
PHP获取网站域名和地址的代码
2008/08/17 PHP
(PHP实现)只使用++运算实现加法,减法,乘法,除法
2013/06/27 PHP
将php数组输出html表格的方法
2014/02/24 PHP
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
PHP获取当前完整URL地址的函数
2014/12/21 PHP
PHP中实现Bloom Filter算法
2015/03/30 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
ThinkPHP框架整合微信支付之JSAPI模式图文详解
2019/04/09 PHP
bgsound 背景音乐 的一些常用方法及特殊用法小结
2010/05/11 Javascript
js中传递特殊字符(+,&amp;)的方法
2014/01/16 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
2014/06/11 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
谈谈javascript中使用连等赋值操作带来的问题
2015/11/26 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
angularJS开发注意事项
2018/05/26 Javascript
微信小程序视图控件与bindtap之间的问题的解决
2019/04/08 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
简单了解Ajax表单序列化的实现方法
2019/06/14 Javascript
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
Python os模块介绍
2014/11/30 Python
python调用c++返回带成员指针的类指针实例
2019/12/12 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
Python之变量类型和if判断方式
2020/05/05 Python
Selenium Webdriver元素定位的八种常用方式(小结)
2021/01/13 Python
酒店服务实习自我鉴定
2013/09/22 职场文书
大学生军训感想
2014/02/16 职场文书
党建工作经验交流材料
2014/05/25 职场文书
2014超市双十一活动策划方案
2014/09/29 职场文书
机关党员三严三实心得体会
2014/10/13 职场文书
幼儿园班级工作总结2015
2015/05/25 职场文书
入党团支部推荐意见
2015/06/02 职场文书
德劲DE1108畅想
2021/04/22 无线电