三个动画函数，透明度渐变、位置移动、尺寸变化javascript源码

作者：abeet 来源：abeet博客时间：2010-03-28 13:23:00　

先说明一下，现在网上有一些功能很强大的动画类，如MOOFX之类，我为什么要写这三个动画函数？

因为在写zDialog时需要且只需要用到透明度渐变动画，但又不愿意引入一个大大的动画类使zDialog变得臃肿，于是就写了一个透明度渐变动画的函数，前几天得空，把位置移动及尺寸变化这两种最常用的动画效果实现了

所以这三个函数适用于以下情况：

1、在做前端页面时，只需要简单的动画效果，不想引入整个动画类，使用本函数。

2、在写js类时，需要用到简单的动画，为了降低藕合性，使用本函数。

代码及运行效果，见下面的代码框

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><script>function rand(min,max){return Math.round(min+(Math.random()*(max-min)));};var fade = function(element, transparency, speed, callback){//透明度渐变：transparency:透明度 0(全透)-100(不透)；speed:速度1-100，默认为1if(typeof(element)=='string')element=document.getElementById(element);if(!element.effect){element.effect = {};element.effect.fade=0;}clearInterval(element.effect.fade);var speed=speed||1;var start=(function(elem){var alpha;if(navigator.userAgent.toLowerCase().indexOf('msie') != -1){alpha=elem.currentStyle.filter.indexOf("opacity=") >= 0?(parseFloat( elem.currentStyle.filter.match(/opacity=([^)]*)/)[1] )) + '':'100';}else{alpha=100*elem.ownerDocument.defaultView.getComputedStyle(elem,null)['opacity'];}return alpha;})(element);if(window.console&&window.console.log)console.log('start: '+start+" end: "+transparency);element.effect.fade = setInterval(function(){start = start < transparency ? Math.min(start + speed, transparency) : Math.max(start - speed, transparency);element.style.opacity = start / 100;element.style.filter = 'alpha(opacity=' + start + ')';if(Math.round(start) == transparency){element.style.opacity = transparency / 100;element.style.filter = 'alpha(opacity=' + transparency + ')';clearInterval(element.effect.fade);if(callback)callback.call(element);}}, 20);};var move = function(element, position, speed, callback){//移动到指定位置，position:移动到指定left及top 格式{left:120, top:340}或{left:120}或{top:340}；speed:速度 1-100，默认为10if(typeof(element)=='string')element=document.getElementById(element);if(!element.effect){element.effect = {};element.effect.move=0;}clearInterval(element.effect.move);var speed=speed||10;var start=(function(elem){varposi = {left:elem.offsetLeft, top:elem.offsetTop};while(elem = elem.offsetParent){posi.left += elem.offsetLeft;posi.top += elem.offsetTop;};return posi;})(element);element.style.position = 'absolute';varstyle = element.style;var styleArr=[];if(typeof(position.left)=='number')styleArr.push('left');if(typeof(position.top)=='number')styleArr.push('top');element.effect.move = setInterval(function(){for(var i=0;i<styleArr.length;i++){start[styleArr[i]] += (position[styleArr[i]] - start[styleArr[i]]) * speed/100;style[styleArr[i]] = start[styleArr[i]] + 'px';}for(var i=0;i<styleArr.length;i++){if(Math.round(start[styleArr[i]]) == position[styleArr[i]]){if(i!=styleArr.length-1)continue;}else{break;}for(var i=0;i<styleArr.length;i++)style[styleArr[i]] = position[styleArr[i]] + 'px';clearInterval(element.effect.move);if(callback)callback.call(element);}}, 20);};var resize = function(element, size, speed, callback){//长宽渐变：size:要改变到的尺寸格式 {width:400, height:250}或{width:400}或{height:250}；speed:速度 1-100，默认为10if(typeof(element)=='string')element=document.getElementById(element);if(!element.effect){element.effect = {};element.effect.resize=0;}clearInterval(element.effect.resize);var speed=speed||10;varstart = {width:element.offsetWidth, height:element.offsetHeight};var styleArr=[];if(!(navigator.userAgent.toLowerCase().indexOf('msie') != -1&&document.compatMode == 'BackCompat')){//除了ie下border-content式盒模型情况外，需要对size加以修正var CStyle=document.defaultView?document.defaultView.getComputedStyle(element,null):element.currentStyle;if(typeof(size.width)=='number'){styleArr.push('width');size.width=size.width-CStyle.paddingLeft.replace(/\D/g,'')-CStyle.paddingRight.replace(/\D/g,'');}if(typeof(size.height)=='number'){styleArr.push('height');size.height=size.height-CStyle.paddingTop.replace(/\D/g,'')-CStyle.paddingBottom.replace(/\D/g,'');}}element.style.overflow = 'hidden';varstyle = element.style;element.effect.resize = setInterval(function(){for(var i=0;i<styleArr.length;i++){start[styleArr[i]] += (size[styleArr[i]] - start[styleArr[i]]) * speed/100;style[styleArr[i]] = start[styleArr[i]] + 'px';}for(var i=0;i<styleArr.length;i++){if(Math.round(start[styleArr[i]]) == size[styleArr[i]]){if(i!=styleArr.length-1)continue;}else{break;}for(var i=0;i<styleArr.length;i++)style[styleArr[i]] = size[styleArr[i]] + 'px';clearInterval(element.effect.resize);if(callback)callback.call(element);}}, 20);};</script></head><body><div id="testDiv" style="position:absolute; right:100px; top:50px; background-color:#abc; width:100px; height:50px;padding:10px;" onclick="alert(this.style.filter)"><div style="background-color:#369; height:100％;"></div></div><br/>   动画测试  <input type="button" value="改变大小"onClick="resize('testDiv', {width:rand(60,600),height:rand(30,300)})" /><input type="button" value="改变宽度"onClick="resize('testDiv', {width:rand(60,600)})" /><input type="button" value="改变高度"onClick="resize('testDiv', {height:rand(30,300)})" />  <input type="button" value="移动位置"onClick="move('testDiv', {left:rand(40,600),top:rand(40,400)})" /><input type="button" value="水平移动"onClick="move('testDiv', {left:rand(40,600)})" /><input type="button" value="垂直移动"onClick="move('testDiv', {top:rand(40,400)})" />  <input type="button" value="透明度变化"onClick="fade('testDiv', rand(5,100))" />  <input type="button" value="还原"onClick="var ele=document.getElementById('testDiv');clearInterval(ele.effect.move);clearInterval(ele.effect.fade);clearInterval(ele.effect.resize);ele.style.cssText='position:absolute; right:100px; top:50px; background-color:#abc; width:100px; height:50px;padding:10px;'" /></body></html>

var fade = function(element, transparency, speed, callback){……}
透明度渐变：transparency:透明度 0(全透)-100(不透)；speed:速度1-100，默认为1
例<input type="button" value="透明度变化" onClick="fade('testDiv', 40)" />

var move = function(element, position, speed, callback){……}
//移动到指定位置，position:移动到指定left及top 格式{left:120, top:340}或{left:120}或{top:340}；speed:速度 1-100，默认为10
例<input type="button" value="垂直移动" onClick="move('testDiv', {top:400})" />

var resize = function(element, size, speed, callback){……}
//长宽渐变：size:要改变到的尺寸格式 {width:400, height:250}或{width:400}或{height:250}；speed:速度 1-100，默认为10
例<input type="button" value="改变高度" onClick="resize('testDiv', {height:300})" />

标签：尺寸,移动,透明,函数,javascript

投稿

三个动画函数，透明度渐变、位置移动、尺寸变化javascript源码

猜你喜欢

Python中typing模块与类型注解的使用方法

pymysql模块的使用(增删改查)详解

封装 Python 时间处理库创建自己的TimeUtil类示例

在ADF中跟踪SQL执行时间实现代码

跟老齐学Python之坑爹的字符编码

mysql查询一天，查询一周，查询一个月的数据

Python命令启动Web服务器实例详解

Vuex 使用 v-model 配合 state的方法

一步步教你编写可测试的Go语言代码

Python安装教程全过程(2022最新)

Python程序慢的重要原因

TypeScript入门-接口

python 可视化库PyG2Plot的使用

增删改查sql语法基础教程

在Win 2003中配置ASP.net环境

opencv+python实现均值滤波

vue中beforeRouteLeave实现页面回退不刷新的示例代码

5 种JavaScript编码规范

Python Web框架Tornado运行和部署

在pyqt5中展示pyecharts生成的图像问题