模仿360开机效果

骑猪看日落 2023-07-05 05:19 21阅读 0赞

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NvV2hhdFdvcmxk_size_16_color_FFFFFF_t_70][]

原图片：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NvV2hhdFdvcmxk_size_16_color_FFFFFF_t_70 1][]

![20200213103236801.jpg][]

代码：

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NvV2hhdFdvcmxk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200213103117783.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NvV2hhdFdvcmxk,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NvV2hhdFdvcmxk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200213103220158.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NvV2hhdFdvcmxk,size_16,color_FFFFFF,t_70
[20200213103236801.jpg]: https://img-blog.csdnimg.cn/20200213103236801.jpg