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

2024-11-27 02:53:47

本文实例讲述了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 DIV跟随鼠标移动

首先介绍的是一个div跟随鼠标移动的效果,具体代码如下 javascript div跟随鼠标移动 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript"> window.o
js图片跟随鼠标移动代码

在很多网站上能看到图片跟随鼠标移动的JS特效,其实做法很简单,在这里与大家分享下. 在实现这个特效之前,需要了解JS中一个对象,event(事件对象),对,只需了解这一个对象.它的方法属性我不多说了,想详细了解的童鞋点击这里,http://www.jb51.net/article/17266.htm. 我们用到的只有这个对象的两个属性,clientX与clientY,就是触发当前事件(可能是Click,也肯能是onmousemove等等事件)时鼠标在窗口区域的X,Y坐标(它们都是只读属性,所以只
javascript跟随鼠标的文字带滚动效果

比较简单常用的跟随鼠标文字滚动效果跟随鼠标的文字带滚动效果 var scroller_msg='欢迎进入我的站点' var dismissafter=0 var initialvisible=0 if (document.all) document.write(''+scroller_msg+'') function followcursor(){ //move cursor function for IE if (initialvisible==0){ curscroll.style.vis
js实现文字跟随鼠标移动而移动的方法

本文实例讲述了js实现文字跟随鼠标移动而移动的方法.分享给大家供大家参考.具体分析如下: 这是一款非常简单的鼠标特性代码,在网页中移动鼠标的时候,后面跟着一串文字跟随者鼠标移动复制代码代码如下: <html> <head> <style type="text/css"> .spanstyle { COLOR: 000000; FONT-SIZE: 10pt; POSITION: absolute; TOP: -50px; VISIBILITY:
js实现鼠标跟随运动效果

鼠标跟随运动效果展示 1.使用命令创建基本结构ul.cursorPlay#cursorPlay>li*12>a>img+div>span 2.给span标签添加字段 3.设置基本的样式 1.cursorPlay的宽度 992px,高度600px 2.cursorPlay li背景为白色,内边距为8px,外边距5px,显示浮动为左浮动 3.cursorPlay li a,cursorPlay li a img显示为块状并且为相对布局 4.cursorPlay li a添加overfl
javascript跟随鼠标x,y坐标移动的字效果

跟随鼠标x,y坐标移动的字效果 function oMove() { var x=event.x; var y=event.y; if (y>0&&y200&&x 移动的字! 移动的字! [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
js实现的跟随鼠标移动的时钟效果(中英文日期显示)

中文日期限制 "; props2=""; Split=360/n; Dsplit=360/D.length; HandHeight=ClockHeight/4.5 HandWidth=ClockWidth/4.5 HandY=-7; HandX=-2.5; scrll=0; step=0.06; currStep=0; y=new Array();x=new Array();Y=new Array();X=new Array(); for (i=0; i '+props2+D
JavaScript实现文字跟随鼠标特效

本文实例讲述了JavaScript如何实现文字跟随鼠标特效.分享给大家供大家参考.具体如下: 运行效果图如下: <HTML> <HEAD> <TITLE>鼠标特效--文本围绕鼠标</TITLE> </HEAD> <BODY> <br><br> <center> <font color="red"><h2>鼠标特效--文本围绕鼠标</h2><
javascript实现图片跟随鼠标移动效果的方法

本文实例讲述了javascript实现图片跟随鼠标移动效果的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片跟着鼠标走</title&g
Js鼠标跟随代码小手点击实例方法

可爱的鼠标跟随 html{ background:#000;} body,html,input{ cursor:none;} body,html{ height:100%;} #cursor{ position:absolute; left:100px; top:100px; display:block;} window.onload = function(){ var oCursor = document.getElementById("cursor"); document.onmo

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

相关推荐

随机推荐