当前位置：Gxlcms > JavaScript > javascript 缓冲效果实现代码

javascript 缓冲效果实现代码

时间：2021-07-01 10:21:17 帮助过：1人阅读

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style> 
#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;} 
</style> 
<script> 
//如果事件中有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);}} 
</script> 
</head>

<body> 
左放大 
左缩小

高放大 
高缩小

左移动 
右移动

透明加 
透明减

联动1 
联动2

</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

javascript 缓冲效果 实现代码

人气教程排行

javascript 缓冲效果实现代码