新浪网首页的动画广告

steryzone 2011-06-30 02:23:40

像新浪网首页的那些大动画广告是怎样做的，播放完就将整个网站向上挪。。。

...全文

84 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

皮皮 2011-06-30

打赏
举报

<!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;
}();

window.onload = function() {
var T$ = function(id) { return document.getElementById(id); }
var T$$ = function(n) { return document.getElementsByName(n); }
var demo = T$('demo'); var btns = T$$('fx');
function disableButton() {
for (var i = 0, len = btns.length; i < len; ++i) {
btns[i].disabled = 'disabled';
}
}
function resetButton() {
for (var i = 0, len = btns.length; i < len; ++i) {
btns[i].disabled = '';
}
}
// 宽度渐变
function changeWidth() {
var fx = 'width', from = demo.clientWidth, to = from - 270, time = 1000;
var callback = function() {
from = demo.clientWidth; to = from + 270;
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();
}
// 高度渐变
function changeHeight() {
var fx = 'height', from = demo.clientHeight, to = from + 100, time = 1000;
var callback = function() {
from = demo.clientHeight; to = from - 100;
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();
}
// 透明度渐变
function changeOpacity() {
var fx = 'opacity', from = 1, to = 0, time = 1000;
var callback = function() {
from = 0; to = 1;
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();
}

// 边框渐变
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();
}

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