javascript 缓冲效果 实现代码
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
#divid{width:30px; height:30px;left:200px;top:0px;background:#666;position:absolute;opacity:0.1;filter:alpha(opacity=10);}
span{display:block;padding:5px; cursor:pointer;font-size:12px;}
//如果事件中有opacity属性:则页面样式中要定义:opacity:0.1;filter:alpha(opacity=10);
function spaceTo(id,u,mx,fun)
{
var o=$(id),n,s=/*@cc_on!@*/false,t=u+u*(u-1)/2;//递增总数;
for(n in mx){mx[n]=li(n);}
clearInterval(window[id+"spaceTo"]);window[id+"spaceTo"]=setInterval(mov,10);
function mov()
{
for(n in mx)
{
mx[n][1]=mx[n][1]+mx[n][3]*u;
mx[n][0][n]=n=="opacity"&&!s?Math.round(mx[n][1])*0.01:Math.round(mx[n][1])+mx[n][4];
}
if(u==1){clearInterval(window[id+"spaceTo"]);}else{u--;}
}
function li(name)//属性,原始值,目标值,递增步长,单位
{
switch (name)
{
case "width": return [o.style,o.offsetWidth,mx["width"],(mx["width"]-o.offsetWidth)/t,"px"];
case "height": return [o.style,o.offsetHeight,mx["height"],(mx["height"]-o.offsetHeight)/t,"px"];
case "left": return [o.style,o.offsetLeft,mx["left"],(mx["left"]-o.offsetLeft)/t,"px"];
case "top": return [o.style,o.offsetTop,mx["top"],(mx["top"]-o.offsetTop)/t,"px"];
case "scrollTop":return [o,o.scrollTop,mx["scrollTop"],(mx["scrollTop"]-o.scrollTop)/t,0];
case "scrollLeft":return[o,o.scrollLeft,mx["scrollLeft"],(mx["scrollLeft"]-o.scrollLeft)/t,0];
case "opacity":return s?[o.filters.alpha,o.filters.alpha.Opacity,mx["opacity"],(mx["opacity"]-o.filters.alpha.Opacity)/t,0]:
[o.style,o.style.opacity*100,mx["opacity"],(mx["opacity"]-o.style.opacity*100)/t,0];
}
}
}
function $(id,tag){var re=(id&&typeof id!="string")?id:document.getElementById(id);if(!tag){return re;}else{return re.getElementsByTagName(tag);}}
左放大
左缩小
高放大
高缩小
左移动
右移动
透明加
透明减
联动1
联动2
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]