javascript 缓冲效果实现代码

更新时间：2009年06月19日 22:06:57 作者：

非常漂亮的缓冲效果代码，大家可以看看下。

<!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需再刷新一下页面才能执行]

您可能感兴趣的文章:

微信小程序前端自定义分享的实现方法
这篇文章主要给大家介绍了关于微信小程序前端自定义分享的实现方法，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-06-06
JavaScript 对象新增方法defineProperty与keys的使用说明
这篇文章主要介绍了JavaScript对象新增方法defineProperty与keys的使用说明,文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下
2022-09-09
JavaScript 封装一个tab效果源码分享
本文给大家分享javascript封装一个tab效果源码分享，感兴趣的朋友一起来看看吧
2015-09-09
JavaScript实现下载base64数据并兼容低版本
这篇文章主要为大家详细介绍了如何使用JavaScript实现下载base64数据并兼容低版本,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2024-12-12
uni-app如何页面传参数的几种方法总结
这篇文章主要介绍了uni-app如何页面传参数的几种方法总结,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
微信小程序绘制图片发送朋友圈
这篇文章主要为大家详细介绍了微信小程序绘制图片发送朋友圈，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-07-07
简单的JavaScript互斥锁分享
这篇文章主要介绍了简单的JavaScript互斥锁的相关资料,需要的朋友可以参考下
2014-02-02
微信小程序五子棋游戏AI实现方法【附demo源码下载】
这篇文章主要介绍了微信小程序五子棋游戏AI实现方法,结合实例形式分析了五子棋游戏中人机对战的AI原理及相关实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
2019-02-02
微信小程序使用map组件实现路线规划功能示例
这篇文章主要介绍了微信小程序使用map组件实现路线规划功能,结合具体实例形式分析了微信小程序基于map组件的地理位置获取、路径规划等相关操作技巧,需要的朋友可以参考下
2019-01-01
Javascript和jquery在selenium的使用过程
这篇文章主要介绍了Javascript和jquery在selenium的使用过程,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-10-10