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 相关文章推荐
基于Jquery的开发个代阴影的对话框效果代码
Jul 28 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
Sep 26 Javascript
分享一个常用的javascript静态类
Dec 31 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
May 09 Javascript
全面了解js中的script标签
Jul 04 Javascript
基于BootStrap的文本编辑器组件Summernote
Oct 27 Javascript
layui获取多选框中的值方法
Aug 15 Javascript
5分钟快速掌握JS中var、let和const的异同
Sep 19 Javascript
微信小程序登录态和检验注册过没的app.js写法
May 22 Javascript
微信小程序开发摇一摇功能
Nov 22 Javascript
使用Vue生成动态表单
Nov 26 Javascript
Vue组件模板的几种书写形式(3种)
Feb 19 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下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
php中判断数组相等的方法以及数组运算符介绍
2015/03/30 PHP
详细解读PHP的Yii框架中登陆功能的实现
2015/08/21 PHP
php中分页及SqlHelper类用法实例
2017/01/12 PHP
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
2007/04/20 Javascript
jquery autocomplete自动完成插件的的使用方法
2010/08/07 Javascript
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
2013/07/09 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
2014/06/23 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
全面介绍javascript实用技巧及单竖杠
2016/07/18 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
2017/07/10 Javascript
用js屏蔽被http劫持的浮动广告实现方法
2017/08/10 Javascript
jquery之基本选择器practice(实例讲解)
2017/09/30 jQuery
JS实现的简单表单验证功能示例
2017/10/13 Javascript
Angular4学习教程之HTML属性绑定的方法
2018/01/04 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
Layui弹出层 加载 做编辑页面的方法
2019/09/16 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
React倒计时功能实现代码——解耦通用
2020/09/18 Javascript
js实现鼠标拖曳效果
2020/12/30 Javascript
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
Python中DJANGO简单测试实例
2015/05/11 Python
Python生成器generator原理及用法解析
2020/07/20 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
维氏瑞士军刀英国网站:Victorinox英国
2019/07/04 全球购物
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
作为网站管理者应当如何防范XSS
2014/08/16 面试题
网络教育毕业生自我鉴定
2013/10/10 职场文书
作弊检讨书1000字
2014/02/01 职场文书
商铺消防安全责任书
2014/07/29 职场文书
大学生安全教育主题班会
2015/08/12 职场文书
初中运动会闭幕词范本3篇
2019/12/09 职场文书