原生js仿360开机启动右下角关闭浮动层效果源码下载

原生js仿360开机启动右下角关闭浮动层效果源码下载，喜欢的同学拿走。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线充值

分类：其它特效 > 动画效果难易：入门级

查看演示下载资源下载积分： 0 积分

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title></title> 
    <style> 
        .box { 
            width: 322px; 
            position: fixed; 
            bottom: 0; 
            right: 0; 
            overflow: hidden; 
        } 
 
        #closeButton { 
            position: absolute; 
            top: 0; 
            right: 0; 
            width: 24px; 
            height: 20px; 
            line-height:20px; 
            overflow:hidden; 
            cursor: pointer; 
            display:block; 
            color:#fff; 
        } 
    </style> 
</head> 
<body> 
<div class="box" id="box"> 
    <span id="closeButton">X</span> 
 
    <div class="hd" id="headPart"> 
        <img src="images/t.jpg" alt=""/> 
    </div> 
    <div class="bd" id="bottomPart"> 
        <img src="images/b.jpg" alt=""/> 
    </div> 
</div> 
<script> 
    var closeButton = document.getElementById("closeButton"); 
    var bottomPart = document.getElementById("bottomPart"); 
    closeButton.onclick = function () { 
        animate(bottomPart, {"height": 0}, function () { 
            animate(bottomPart.parentNode, {"width": 0}); 
        }); 
    } 
 
 
    function animate(obj, json, fn) { 
        clearInterval(obj.timer); 
        obj.timer = setInterval(function () { 
            //如果本次执行完成后 所有的属性都达到了目标值 就可以清理了 
            var flag = true;//假设所有的属性都达到了目标值 
            for (var k in json) { 
                var leader = parseInt(getStyle(obj, k)) || 0; 
                var target = json[k]; 
                var step = (target - leader) / 10; 
                step = step > 0 ? Math.ceil(step) : Math.floor(step); 
                leader = leader + step; 
                obj.style[k] = leader + "px"; 
                if (leader != target) { 
                    flag = false;//告诉标记我还没达到 
                } 
            } 
            //到了这里还是true就说明 没有任何人告诉falg自己是false 
            //也就是说都达到了 
            if (flag) { 
                clearInterval(obj.timer); 
                if (fn) { 
                    fn();//有回调函数才调用 
                } 
            } 
        }, 15); 
    } 
 
 
    function getStyle(obj, attr) { 
        if (obj.currentStyle) { 
            return obj.currentStyle[attr]; 
        } else { 
            return window.getComputedStyle(obj, null)[attr]; 
        } 
    } 
</script> 
</body> 
</html>

原生js仿360开机启动右下角关闭浮动层效果源码下载 收藏

原生js仿360开机启动右下角关闭浮动层效果源码下载
收藏