资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
javascript 缓冲效果 实现代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" _ewebeditor_ta_href="http%3A%2F%2Fwww.w3.org%2FTR%2Fxhtml1%2FDTD%2Fxhtml1-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> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0A%2F%2F%E5%A6%82%E6%9E%9C%E4%BA%8B%E4%BB%B6%E4%B8%AD%E6%9C%89opacity%E5%B1%9E%E6%80%A7%EF%BC%9A%E5%88%99%E9%A1%B5%E9%9D%A2%E6%A0%B7%E5%BC%8F%E4%B8%AD%E8%A6%81%E5%AE%9A%E4%B9%89%EF%BC%9Aopacity%3A0.1%3Bfilter%3Aalpha(opacity%3D10)%3B%20%0D%0Afunction%20spaceTo(id%2Cu%2Cmx%2Cfun)%20%0D%0A%7B%20%0D%0A%20%20%20%20var%20o%3D%24(id)%2Cn%2Cs%3D%2F*%40cc_on!%40*%2Ffalse%2Ct%3Du%2Bu*(u-1)%2F2%3B%2F%2F%E9%80%92%E5%A2%9E%E6%80%BB%E6%95%B0%3B%20%0D%0A%20%20%20%20for(n%20in%20mx)%7Bmx%5Bn%5D%3Dli(n)%3B%7D%20%0D%0A%20%20%20%20clearInterval(window%5Bid%2B%22spaceTo%22%5D)%3Bwindow%5Bid%2B%22spaceTo%22%5D%3DsetInterval(mov%2C10)%3B%20%0D%0A%20%20%20%20function%20mov()%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20for(n%20in%20mx)%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20mx%5Bn%5D%5B1%5D%3Dmx%5Bn%5D%5B1%5D%2Bmx%5Bn%5D%5B3%5D*u%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20mx%5Bn%5D%5B0%5D%5Bn%5D%3Dn%3D%3D%22opacity%22%26%26!s%3FMath.round(mx%5Bn%5D%5B1%5D)*0.01%3AMath.round(mx%5Bn%5D%5B1%5D)%2Bmx%5Bn%5D%5B4%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20if(u%3D%3D1)%7BclearInterval(window%5Bid%2B%22spaceTo%22%5D)%3B%7Delse%7Bu--%3B%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20function%20li(name)%2F%2F%E5%B1%9E%E6%80%A7%EF%BC%8C%E5%8E%9F%E5%A7%8B%E5%80%BC%EF%BC%8C%E7%9B%AE%E6%A0%87%E5%80%BC%EF%BC%8C%E9%80%92%E5%A2%9E%E6%AD%A5%E9%95%BF%EF%BC%8C%E5%8D%95%E4%BD%8D%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20switch%20(name)%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20case%20%22width%22%3A%20%20%20%20return%20%20%20%20%5Bo.style%2Co.offsetWidth%2Cmx%5B%22width%22%5D%2C(mx%5B%22width%22%5D-o.offsetWidth)%2Ft%2C%22px%22%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20case%20%22height%22%3A%20%20%20%20return%20%20%20%20%5Bo.style%2Co.offsetHeight%2Cmx%5B%22height%22%5D%2C(mx%5B%22height%22%5D-o.offsetHeight)%2Ft%2C%22px%22%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20case%20%22left%22%3A%20%20%20%20return%20%20%20%20%5Bo.style%2Co.offsetLeft%2Cmx%5B%22left%22%5D%2C(mx%5B%22left%22%5D-o.offsetLeft)%2Ft%2C%22px%22%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20case%20%22top%22%3A%20%20%20%20%20%20%20%20return%20%20%20%20%5Bo.style%2Co.offsetTop%2Cmx%5B%22top%22%5D%2C(mx%5B%22top%22%5D-o.offsetTop)%2Ft%2C%22px%22%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20case%20%22scrollTop%22%3Areturn%20%5Bo%2Co.scrollTop%2Cmx%5B%22scrollTop%22%5D%2C(mx%5B%22scrollTop%22%5D-o.scrollTop)%2Ft%2C0%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20case%20%22scrollLeft%22%3Areturn%5Bo%2Co.scrollLeft%2Cmx%5B%22scrollLeft%22%5D%2C(mx%5B%22scrollLeft%22%5D-o.scrollLeft)%2Ft%2C0%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20case%20%22opacity%22%3Areturn%20%20%20%20s%3F%5Bo.filters.alpha%2Co.filters.alpha.Opacity%2Cmx%5B%22opacity%22%5D%2C(mx%5B%22opacity%22%5D-o.filters.alpha.Opacity)%2Ft%2C0%5D%3A%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5Bo.style%2Co.style.opacity*100%2Cmx%5B%22opacity%22%5D%2C(mx%5B%22opacity%22%5D-o.style.opacity*100)%2Ft%2C0%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0Afunction%20%24(id%2Ctag)%7Bvar%20re%3D(id%26%26typeof%20id!%3D%22string%22)%3Fid%3Adocument.getElementById(id)%3Bif(!tag)%7Breturn%20re%3B%7Delse%7Breturn%20re.getElementsByTagName(tag)%3B%7D%7D%20%0D%0A%3C%2Fscript%3E"> </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需刷新才能执行
]
教程首页
更多教程