爱奇思

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

Jquery效果2

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

效果描述:

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

 

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