软件开发培训班 >> 编程开发 >> JavaScript

javascript简易动画类(div渐变)

　　本文标签：动画类

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title> new document </title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
</head> 
<body> 
<center> 
<input type="button" name="fx" value="宽度渐变" id="wt-cg"/> 
<input type="button" name="fx" value="高度渐变" id="hi-cg"/> 
<input type="button" name="fx" value="透明度渐变" id="op-cg"/> 
<input type="button" name="fx" value="边框渐变" id="bd-cg"/> 
<input type="button" name="fx" value="综合渐变" id="zh-cg"/> 
<div id="demo" style="width:370px;height:100px;background-color:#00CC33;border:2px solid #990033; font-size:12px;"></div> 
</center> 
<script> 
function Animate(el, prop, opts) { 
this.el = el; 
this.prop = prop; 
this.from = opts.from; 
this.to = opts.to; 
this.time = opts.time; 
this.callback = opts.callback; 
this.animDiff = this.to - this.from; 
}

Animate.prototype._setStyle = function(val) { 
switch(this.prop) { 
case opacity: 
this.el.style[this.prop] = val; 
this.el.style.filter = alpha(opacity= + val * 100 + ); 
break; 
default: 
this.el.style[this.prop] = val + px; 
break; 
} 
}

Animate.prototype._animate = function() { 
var that = this; 
this.now = new Date(); 
this.diff = this.now - this.startTime;

if (this.diff > this.time) { 
this._setStyle(this.to);

if (this.callback) { 
this.callback.call(this); 
} 
clearInterval(this.timer); 
return; 
}

this.percentage = (Math.floor((this.diff / this.time) * 100) / 100); 
this.val = (this.animDiff * this.percentage) + this.from; 
this._setStyle(this.val); 
}

Animate.prototype.start = function() { 
var that = this; 
this.startTime = new Date(); 
clearInterval(this.timer); 
this.timer = setInterval(function() { 
that._animate.call(that); 
}, 4); 
}

Animate.canTransition = function() { 
var el = document.createElement(foo); 
el.style.cssText = -webkit-transition: all .5s linear;; 
return !!el.style.webkitTransitionProperty; 
}();

// 边框渐变 
function changeBorderWidth() { 
var fx = borderWidth, from = 2, to = 10, time = 1000; 
var callback = function() { 
from = 10; to = 2; 
new Animate(demo, fx, { from: from, to: to, time: time, callback: resetButton }).start(); 
} 
new Animate(demo, fx, { 
from: from, 
to: to, 
time: time, 
callback: callback 
}).start(); 
}

T$(wt-cg).onclick = function() { 
disableButton(); changeWidth(); 
} 
T$(hi-cg).onclick = function() { 
disableButton(); changeHeight(); 
} 
T$(op-cg).onclick = function() { 
disableButton(); changeOpacity(); 
} 
T$(bd-cg).onclick = function() { 
disableButton(); changeBorderWidth(); 
} 
T$(zh-cg).onclick = function() { 
disableButton(); changeWidth(); changeHeight(); changeOpacity(); 
} 
//if (Animate.canTransition) { 
//demo.style.webkitTransition = opacity 3s ease-in; 
//demo.style.opacity = 0; 
//} else {

//} 
} 
</script> 
</body> 
</html>

技术文章快速查找

Jquery 例外被抛出且未被接住原因介绍

jquery 最简单易用的表单验证插件

兼容所有浏览器的js复制插件Zero使用介绍

jquery中this的使用说明

学习从实践开始之jQuery插件开发菜单插件开发

JavaScript Accessor实现说明

jquery用get实现ajax在ie里面刷新不进入后台解决方法

JS动态创建Table,Tr,Td并赋值的具体实现

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建