HTML5+原生javascript 卡片扑克旋转展开效果demo

HTML5+原生javascript 卡片扑克旋转展开效果demo_第1张图片


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5+原生javascript 卡片扑克旋转展开效果demotitle>
    <style>
        *{margin:0;padding:0;}
        body{background:#ccc;padding-top:100px;}
        button{height:40px;width:120px;font-size:15px;}
        .box{width:300px;height:300px;margin:50px auto;}
        .box ul{
            position:relative;
            height:300px;
            width:200px;
            margin:50px auto;
            padding:0;
            margin:0;
        }
        .box ul li{
            position:absolute;
            top:0;
            left:0;
            list-style: none;
            height:200px;
            width:100px;
            background:#fff;
            border-radius:5px;
            box-shadow: 0 0 5px #eee;
            font-size:16px;
            color:#fff;
        }

    style>
    <script src="jquery-1.11.3.min.js">script>
    <script>
        $(document).ready(function(){

            ~(function(cssclass,time){

                var item = document.querySelectorAll(cssclass);
                var colorArr = ["red","blue","pink","yellow","blue","green","oringe","#7A1786","#861736","#848617","#9A6C27","#9A276C","red","blue","pink","yellow","blue","green","oringe","#7A1786","#861736","#848617","#9A6C27","#9A276C"];    //颜色数组

                //正向旋转
                document.querySelector(".clockwise").onclick = function(){
                    var deg = 0;    //初始化旋转角度
                    var rotateDeg = (360/item.length);  //变化角度
                    for(var i = 0; i < item.length; i++){
                        item[i].style.backgroundColor = colorArr[i];    //设置颜色值
                        item[i].style.webkitTransform = "scale(" + ((i*0.01)+1)+") rotate(" + deg +"deg) translateX(" + (i*10) + "px)";
                        //item[i].style.webkitTransform = "rotate(" + deg +"deg)";
                        item[i].style.transition = "all "+ time + "s ease-out ";
                        deg += rotateDeg;  //递增角度
                    }
                }

                //逆向旋转
                document.querySelector(".anticlockwise").onclick = function(){
                    for(var i = item.length-1; i > 0; i--){
                        item[i].style.backgroundColor = "#fff";
                        item[i].style.webkitTransform = "rotate(0deg)"+"scale(1)";
                        item[i].style.transition = "all "+ time + "s ease-out ";
                    }
                }

            })(".movebox li", 3);

        });
    script>
head>

<body>
    <button class="clockwise">顺时针选装button>
    <button class="anticlockwise">逆时针选装button>
    <div class="box">
        <ul class="movebox">
           <li>1li>
           <li>2li>
           <li>3li>
           <li>4li>
           <li>5li>
           <li>6li>
           <li>7li>
           <li>8li>
           <li>9li>
           <li>10li>
           <li>11li>
           <li>12li>
           <li>13li>
           <li>14li>
           <li>15li>
           <li>16li>
           <li>17li>
           <li>18li>
           <li>19li>
           <li>20li>
           <li>21li>
           <li>22li>
           <li>23li>
           <li>24li>
        ul>
    div>
body>
html>

你可能感兴趣的:(javascript,html5,web前端,javascript,HTML5)