效果圖：
原圖片：
代碼：
<!DOCTYPE html>
<html>
<head>
<title>360開機效果</title>
<style type="text/css">
.box{
width: 322px;
position: fixed;
bottom:0;
right:0;
}
span{
position: absolute;
top:0;
right:0;
width:30px;
height: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box" id="box">
<span></span>
<div class="hd" id="t">
<img src="images/t.jpg" alt=""/>
</div>
<div class="bd" id="b">
<img src="images/b.jpg" alt=""/>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var b = document.getElementById('b');
var closeAd = document.getElementsByTagName("span")[0];
closeAd.onclick = function(){
animate(b, {height : 0}, function(){
animate(b.parentNode, {width : 0})
})
}
function animate(obj, json, fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var flag = true;
for(var attr in json) {
var current = parseInt(getStyle(obj, attr));
var step = (json[attr] - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
obj.style[attr] = current + step + "px";
if (current != json[attr]) {
flag = false;
}
}
if (flag) {
clearInterval(obj.timer);
fn();
}
}, 30);
}
//獲取樣式屬性值
function getStyle(obj, attr){
if (obj.currentStyle) {
// IE瀏覽器識別
return obj.currentStyle[attr];
} else {
return window.getComputedStyle(obj, null)[attr];
}
}
</script>