爱奇思

学习就是——从糊涂中慢慢走向清醒，然后再从清醒中慢慢走向糊涂，所以说我说它是一个O,只是圆的半径慢慢的扩大罢了！
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

Jquery效果2

Posted on 2010-05-27 16:43  牛牛博客  阅读(520)  评论(0)  编辑  收藏  举报

效果描述：

当你的鼠标在方块上移动时，会看到效果。

 

<!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>
    <title>无标题页</title>
    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <style type="text/css">
        *{margin:0;padding:0;}
        .dock { text-align:center;}
        .dock div{width:8px;height:8px;border:1px #dfdfdf solid; background:#dfdfdf;margin:2px auto; line-height:0px;overflow: hidden;}
    </style>
</head>
<body>
<div class="dock"></div>
    <script language="javascript" type="text/javascript">
        //配置
        var m=5;//最大倍数
        var s=400;//距中心最大距离
        var count=20;//个数
        
        //Dock类
        function Dock(){
          this.dockItems=[];
          this.addItem=function(item){
             this.dockItems.push($(item));
             $(item).appendTo(".dock");
          };
        }
        
        //生成Dock对象实例
        var d=new Dock();
        
        //循环插入count个dockItem dom对象
        for(var i=0;i<count;i++){
            d.addItem('<div class="'+i+'"></div>');
        }
        
        //绑定dockItem函数
        $(".dock div").bind("mouseover",function(event){
           var w=$(this).width();
           var h=$(this).height();
           var offset=$(this).offset();
           onmouseItemout(offset.top);
        });
        
        //处理子对象样式
        function onmouseItemout(top){
           for(var i=0;i<d.dockItems.length;i++){
              var c=d.dockItems[i].attr("class");
              var of=$("."+c).offset();
              d1=Math.abs(of.top-top);
              var z=zoomD(m,s,d1);
              
              $("."+c).css({width:8*z+"px",height:8*z+"px"});
           }
        }
        //计算放大倍数
        function zoomD(m,s,d){
           var z=m*(s-d)*(s-d)/(s*s+1);
           return (z<1)?1:z;
        }
    </script>
</body>
</html>