注册 | 登陆
您的位置:阿里西西 > 网页特效 > 实例特效 > 详细内容

跟随鼠标转动的眼球效果特效

  稿源:本站整理   2022-06-17   点击:   撤稿纠错
眼珠会跟随鼠标的光标在眼眶范围内滚动,感觉就像眼珠一直盯着鼠标的操作...

以下讨论的是和眼球 相关的跟随鼠标转动的眼球效果特效教程文章,内容是本站精心挑选整理的教程,希望对广大的网友给到帮助,下面是详细内容:

  程序代码(For Alixixi.com)如下:
<!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">
*{margin:0;padding:0;}
.mbox{background:transparent url(http://www.itref.cn/uploads/allimg/100622/1_100622134201_1.gif) no-repeat scroll left top;width:150px;height:50px;position:relative;border:1px solid #FF0000;margin:0 auto;}
.mbox span{background-color:#000;font-size:0;display:block;width:3px;height:3px;overflow:hidden;position:absolute;}
</style>
</head>
<body>
<div style="height:100px;"></div>
<div id="mbox" class="mbox">
    <span style="left:105.5px;top:23.5px;"></span>
    <span style="left:125.5px;top:23.5px;"></span>
</div>
<div style="height:500px;"></div>
<script type="text/javascript">
function getPos(obj){
    var p={};
 p.x=obj.offsetLeft;
 p.y=obj.offsetTop;
 while(obj=obj.offsetParent){
     p.x+=obj.offsetLeft;
  p.y+=obj.offsetTop;
 }
 return p;
}
function each(objs,f){
    for(var i=0;i<objs.length;i++)f(i); 
}
function act(){
    var eyes=document.getElementById('mbox').getElementsByTagName('span');
 var cr=10;
 var pr=1.5;
 var of=150;
 var cssp=[];
    cssp[0]={x:105.5,y:23.5};
 cssp[1]={x:125.5,y:23.5};
 var np=[]; 
    each(eyes,function(i){
     var p=getPos(eyes[i]);
  p.x+=pr;
  p.y+=pr;
     np[i]=p;  
 });
 document.getElementsByTagName('body')[0].onmousemove=function(e){
  var e=e||window.event;
  var mp={x:e.clientX,y:e.clientY};
        each(eyes,function(i){
      var p=track(mp,np[i]);   
   p.x+=cssp[i].x-pr;
            p.y+=cssp[i].y-pr;
   eyes[i].style.left=p.x+"px";
   eyes[i].style.top=p.y+"px";   
  });
 }
 function track(m,n){
        var p={x:0,y:0}
  lf=m.x-n.x;
  t=m.y-n.y;
  var tmp=cr;
        tmp*=longRate(lf,t);
  p.x=lf/Math.abs(lf)*Math.sqrt(tmp*tmp/(1+t*t/(lf*lf)));
  p.y=t/Math.abs(t)*Math.sqrt(tmp*tmp/(1+lf*lf/(t*t)));  
  return p;
 }
 function longRate(lf,t){
     var tmp=Math.sqrt(lf*lf+t*t);
  var rate=1;
  if(tmp>=of){
      rate=1;
  }else if(tmp<=pr){
      rate=0;
  }else{
      rate=tmp*pr/of;
   rate=rate>1?1:rate;
  }
  return rate;
 }
}
act();
</script>
</body>
</html>


gongle的小工具——眼睛,以及265导航页logo中的眼睛,都是通过javascript来实现的。当鼠标在页面中滑动时,眼珠会跟随鼠标的光标在眼眶范围内滚动,感觉就像眼珠一直盯着鼠标的操作。

其中很关键的部分是算法,这个需要我们具备一些数学上的几何知识。

• 直角三角形三边符合:直角边1的平方+直角边2的平方=斜边的平方,如果对直角边、斜边不明白,也可以这样理解,短边1的平方+短边2的平方=长边的平方
• 相似的两个三角形临近两边之比相等
本页网址:http://www.alixixi.com/js/a/2010062560019.shtml,如果对您有帮助欢迎收藏或转载网址,欢迎再次访问http://www.alixixi.com
更多关于 眼球 的文章
相关阅读
  • 实例特效2022-06-17 跟随鼠标转动的眼球效果特效

相关排行总榜

图像特效

菜单特效

日期特效

鼠标经过图片上时,图片突出显示特效
HTML5打造的酷炫3D 360度图片立体浏览特效
鼠标经过图片显示价格或浮动层的js特效代码
带缓冲效果的向上翻转轮播的图片广告特效代
图片延时加载原生JS特效广告代码
鼠标移动到图片上方渐变式切换图片的JS特效
原生JS写的一个书架式的图片缩放滚动展示特
纯CSS实现的鼠标悬停时放大且加大图片、图层
鼠标悬停在图片上浮出并显示文字提示的JS特
图像不随滚动条移动,始终固定在网页垂直居
fixed仿淘宝商品列表顶部浮动工具栏效果特效
很简洁的js树状竖型风格导航菜单代码
页面div导航菜单栏部分始终浮动居于最底部的
一个类似京东网页左侧菜单扩展的特效代码
一段简洁大方的Tab菜单选项卡的JS特效代码
鼠标滑动经过标题时显示详细介绍内容信息的
简单实用的纯CSS实现的横向多级导航特效代码
网页超过一屏时自动浮动在网页最上方的导航
始终飘浮动于网页右侧可缓冲效果弹出和收缩
一款通过jQuery实现的表格列表展开及收缩折
一款原生JS编写的文本框输入日历日期选择器
JS制作的一分钟时间按秒进行倒计时的特效代
一段测试浏览器时钟精度的网页特效代码
用js实现给网页上每日自动更新换一张图片展
js代码下按指定格式显示日期时间样式特效
原生JS代码制作带记事备忘功能的双月份显示
用js检测判断时间日期的间距大于多少天
利用js制作一个最简单的带秒表走动的日期时
一款网友自编简单的日历js代码特效
通过JQUERY制作类似酒店入住时间的日期选择