Jquery效果2

效果描述：

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

 

  
    

   
     
   
     <!
   
     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
   
     >