js-添加一双眼睛

本文介绍了一种利用JavaScript实现的特殊视觉效果——一双能够跟随鼠标移动的眼睛。通过使用简单的HTML和JavaScript代码,该效果可以轻松地添加到任何网页中。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 把
<script type="text/javascript" src="http://wujunlove.googlepages.com/bigstaticeyes.js"></script>

加入你想要放的位置。 就可以了。。




下面是源代码

//
Static Eyes - http://www.btinternet.com/~kurt.grigg/javascript 
if  ((document.getElementById) && 
window.addEventListener 
|| window.attachEvent){

(
function(){
var e_img = new Image();
e_img.src 
= "http://wujunlove.googlepages.com/bigeye.gif"
var p_img = new Image();
p_img.src 
= "http://wujunlove.googlepages.com/bigpupil1.gif";

var d = document;
var pix = "px";

var idx = document.images.length;
if (document.getElementById("cont"+idx)) idx++;

var eyeballs = "";
var pupil1 = "";
var pupil2 = "";

d.write('
<div id="cont'+idx+'" class="eyestyle" style="height:102px;width:205px">'
+'<div id="eyblls'+idx+'" style="position:relative;width:205px;height:102px"><img src="'+e_img.src+'" alt=""/>'
+'<img id="ppl1'+idx+'" src="'+p_img.src+'" alt="" style="position:absolute;top:37px;left:37px;width:27px;height:27px"/>'
+'<img id="ppl2'+idx+'" src="'+p_img.src+'" alt="" style="position:absolute;top:37px;left:140px;width:27px;height:27px"/>'
+'<//div><//div>');

function watchTheMouse(y,x){
var osy = eyeballs.offsetTop;
var osx = eyeballs.offsetLeft;
var c1y = osy + 51;
var c1x = osx + 51;
var c2y = osy + 51;
var c2x = osx + 154;
var dy1 = y - c1y;
var dx1 = x - c1x;
var d1 = Math.sqrt(dy1*dy1 + dx1*dx1);
var dy2 = y - c2y;
var dx2 = x - c2x;
var d2 = Math.sqrt(dy2*dy2 + dx2*dx2);
var ay1 = y - c1y;
var ax1 = x - c1x;
var angle1 = Math.atan2(ay1,ax1)*180/Math.PI;
var ay2 = y - c2y;
var ax2 = x - c2x;
var angle2 = Math.atan2(ay2,ax2)*180/Math.PI;
var dv = 1.36;
var onEyeBall1 = (d1 < 51)?d1/dv:37;
var onEyeBall2 = (d2 < 51)?d2/dv:37;
pupil1.top 
= c1y-13+onEyeBall1 * Math.sin(angle1*Math.PI/180)-osy+pix;
pupil1.left 
= c1x-13+onEyeBall1 * Math.cos(angle1*Math.PI/180)-osx+pix;
pupil2.top 
= c2y-13+onEyeBall2 * Math.sin(angle2*Math.PI/180)-osy+pix;
pupil2.left 
= c2x-13+onEyeBall2  *Math.cos(angle2*Math.PI/180)-osx+pix;
}

function mouse(e){
var y,x;
if (!e) e = window.event;    
 
if (typeof e.pageY == 'number'){
  y 
= e.pageY;
  x 
= e.pageX;
 }
 
else{
 
var ref = document.documentElement||document.body;
 y 
= e.clientY + ref.scrollTop;
 x 
= e.clientX + ref.scrollLeft;
}
watchTheMouse(y,x);
}

function init(){
eyeballs 
= d.getElementById("eyblls"+idx);
pupil1 
= d.getElementById("ppl1"+idx).style;
pupil2 
= d.getElementById("ppl2"+idx).style;
}

if (window.addEventListener){
 window.addEventListener(
"load",init,false);
 document.addEventListener(
"mousemove",mouse,false);
}  
else if (window.attachEvent){
 window.attachEvent(
"onload",init);
 document.attachEvent(
"onmousemove",mouse);


})();
}
//End.
 转自吴某人专栏:http://blog.youkuaiyun.com/wujunj/archive/2006/09/11/1206602.aspx
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值