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

您可能感兴趣的文章:

详解webpack 配合babel 将es6转成es5 超简单实例
本篇文章主要介绍了详解webpack 配合babel 将es6转成es5 超简单实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
Webpack常见静态资源处理-模块加载器（Loaders）+ExtractTextPlugin插件
这篇文章主要介绍了Webpack常见静态资源处理-模块加载器（Loaders）+ExtractTextPlugin插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
JavaScript实现涂鸦笔功能
这篇文章主要为大家详细介绍了JavaScript实现涂鸦笔功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-06-06
js实现超级玛丽小游戏
这篇文章主要为大家详细介绍了js实现超级玛丽小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-03-03
详谈js中数组(array)和对象(object)的区别
下面小编就为大家带来一篇详谈js中数组(array)和对象(object)的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-02-02
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
这篇文章主要介绍了谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)以及JSON的parse()和stringfy()方法详解，感兴趣的朋友一起看看吧
2015-10-10
JavaScript 里的类数组对象
这篇文章主要介绍了JavaScript 里的类数组对象的相关资料,需要的朋友可以参考下
2015-04-04
JavaScript中防抖和节流的区别及适用场景
这篇文章主要介绍了JavaScript中防抖和节流的区别及适用场景，文章通过围绕主题的相关资料展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-05-05
微信小程序传值常用的4种方式
微信小程序开发中的大部分知识点和前端开发是一模一样的,这篇文章主要给大家介绍了关于微信小程序传值常用的4种方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-05-05
ES6中async函数与await表达式的基本用法举例
async和await是我们进行Promise时的一个语法糖,async/await为了让我们书写代码时更加流畅,增强了代码的可读性,下面这篇文章主要给大家介绍了关于ES6中async函数与await表达式的基本用法,需要的朋友可以参考下
2022-07-07