您的当前位置:首页正文

JavaScript鼠标跟随效果的实现

时间:2023-11-30 来源:站点网

在我们日常开发工作中,我们会经常使用到JavaScript实现鼠标跟随的效果,很多小伙伴可能对鼠标跟随不是很了解,我们今天就带大家介绍JavaScript实现鼠标跟随效果的方法,涉及javascript鼠标事件与坐标获取等相关技巧!

要点一:

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

要点二:

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

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

要点四:

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

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><p id="to_top">鼠标跟随</p></body></html>

总结:

相信小伙伴们通过对本文的学习,对JavaScript实现鼠标跟随有了进一步的了解,希望对你的工作有所帮助!

相关推荐:

鼠标跟随的文字变动效果

基于JQuery的一个简单的鼠标跟随提示效果

JS实现的鼠标跟随代码(卡通手型点击效果)

小编还为您整理了以下内容,可能对您也有帮助:

制作网页时如何让鼠标后面跟着一行字,一直跟着鼠标,滚动鼠标滚轮的时候也一直跟着鼠标,最好有代码。

3层效果鼠标跟随文字:

把如下代码加入<body>区域中

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

message = 'JavaScript2000';

FonT = 'Verdana';

ColoR = '223399';

SizE = 3; //1 to 7 only!

var amount = 5, ypos =- 50, xpos = 0, Ay = 0, Ax = 0, By = 0, Bx = 0, Cy = 0, Cx = 0, Dy = 0, Dx = 0, Ey = 0, Ex = 0;

if (document.layers) {

for (i = 0; i < amount; i++) {

document.write('<layer name=nsl'+i+' top=0 left=0><font face='+FonT+' size='+SizE+' color='+ColoR+'>'+message+'</font></layer>');

}

window.captureEvents(Event.MOUSEMOVE);

function nsmouse(evnt) {

xpos = evnt.pageX + 20;

ypos = evnt.pageY + 20;

}

window.onMouseMove = nsmouse;

}

else if (document.all) {

document.write("<div id='outer' style='position:absolute;top:0px;left:0px'>");

document.write("<div style='position:relative'>");

for (i = 0; i < amount; i++) {

document.write('<div id="text"'+i+' style="position:absolute;top:0px;left:0px;width:400px;height:20px"><font face='+FonT+' size='+SizE+' color='+ColoR+'>'+message+'</font></div>')

}

document.write("</div>");

document.write("</div>");

function iemouse() {

ypos = event.y + 20;

xpos = event.x + 20;

}

window.document.onmousemove = iemouse;

}

function makefollow() {

if (document.layers) {

document.layers['nsl'+0].top = ay;

document.layers['nsl'+0].left = ax;

document.layers['nsl'+1].top = by;

document.layers['nsl'+1].left = bx;

document.layers['nsl'+2].top = cy;

document.layers['nsl'+2].left = cx;

document.layers['nsl'+3].top = Dy;

document.layers['nsl'+3].left = Dx;

document.layers['nsl'+4].top = Ey;

document.layers['nsl'+4].left = Ex;

}

else if (document.all) {

outer.style.pixelTop = document.body.scrollTop;

text[0].style.pixelTop = ay;

text[0].style.pixelLeft = ax;

text[1].style.pixelTop = by;

text[1].style.pixelLeft = bx;

text[2].style.pixelTop = cy;

text[2].style.pixelLeft = cx;

text[3].style.pixelTop = Dy;

text[3].style.pixelLeft = Dx;

text[4].style.pixelTop = Ey;

text[4].style.pixelLeft = Ex;

}

}

function move() {

ey = Ey += (ypos - Ey) * 0.2;

ex = Ex += (xpos - Ex) * 0.2;

dy = Dy += (ey - Dy) * 0.3;

dx = Dx += (ex - Dx) * 0.3;

cy = Cy += (dy - Cy) * 0.4;

cx = Cx += (dx - Cx) * 0.4;

by = By += (cy - By) * 0.5;

bx = Bx += (cx - Bx) * 0.5;

ay = Ay += (by - Ay) * 0.6;

ax = Ax += (bx - Ax) * 0.6;

makefollow();

setTimeout('move()', 10);

}

window.onload=move;

// End -->

</script>追问好了 不麻烦你了 你的代码真的很不错 谢谢了

javascript特效问题 页面上有许多点一直跟随着鼠标指针的移动。如何实现这个这个效果.

新建html复制黏贴运行即可

<html>

<head>

<title>鼠标跟随效果</title>

<style type="text/css">

html {

overflow: hidden;

}

body {

position: absolute;

height: 100%;

width: 100%;

margin:0;

padding:0;

}

#screen {

background:#000;

position: absolute;

width: 100%;

height: 100%;

}

#screen span {

background: #fff;

font-size: 0;

overflow: hidden;

width: 2px;

height: 2px;

}

</style>

<script type="text/javascript">

var Follow = function () {

var $ = function (i) {return document.getElementById(i)},

addEvent = function (o, e, f) {o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on'+e, function(){f.call(o)})},

OBJ = [], sp, rs, N = 0, m;

var init = function (id, config) {

this.config = config || {};

this.obj = $(id);

sp = this.config.speed || 4;

rs = this.config.animR || 1;

m = {x: $(id).offsetWidth * .5, y: $(id).offsetHeight * .5};

this.setXY();

this.start();

}

init.prototype = {

setXY : function () {

var _this = this;

addEvent(this.obj, 'mousemove', function (e) {

e = e || window.event;

m.x = e.clientX;

m.y = e.clientY;

})

},

start : function () {

var k = 180 / Math.PI, OO, o, _this = this, fn = this.config.fn;

OBJ[N++] = OO = new CObj(null, 0, 0);

for(var i=0;i<360;i+=20){

var O = OO;

for(var j=10; j<35; j+=1){

var x = fn(i, j).x,

y = fn(i, j).y;

OBJ[N++] = o = new CObj(O , x, y);

O = o;

}

}

setInterval(function() {

for (var i = 0; i < N; i++) OBJ[i].run();

}, 16);

}

}

var CObj = function (p, cx, cy) {

var obj = document.createElement("span");

this.css = obj.style;

this.css.position = "absolute";

this.css.left = "-1000px";

this.css.zIndex = 1000 - N;

document.getElementById("screen").appendChild(obj);

this.ddx = 0;

this.ddy = 0;

this.PX = 0;

this.PY = 0;

this.x = 0;

this.y = 0;

this.x0 = 0;

this.y0 = 0;

this.cx = cx;

this.cy = cy;

this.parent = p;

}

CObj.prototype.run = function () {

if (!this.parent) {

this.x0 = m.x;

this.y0 = m.y;

} else {

this.x0 = this.parent.x;

this.y0 = this.parent.y;

}

this.x = this.PX += (this.ddx += ((this.x0 - this.PX - this.ddx) + this.cx) / rs) / sp;

this.y = this.PY += (this.ddy += ((this.y0 - this.PY - this.ddy) + this.cy) / rs) / sp;

this.css.left = Math.round(this.x) + 'px';

this.css.top = Math.round(this.y) + 'px';

}

return init;

}();

</script></head>

<body>

<div id="screen"></div>

<script type="text/javascript">

new Follow('screen', {speed: 4,

animR : 2,

fn : function (i, j) {

return {

x : j/4*Math.cos(i),

y : j/4*Math.sin(i)

}

}})

</script></body>

</html>

编程高手??

这也是高手解决的问题?

在网上冲浪时,你是否对某些网页上的可以动态跟随你的鼠标踪迹记忆尤新呢?的确,在网页上实现鼠标跟随,这种互动效果能带给来访者留下深刻的印象。而,现在不少网站通过FLASH来实现这个效果,但因为IE和NC都要安装插件才能观看,于是就有了相当的局限性。用JAVASCRIPT实现该效果,就有天然的优势了——浏览器自动识别。下文将讲述如何
用JAVASCRIPT实现鼠标跟随。

程序的主要思路是把跟随鼠标的6个小点放在6个透明的层上,然后通过一个 TIMER,定时通过document.captureEvents(Event.MOUSEMOVE)函数获得鼠标的X,Y 坐标,然后计算和重画6个层,从而实现6个彩色小点跟随着鼠标。

< html >
< head >
< title >Mouse trace< /title >
< script LANGUAGE="JavaScript" >
< !--
function Layerfx(yyleft,yytop,yyfnx,yyfny,yydiv,
yybilder,yyloop,yyto,yycnt,yystep)
{ // 设置重绘层的Layerfx函数
if ((document.layers)||(document.all)){
with (Math) {yynextx= eval(yyfnx)}
with (Math) {yynexty= eval(yyfny)}
yycnt=(yyloop && yycnt >
=yystep*yybilder)?0:yycnt+yystep;
if (document.layers){//针对NC浏览器定义层的坐标
eval(yydiv+".top="+(yynexty+yytop))
eval(yydiv+".left="+(yynextx+yyleft))
}
if (document.all){//针对IE浏览器定义层的坐标
eval("yydiv=yydiv.replace(/.layers/gi, '.all')");
eval(yydiv+".style.pixelTop="+(yynexty+yytop));
eval(yydiv+".style.pixelLeft="+(yynextx+yyleft));
}
argStr='Layerfx('+yyleft+','+yytop+',"'+yyfnx+'",
"'+yyfny+'","'+yydiv+'",'+yybilder+','+yyloop+',
'+yyto+','+yycnt+','+yystep+')';
if (yycnt< =yystep*yybilder)
{
eval(yydiv+".yyto=setTimeout(argStr,yyto)");}
//加入时间控制
}

}
function Mousetrace(evnt)
{
if (yyns4) //针对NC浏览器,根据鼠标位置,
获得层新的X,Y坐标
{if (evnt.pageX) {ml=evnt.pageX; mt=evnt.pageY;} }
else{ //针对IE浏览器,根据鼠标位置,
获得层新的X,Y坐标
ml=(event.clientX + document.body.scrollLeft);
mt=(event.clientY + document.body.scrollTop);
}
if (tracescript)eval(tracescript)
}
//-- >
< /script >

< body bgcolor="#FFFFFF" >
< div align="center" >< center >
< table border="0" cellpadding="0"
cellspacing="0" width="100%" >
< /table >
//作一个全屏幕的表格作为触发ONMOUSEOVER的对象
< /center >< /div >
< div align="center" >< /div >

< div id="yyd0"
//画出6个3X3的不同颜色的层
,就是6个彩色小点
style="position:absolute; left:10px;
top:50px; width:3px; height:3px; z-index:1;
background-color: #33bbaa;
clip: rect(0 3 3 0)" >< /div >< div
id="yyd1"
style="position:absolute; left:20px; top:50px;
width:3px; height:3px; z-index:1; background-color:
#ff2022; clip: rect(0 3 3 0)" >< /div >< div
id="yyd2"
style="position:absolute; left:30px; top:50px;
width:3px; height:3px; z-index:1; background-color:
#cc3399; clip: rect(0 3 3 0)" >< /div >< div
id="yyd3"
style="position:absolute; left:40px; top:50px;
width:3px; height:3px; z-index:1; background-color:
#ffff00; clip: rect(0 3 3 0)" >< /div >< div
id="yyd4"
style="position:absolute; left:50px; top:50px;
width:3px; height:3px; z-index:1; background-color:
#3366cc; clip: rect(0 3 3 0)" >< /div >< div
id="yyd5"
style="position:absolute; left:60px; top:50px;
width:3px; height:3px; z-index:1; background-color:
#5add55; clip: rect(0 3 3 0)" >< /div >
< script >
var yyns4=window.Event?true:false; var mt = 0; var ml = 0;
document.onmousemove = Mousetrace;
tracescript = '';
if (yyns4){ document.captureEvents(Event.MOUSEMOVE);
//获得鼠标移动事件
Mousetrace('',',document.Mousetrace1')}
Layerfx(0,0,'ml+cos((15*sin(yycnt/24.
247212049632708))+0)*150*(sin(10+yycnt/20)+0.2)*
cos(yycnt/20)',
'mt+sin((15*sin(yycnt/36.13878534416527))+0)*
150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)',
'document.layers[\'yyd0\']',2000,true,80,0,1);
Layerfx(0,0,'ml+cos((15*sin(yycnt/
14.259312736364942))+30)*150*(sin(10+yycnt/20)+0.2)*
cos(yycnt/20)',
'mt+sin((15*sin(yycnt/33.055333176403245))+30)
*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)',
'document.layers[\'yyd1\']',2000,true,80,0,1);
Layerfx(0,0,'ml+cos((15*sin(yycnt/
21.77522790563416))+60)*150*(sin(10+yycnt/20)+0.2)*
cos(yycnt/20)',
'mt+sin((15*sin(yycnt/38.00715313644094))+60)
*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','
document.layers[\'yyd2\']',2000,true,80,0,1);
Layerfx(0,0,'ml+cos((15*sin
(yycnt/16.94483476520931))+90)*150*
(sin(10+yycnt/20)+0.2)*cos(yycnt/20)',
'mt+sin((15*sin(yycnt/28.81649093984075))+90)
*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','
document.layers[\'yyd3\']',2000,true,80,0,1);
Layerfx(0,0,'ml+cos((15*sin
(yycnt/13.322848843155297))+120)*150
*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)',
'mt+sin((15*sin(yycnt/13.743055559979211))
+120)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','
document.layers[\'yyd4\']',2000,true,80,0,1);
Layerfx(0,0,'ml+cos((15*sin
(yycnt/31.727090784502128))+150)*150*
(sin(10+yycnt/20)+0.2)*cos(yycnt/20)',
'mt+sin((15*sin(yycnt/12.66553778007537))
+150)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)'
,'document.layers[\'yyd5\']',2000,true,80,0,1);
//根据层新的坐标重新画层
< /script >
< /body >
< html >

因为这段MOUSE TRACE源代码是分享(DIV)了一个全屏幕的表格,还有跟随鼠标的各层是独立且透明,各位朋友很容易就可以在自己的已经编好的网页上加入鼠标跟随,而不影响原来网页的内容。

编程高手??

这也是高手解决的问题?

在网上冲浪时,你是否对某些网页上的可以动态跟随你的鼠标踪迹记忆尤新呢?的确,在网页上实现鼠标跟随,这种互动效果能带给来访者留下深刻的印象。而,现在不少网站通过FLASH来实现这个效果,但因为IE和NC都要安装插件才能观看,于是就有了相当的局限性。用JAVASCRIPT实现该效果,就有天然的优势了——浏览器自动识别。下文将讲述如何
用JAVASCRIPT实现鼠标跟随。

程序的主要思路是把跟随鼠标的6个小点放在6个透明的层上,然后通过一个 TIMER,定时通过document.captureEvents(Event.MOUSEMOVE)函数获得鼠标的X,Y 坐标,然后计算和重画6个层,从而实现6个彩色小点跟随着鼠标。

< html >
< head >
< title >Mouse trace< /title >
< script LANGUAGE="JavaScript" >
< !--
function Layerfx(yyleft,yytop,yyfnx,yyfny,yydiv,
yybilder,yyloop,yyto,yycnt,yystep)
{ // 设置重绘层的Layerfx函数
if ((document.layers)||(document.all)){
with (Math) {yynextx= eval(yyfnx)}
with (Math) {yynexty= eval(yyfny)}
yycnt=(yyloop && yycnt >
=yystep*yybilder)?0:yycnt+yystep;
if (document.layers){//针对NC浏览器定义层的坐标
eval(yydiv+".top="+(yynexty+yytop))
eval(yydiv+".left="+(yynextx+yyleft))
}
if (document.all){//针对IE浏览器定义层的坐标
eval("yydiv=yydiv.replace(/.layers/gi, '.all')");
eval(yydiv+".style.pixelTop="+(yynexty+yytop));
eval(yydiv+".style.pixelLeft="+(yynextx+yyleft));
}
argStr='Layerfx('+yyleft+','+yytop+',"'+yyfnx+'",
"'+yyfny+'","'+yydiv+'",'+yybilder+','+yyloop+',
'+yyto+','+yycnt+','+yystep+')';
if (yycnt< =yystep*yybilder)
{
eval(yydiv+".yyto=setTimeout(argStr,yyto)");}
//加入时间控制
}

}
function Mousetrace(evnt)
{
if (yyns4) //针对NC浏览器,根据鼠标位置,
获得层新的X,Y坐标
{if (evnt.pageX) {ml=evnt.pageX; mt=evnt.pageY;} }
else{ //针对IE浏览器,根据鼠标位置,
获得层新的X,Y坐标
ml=(event.clientX + document.body.scrollLeft);
mt=(event.clientY + document.body.scrollTop);
}
if (tracescript)eval(tracescript)
}
//-- >
< /script >

< body bgcolor="#FFFFFF" >
< div align="center" >< center >
< table border="0" cellpadding="0"
cellspacing="0" width="100%" >
< /table >
//作一个全屏幕的表格作为触发ONMOUSEOVER的对象
< /center >< /div >
< div align="center" >< /div >

< div id="yyd0"
//画出6个3X3的不同颜色的层
,就是6个彩色小点
style="position:absolute; left:10px;
top:50px; width:3px; height:3px; z-index:1;
background-color: #33bbaa;
clip: rect(0 3 3 0)" >< /div >< div
id="yyd1"
style="position:absolute; left:20px; top:50px;
width:3px; height:3px; z-index:1; background-color:
#ff2022; clip: rect(0 3 3 0)" >< /div >< div
id="yyd2"
style="position:absolute; left:30px; top:50px;
width:3px; height:3px; z-index:1; background-color:
#cc3399; clip: rect(0 3 3 0)" >< /div >< div
id="yyd3"
style="position:absolute; left:40px; top:50px;
width:3px; height:3px; z-index:1; background-color:
#ffff00; clip: rect(0 3 3 0)" >< /div >< div
id="yyd4"
style="position:absolute; left:50px; top:50px;
width:3px; height:3px; z-index:1; background-color:
#3366cc; clip: rect(0 3 3 0)" >< /div >< div
id="yyd5"
style="position:absolute; left:60px; top:50px;
width:3px; height:3px; z-index:1; background-color:
#5add55; clip: rect(0 3 3 0)" >< /div >
< script >
var yyns4=window.Event?true:false; var mt = 0; var ml = 0;
document.onmousemove = Mousetrace;
tracescript = '';
if (yyns4){ document.captureEvents(Event.MOUSEMOVE);
//获得鼠标移动事件
Mousetrace('',',document.Mousetrace1')}
Layerfx(0,0,'ml+cos((15*sin(yycnt/24.
247212049632708))+0)*150*(sin(10+yycnt/20)+0.2)*
cos(yycnt/20)',
'mt+sin((15*sin(yycnt/36.13878534416527))+0)*
150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)',
'document.layers[\'yyd0\']',2000,true,80,0,1);
Layerfx(0,0,'ml+cos((15*sin(yycnt/
14.259312736364942))+30)*150*(sin(10+yycnt/20)+0.2)*
cos(yycnt/20)',
'mt+sin((15*sin(yycnt/33.055333176403245))+30)
*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)',
'document.layers[\'yyd1\']',2000,true,80,0,1);
Layerfx(0,0,'ml+cos((15*sin(yycnt/
21.77522790563416))+60)*150*(sin(10+yycnt/20)+0.2)*
cos(yycnt/20)',
'mt+sin((15*sin(yycnt/38.00715313644094))+60)
*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','
document.layers[\'yyd2\']',2000,true,80,0,1);
Layerfx(0,0,'ml+cos((15*sin
(yycnt/16.94483476520931))+90)*150*
(sin(10+yycnt/20)+0.2)*cos(yycnt/20)',
'mt+sin((15*sin(yycnt/28.81649093984075))+90)
*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','
document.layers[\'yyd3\']',2000,true,80,0,1);
Layerfx(0,0,'ml+cos((15*sin
(yycnt/13.322848843155297))+120)*150
*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)',
'mt+sin((15*sin(yycnt/13.743055559979211))
+120)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','
document.layers[\'yyd4\']',2000,true,80,0,1);
Layerfx(0,0,'ml+cos((15*sin
(yycnt/31.727090784502128))+150)*150*
(sin(10+yycnt/20)+0.2)*cos(yycnt/20)',
'mt+sin((15*sin(yycnt/12.66553778007537))
+150)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)'
,'document.layers[\'yyd5\']',2000,true,80,0,1);
//根据层新的坐标重新画层
< /script >
< /body >
< html >

因为这段MOUSE TRACE源代码是分享(DIV)了一个全屏幕的表格,还有跟随鼠标的各层是独立且透明,各位朋友很容易就可以在自己的已经编好的网页上加入鼠标跟随,而不影响原来网页的内容。

求鼠标移动上去就显示一张跟在鼠标的图片JS代码

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>网页特效|JsCode.cn|---跟随鼠标的图片</title>

<script LANGUAGE="JavaScript">

var newtop=0

var newleft=0

if (navigator.appName == "Netscape") {

layerStyleRef="layer.";

layerRef="document.layers";

styleSwitch="";

}

else

{

layerStyleRef="layer.style.";

layerRef="document.all";

styleSwitch=".style";

}

function doMouseMove() {

layerName = 'iit'

eval('var curElement='+layerRef+'["'+layerName+'"]')

eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"')

eval('curElement'+styleSwitch+'.visibility="visible"')

eval('newleft=document.body.clientWidth-curElement'+styleSwitch+'.pixelWidth')

eval('newtop=document.body.clientHeight-curElement'+styleSwitch+'.pixelHeight')

eval('height=curElement'+styleSwitch+'.height')

eval('width=curElement'+styleSwitch+'.width')

width=parseInt(width)

height=parseInt(height)

if (event.clientX > (document.body.clientWidth - 5 - width))

{

newleft=document.body.clientWidth + document.body.scrollLeft - 5 - width

}

else

{

newleft=document.body.scrollLeft + event.clientX

}

eval('curElement'+styleSwitch+'.pixelLeft=newleft')

if (event.clientY > (document.body.clientHeight - 5 - height))

{

newtop=document.body.clientHeight + document.body.scrollTop - 5 - height

}

else

{

newtop=document.body.scrollTop + event.clientY

}

eval('curElement'+styleSwitch+'.pixelTop=newtop')

}

document.onmousemove = doMouseMove;

</script>

</head>

<body>

<!-- 以下代码是设定此页的鼠标样式代码 -->

<script language="javascript">

if (navigator.appName == "Netscape") {

}

else

{

document.write('<div ID=OuterDiv>')

document.write('<img ID=iit src="images/flag.gif" STYLE="position:absolute;TOP:5pt;LEFT:5pt;Z-INDEX:10;visibility:hidden;">')

document.write('</div>')

}

</script>

</body>

</html>

求助javascript或jQuery实现随鼠标滚动内容,相应页面内导航选中

$(window).scroll(function () {

            //随着浏览器往下滚动,根据距离顶部的距离,判断当前选中的menu

            var top1 = parseInt($("#ID1").offset().top);

            var top2 = parseInt($("#ID2").offset().top);

            var top3 = parseInt($("#ID3").offset().top);

            var top4 = parseInt($("#ID4").offset().top);

            if (height >= 300 && height < top2) {

                SetMenu(1);

            }

            else if (height >= top2 && height < top3) {

                SetMenu(2);

            }

            else if (height >= top3 && height < top4) {

                SetMenu(3);

            }

            else if (height >= top4) {

                SetMenu(4);

            }

        });

        /*

        *设置当前选中的项

        */

        var SetMenu = function (index) {

            //设置你对应导航的样式

        };

站点网还为您提供以下相关内容希望对您有帮助:

怎样制作网页中的字跟着鼠标走呀???

让字跟着鼠标走源代码:(把下面的代码插入到body区域中) &lt;!-- /*** Things you can change ***/ msg="梦幻岛";msgSize=4;1-7 FoNt='Arial';CoLoR='#CC99FF';speed=2;/*** Things you shouldn't change ...

javascript特效问题 页面上有许多点一直跟随着鼠标指针的移动。如何实...

新建html复制黏贴运行即可 鼠标跟随效果 html { overflow: hidden;} body { position: absolute;height: 100%;width: 100%;margin:0;padding:0;} screen { background:#000;position: absolute;width: 100%;height:...

制作网页时如何让鼠标后面跟着一行字,一直跟着鼠标,滚动鼠标滚轮的时候...

3层效果鼠标跟随文字:把如下代码加入区域中 &lt;SCRIPT LANGUAGE="JavaScript"&gt; &lt;!-- Begin message = 'JavaScript2000';FonT = 'Verdana';ColoR = '223399';SizE = 3; //1 to 7 only!var amount = 5, ypos =- ...

JavaScript的文字跟随鼠标

function makesnake(){ //函数文字跟随鼠标浮动的效果的方法 xPosition[0]=x+step;//在鼠标的X轴的基础之上加上20 yPosition[0]=y-15;//Y轴和鼠标相同 //依次从后向前赋值达到浮动的效果 for(var i=message.length...

用js控制div跟随鼠标移动,鼠标点击后,鼠标离开,div留在当前点击的位置怎...

你要的应该是拖拽效果,可以通过jq插件做 http://www.runoob.com/jqueryui/example-draggable.html基本原理就是鼠标按下修改div的left和top(或者right/bottom)。鼠标离开不变。&lt;!DOCTYPE html&gt;&lt;Style&gt;#test{position:absolu...

随鼠标移动的文字HTML的代码怎么写

其实它是用Javascript编一段小程序来实现的,且程序也不长,也比较好理解。下面让我们来揭下它的面纱看看。程序思路:图层可以用绝对坐标来确定其在页面中的位置,那么我们把图片、动画或文字放到图层上,再想办法动态获取鼠...

...属于那种进入网站后可以跟着鼠标或手指移动?

然后,你需要学习JavaScript来实现交互功能。JavaScript可以让你的网页具有动态效果,例如跟随鼠标或手指移动。关于宇宙星系图谱的实现,你可以使用一些开源的JavaScript库或框架来帮助你快速搭建。一些常用的库包括Three.js、D3.js...

javascript跟随鼠标轨迹求高手指点

deltaY = e.clientY - this.offsetTop; user.onmousemove = function(eve) { var e = eve || window.event; move(e); destroy(e); } destroy(

编程高手:有没有输入自己的思路转化成程序的软件?

的确,在网页上实现鼠标跟随,这种互动效果能带给来访者留下深刻的印象。而,现在不少网站通过FLASH来实现这个效果,但因为IE和NC都要安装插件才能观看,于是就有了相当的局限性。用JAVASCRIPT实现该效果,就有天然的优势了——...

用js控制div跟随鼠标移动,鼠标点击后,鼠标离开,div留在当前点击的位置怎...

var drag_ = false var D = new Function('obj', 'return document.getElementById(obj);')var oevent = new Function('e', 'if (!e) e = window.event;return e')function Move_obj(obj) { var x, y;D...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

猜你喜欢

Top