模仿360开机效果

最新推荐文章于 2021-06-05 03:25:23 发布

原创最新推荐文章于 2021-06-05 03:25:23 发布 · 371 阅读

0 ·

CC 4.0 BY-SA版权

HTML+CSS+JS 专栏收录该内容

15 篇文章

订阅专栏

效果图：

原图片：

代码：

<!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>