<!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=utf-8" />
<title>jQuery插件</title>
<script type="text/javascript" src="images/jquery-2.0.3.js"></script>
<script>
(function($){
$.fn.moveHc=function(json)
{
var i=0;
for(i=0;i<this.length;i++)//重要
{
startMove(this[i], json);
}
function getStyle(obj, attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj, false)[attr];
}
}
function startMove(obj, json, fn)
{
clearInterval(obj.timer);
obj.timer=setInterval(function (){
var bStop=true; //这一次运动就结束了——所有的值都到达了
for(var attr in json)
{
//1.取当前的值
var iCur=0;
if(attr=='opacity')
{
iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
}
else
{
iCur=parseInt(getStyle(obj, attr));
}
//2.算速度
var iSpeed=(json[attr]-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
//3.检测停止
if(iCur!=json[attr])
{
bStop=false;
}
if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
obj.style.opacity=(iCur+iSpeed)/100;
}
else
{
obj.style[attr]=iCur+iSpeed+'px';
}
}
if(bStop)
{
clearInterval(obj.timer);
if(fn)
{
fn();
}
}
}, 30)
}
}})(jQuery)
$(function(){
var oDiv=$('div');
oDiv.click(function(){
oDiv.eq($(this).index()).moveHc({200,height:200,opacity:100})
/*oDiv.eq($(this).index()).moveHc({100,height:100,opacity:100}).siblings().moveHc({50,height:55,opacity:50}) */ //siblings()在插件里不能用。用就出问题
/* oDiv.eq($(this).index()).animate({100,height:100,opacity:1}).siblings().animate({50,height:55,opacity:0.5})
*/
})
})
</script>
<style>
#zgz{ 50px; opacity:0.5; height:55px; background:#f00; margin:10px; float:left;}
</style>
</head>
<body>
<div id="zgz"></div>
<div id="zgz"></div>
<div id="zgz"></div>
<div id="zgz"></div>
</body>
</html>