js实现跟随鼠标旋转的眼睛

作者:sky 点击:118 评论:0 发布时间:周五, 11/14/2008 - 19:24 所属分类:鼠标特效

网页中常用的眼睛旋转特效，跟随鼠标自动旋转，兼容当前主流浏览器。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,www.zzjs.net,站长特效网" /> <meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。以质量为核心，以实用为目的,打造一流网页特效站" /> <title>js实现跟随鼠标旋转的眼睛站长特效网</title> <style type="text/css"> body{ background-color:#fff; } #left_zzjs_net,#right_zzjs_net{ position: absolute; top:100px; } #leb_zzjs_net,#reb_zzjs_net{ position:absolute; top:160px; } #left_zzjs_net{ left:100px; } #right_zzjs_net{ left:215px; } #leb_zzjs_net{ left:157.5px; } #reb_zzjs_net{ left:272.5px; } </style> <script language="Javascript" type="text/javascript"> document.onmousemove= moveHandler; function moveHandler(evt){ if(!evt){ evt=window.event; } animateEyes(evt.clientX,evt.clientY); }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记.，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。q function animateEyes(xPos,yPos){ var leftEye=document.getElementById("left_zzjs_net"); var rightEye=document.getElementById("right_zzjs_net"); var rightEyeball=document.getElementById("reb_zzjs_net").style; var leftEyeball=document.getElementById("leb_zzjs_net").style; //两眼圈中心的坐标 var circle1x=leftEye.offsetLeft+50; var circle1y=leftEye.offsetTop+54; var circle2x=leftEye.offsetLeft+165.5; var circle2y=leftEye.offsetTop+54; //定义圆圈的半径 var radius=40; //鼠标当前位置到两圆圈中心的距离 var r1=calculateDistance(circle1x,circle1y,xPos,yPos); var r2=calculateDistance(circle2x,circle2y,xPos,yPos); //鼠标在两眼圈之外且眼球在上半面 if(r1>radius && r2>radius && yPos<=circle1y){ leftEyeball.left=radius/r1*(xPos-circle1x)+circle1x+"px"; leftEyeball.top=circle1y-radius/r1*(circle1y-yPos)+"px"; rightEyeball.left=radius/r2*(xPos-circle2x)+circle2x+"px"; rightEyeball.top=circle2y-radius/r2*(circle1y-yPos)+"px"; } //鼠标在两眼圈之外且眼球在下半面 else if(r1>radius && r2>radius && yPos>circle1y){ leftEyeball.left=radius/r1*(xPos-circle1x)+circle1x+"px"; leftEyeball.top=circle1y+radius/r1*(yPos-circle1y)+"px"; rightEyeball.left=radius/r2*(xPos-circle2x)+circle2x+"px"; rightEyeball.top=circle2y+radius/r2*(yPos-circle1y)+"px"; } //鼠标落在左眼圈上半部里 else if(r1<=radius && r2>radius && yPos<=circle1y){ //右眼球照旧 rightEyeball.left=radius/r2*(xPos-circle2x)+circle2x+"px"; rightEyeball.top=circle2y+radius/r2*(yPos-circle1y)+"px"; //左眼球即鼠标的坐标 leftEyeball.left=xPos-7.5+"px"; leftEyeball.top=yPos-7.5+"px"; } //鼠标落在左眼圈下半部里 else if(r1<=radius && r2>radius && yPos>circle1y){ //右眼球照旧 rightEyeball.left=radius/r2*(xPos-circle2x)+circle2x+"px"; rightEyeball.top=circle2y+radius/r2*(yPos-circle1y)+"px"; //左眼球即鼠标的坐标 leftEyeball.left=xPos-7.5+"px"; leftEyeball.top=yPos-7.5+"px"; } //鼠标落在右眼圈上半部里 else if(r1>radius && r2<=radius && yPos<=circle1y){ //左眼球照旧 leftEyeball.left=radius/r1*(xPos-circle1x)+circle1x+"px"; leftEyeball.top=circle1y-radius/r1*(circle1y-yPos)+"px"; //右眼球即鼠标的坐标 rightEyeball.left=xPos-7.5+"px"; rightEyeball.top=yPos-7.5+"px"; } //鼠标落在右眼圈下半部里 else if(r1>radius && r2<=radius && yPos>circle1y){ //左眼球照旧 leftEyeball.left=radius/r1*(xPos-circle1x)+circle1x+"px"; leftEyeball.top=circle1y+radius/r1*(yPos-circle1y)+"px"; //右眼球即鼠标的坐标 rightEyeball.left=xPos-7.5+"px"; rightEyeball.top=yPos-7.5+"px"; } }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。 function calculateDistance(x1,y1,x2,y2){ return (Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2))); }//欢x迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。 </script> </head> <body bgcolor="#FFFFFF"> <a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>  <script type="text/javascript" src="http://www.zzjs.net/ad/tc.js"></script> <img src="/img/zzjs_net_left.jpg" width="115" height="120" id="left_zzjs_net" /> <img src="/img/zzjs_netright.jpg" width="115" height="120" id="right_zzjs_net"/> <img src="/img/zzjsneteyeball.png" width="15" height="15" id="leb_zzjs_net"/> <img src="/img/zzjsneteyeball.png" width="15" height="15" id="reb_zzjs_net"/> </body> </html>

提示：你可以先修改部分代码再运行。

顶一下

(0)

100%

踩一下

(0)

100%

标签: