首页手记 JavaScript动画之图标面板

JavaScript动画之图标面板

标签：

Html/CSS JavaScript

效果图

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <link rel="stylesheet" type="text/css" href="../css/demo3.css">
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../js/move.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../js/demo3.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../js/posmove.js"></script>
</head>
<body>
    <div id="wrap">
        <div id="box">
            <a href="#"><i><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../icons/book.png"></i><p>书籍</p></a>
            <a href="#"><i><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../icons/camera.png"></i><p>相机</p></a>
            <a href="#"><i><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../icons/cart.png"></i><p>购物车</p></a>
            <a href="#"><i><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../icons/computer.png"></i><p>电脑</p></a>
            <a href="#"><i><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../icons/shirt.png"></i><p>衣服</p></a>
            <a href="#"><i><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../icons/watch.png"></i><p>手表</p></a>
            <input type="button" value=" X " id="close">
        </div>
    </div>
</body>
</html>

CSS代码

*{
    margin: 0;
    padding: 0;
    font-size: 14px;
}
#wrap{
    position: relative;
}
#box{
    cursor: move;
    position: absolute;
    width: 360px;
    left: 200px;
    top: 50px;
    padding: 30px;
    text-align: center;
    background-color: #fff;
    overflow: auto;
    border-radius: 15px;
    border: 4px solid #ccc;
}
#box a{
    width: 80px;
    height: 80px;
    background-color: #fd8e2f;
    text-decoration: none;
    margin: 10px 20px ;
    float: left;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
#box img{
    width: 40px;
    height: 40px;
}
#box i{
    position: absolute;
    top: 15px;
    left: 20px;
    opacity: 1;
}
#box p{
    margin-top: 60px;
}
#box p:hover{
    color: #fff;
}

#box #close{
    width: 25px;
    height: 25px;
    position: absolute;
    right: 5px;
    top: 5px;
    border-radius: 12px;
    border: 1px solid #ccc;
    font-weight: bold;
}

JS代码
动画框架

function startMove(obj,json,fn){
    var incur,subduce,speed,flag;
    clearInterval(obj.timer);

    obj.timer = setInterval(function(){
        flag=true;
        for(var attr in json){
            if(attr==='opacity'){
                incur = Math.round(parseFloat(getComputedStyle(obj,null)[attr])*100);
            }else{
                incur = parseInt(getComputedStyle(obj,null)[attr]);
            }
            subduce = json[attr] - incur;
            speed = subduce>0?Math.ceil(subduce/10):Math.floor(subduce/10);
            if(attr==='opacity'){
                obj.style[attr] = (incur + speed)/100;
            }else{
                obj.style[attr] = incur + speed + "px";
            }
            if(incur!=json[attr]){
                flag  = false ;
            }
        }
        if(flag===true){
            clearInterval(obj.timer);
            if(fn){
                fn();
            }
        }
    },10);
}

窗口移动框架

function posChange(obj){
    obj.onmousedown=function(){
        var disX = event.clientX - obj.offsetLeft;
        var disY = event.clientY - obj.offsetTop;
        document.onmousemove=function(event){
            obj.style.left=event.clientX-disX+"px" ;
            obj.style.top=event.clientY-disY+"px" ;
        };
    };
    document.onmouseup=function(){
        document.onmousemove=null;
    };
}

window.onload=function(){
    var box = document.getElementById('box');
    var aTags = document.getElementsByTagName('a');
    var iTags = document.getElementsByTagName('i');
    var iclose = document.getElementById('close');
    for(var i=0;i<iTags.length;i++){
        aTags[i].onmouseenter=function(){
            var _this = this.getElementsByTagName('i')[0];
            startMove(_this,{top:-20,opacity:0},function(){
                _this.style.top="40px";
                startMove(_this,{top:15,opacity:100});
            });
        };
    }

    posChange(box);

    iclose.onclick=function(){
        box.style.display="none";
    };
};

图标