javascript 缓冲效果实现代码

时间：2021-02-17 14:03:16|栏目：JavaScript代码|点击：次

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"> <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> <span onclick="spaceTo('divid',20,{'width':500})">左放大</span> <span onclick="spaceTo('divid',20,{'width':10})">左缩小</span> <span onclick="spaceTo('divid',20,{'height':500})">高放大</span> <span onclick="spaceTo('divid',20,{'height':10})">高缩小</span> <span onclick="spaceTo('divid',20,{'left':200})">左移动</span> <span onclick="spaceTo('divid',20,{'left':700})">右移动</span> <span onclick="spaceTo('divid',20,{'opacity':100})">透明加</span> <span onclick="spaceTo('divid',20,{'opacity':20})">透明减</span> <span onclick="spaceTo('divid',20,{'width':1000,'height':200,'left':300,'top':300,'opacity':100})">联动1</span> <span onclick="spaceTo('divid',20,{'width':11,'height':10,'left':100,'top':100,'opacity':10})">联动2</span> <span id="abc"></span> <div id="divid"></div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

上一篇：在element-ui的el-tree组件中用render函数生成el-button的实例代码

栏目：JavaScript代码

下一篇：JS实现div内部的文字或图片自动循环滚动代码

本文标题：javascript 缓冲效果实现代码

本文地址：http://www.codeinn.net/misctech/64609.html

更多JavaScript代码

JavaScript代码

javascript 缓冲效果实现代码

阅读排行

推荐教程

JavaScript代码

javascript 缓冲效果 实现代码

阅读排行

推荐教程

javascript 缓冲效果实现代码