脚本语言

javascript+Css-神秘的眼睛

编辑:dnawo 日期:2008-03-17

字体大小: 小中大

265.com logo用了这个效果，创意不错。

demo1：

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>神秘的眼睛</title>
<style type="text/css">
.eye{
	display:inline;
	overflow:hidden;
	position:relative;
	float:left;
	margin:50px 0 0 50px;
	width:50px;
	height:50px;
	font-size:50px;
	line-height:106%;
	+line-height:normal;
	cursor:default;
}
@media all and (min-width:0px){
.eye{line-height:normal;}
}
.pupil{
	overflow:hidden;
	position:absolute;
	margin:-5px 0 0 -5px;
	width:10px;
	height:10px;
	line-height:normal;
	font-size:10px;
	top:50%;
	left:50%;
}
</style>
</head>
<body>
<div id="leftEye" class="eye">○<span id="leftPupil" class="pupil">●</span></div>
<div id="rightEye" class="eye">○<span id="rightPupil" class="pupil">●</span></div>
<input name="" id="xy" type="text" />
<script type="text/javascript">
var $=function(o){return document.getElementById(o)}
var leftEye=$("leftEye");
var rightEye=$("rightEye");
var leftPupil=$("leftPupil");
var rightPupil=$("rightPupil");
var xy=$("xy");
document.documentElement.onmousemove=function(e){
	var e=window.event||e;
	var eX=e.clientX, eY=e.clientY;
	track(leftEye,leftPupil,eX,eY);
	track(rightEye,rightPupil,eX,eY);
}
function track(o,i,eX,eY){
	var oL=o.offsetLeft;
	var oT=o.offsetTop;
	var oW=o.offsetWidth;
	var oH=o.offsetHeight;
	var oCW=o.clientWidth;
	var oCH=o.clientHeight;
	var oX=oL+oW/2;
	var oY=oT+oH/2;
	var eX=eX-oX;
	var eY=eY-oY;
	var eXY,iL,iT;
	if(eX!=0&&eY!=0){
		eXY=eX/eY;
		var r=oCW/2-12;
		var R=Math.sqrt(eX*eX+eY*eY);
		var rR=R/5>r?r:R/5;
		var iL=Math.sqrt(rR*rR/(1+1/(eXY*eXY)));
		if(eX<0)iL=-iL;
		var iT=iL/eXY;
		i.style.left=(iL+oCW/2)+"px";
		i.style.top=(iT+oCH/2)+"px";
	}
	xy.value=eX+","+eY;
}
</script>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

demo2：

HTML代码

<html>
<head>
<title>Static Eyes</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
</head>
<body>
<p></p>
<script type="text/javascript" >
//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 = "pic/200803/eye.gif"; 
var p_img = new Image();
p_img.src = "pic/200803/pupils.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:34px;width:69px">'
+'<div id="eyblls'+idx+'" style="position:relative;width:69px;height:34px"><img src="'+e_img.src+'" alt=""/>'
+'<img id="ppl1'+idx+'" src="'+p_img.src+'" alt="" style="position:absolute;top:10px;left:11px;width:13px;height:13px"/>'
+'<img id="ppl2'+idx+'" src="'+p_img.src+'" alt="" style="position:absolute;top:10px;left:46px;width:13px;height:13px"/>'
+'<\/div><\/div>');
function watchTheMouse(y,x){
var osy = eyeballs.offsetTop;
var osx = eyeballs.offsetLeft;
var c1y = osy + 17;
var c1x = osx + 17;
var c2y = osy + 17;
var c2x = osx + 52;
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.7;
var onEyeBall1 = (d1 < 17)?d1/dv:10;
var onEyeBall2 = (d2 < 17)?d2/dv:10;
pupil1.top = c1y-6+onEyeBall1 * Math.sin(angle1*Math.PI/180)-osy+pix;
pupil1.left = c1x-6+onEyeBall1 * Math.cos(angle1*Math.PI/180)-osx+pix;
pupil2.top = c2y-6+onEyeBall2 * Math.sin(angle2*Math.PI/180)-osy+pix;
pupil2.left = c2x-6+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.
</script>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

上一篇: 手机发送代码投放参考之PHP168整站系统

下一篇: SQLite常见问题解答

文章来自: 网络

引用通告: 查看所有引用 | 我要引用此文章

Tags:

最新日志:

评论: 0 | 引用: 0 | 查看次数: 4927

发表评论

请登录后再发表评论！

Powered By PJBlog3 V3.2.9.518 CopyRight 2005 - 2021, 木子屋 xhtml | css
Processed in 0.632813 second(s) , 6 queries , Simple Yellow Design By ChangHua(FatMouse) 闽ICP备19016051号-1

01.w3school	02.51Windows
03.ES6入门教程	04.PHP中文手册
05.MSDN\|.NET	06.Visual Studio\|O
07.ASP.NET MVC2	08.ASP.NET MVC3
09.jQuery\|D\|P	10.Vue.js
11.AspNetPager	12.SharpZipLib
13.AjaxPro	14.Json.NET
15.Web Services	16.BaiDu API
17.数据堂	18.纯真IP库
19.SharpDevelop	20.动软
21..NET Reflector	22.百度\|高德[坐标]
23.Layui\|G\|X\|Q	24.Ele\|uni-app
25.SourceForge	26.CodeProject
27.Dynamic Drive	28.CodePlex
29.GitHub	30.Gitee
31.IItellYou	32.面包多
33.一门APP	34.友盟数据
35.JSON格式化	36.在线文本比较
37.微软开发者中心	38.Android开发者中心

javascript+Css-神秘的眼睛

编辑:dnawo 日期:2008-03-17

Category

IM Online

User Panel

Search

Recent Comments

最新评论

Resources