translate动画实例

<!doctype html>  
<html lang="en">  
<head>  
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta charset="UTF-8">  
    <title>translate</title>  
    <style>  
        .fangshan {  
            margin: 100px auto 0 auto;  
            width: 200px;  
            height: 600px;  
        }  
        .box2 {  
            width: 200px;  
            height: 200px;  
            border-radius: 50%;  
            border: 1px solid #000;  
            position: relative;  
        }  
        #nob1 {  
            width: 50px;  
            height: 50px;  
            border-radius: 50%;  
            background: #000;  
            position: absolute;  
            left: 38%;  
            top: 38%;  
            z-index: 3;  
        }  
        .nob {  
            width: 50px;  
            height: 100px;  
            border-radius: 50%;  
            position: absolute;  
            top: 0;  
            left: 78px;  
        }  
        #nob2 {  
            background: red;  
            transform-origin: 50% bottom;  
            transition: transform 1s linear;  
        }  
        #nob3 {  
            transform: rotate(240deg);  
            left: 75px;  
            top: 0px;  
            background: green;  
            transform-origin: 50% bottom;  
            transition: transform 1s linear;  
        }  
        #nob4 {  
            transform: rotate(120deg);  
            left: 75px;  
            top: 0px;  
            background: blue;  
            transform-origin: 50% bottom;  
            transition: transform 1s linear;  
        }  
        .shu {  
            width: 20px;  
            height: 300px;  
            background: #ccc;  
            box-shadow: 2px 0 2px 2px #dedede;  
            margin-left: 87px;  
            position: relative;  
        }  
        .pan {  
            width: 200px;  
            height: 50px;  
            border-radius: 50%;  
            margin-top: -25px;  
            background: #ccc;  
        }  
        .n {  
            position: absolute;  
            width: 15px;  
            height: 15px;  
            border-radius: 50%;  
            background: #aaa;  
            color: #fff;  
            left: 2.5px;  
            text-align: center;  
            cursor: pointer;  
        }  
        #n1 {  
            top: 50px;  
        }  
        #n2 {  
            top: 80px;  
        }  
        #n3 {  
            top: 110px;  
        }  
        #n4 {  
            top: 140px;  
        }  
    </style>  
</head>  
<body>  
    <div class="fangshan">  
        <div class="box2">  
            <div id="nob1"></div>  
            <div class="nob" id="nob2"></div>  
            <div class="nob" id="nob3"></div>  
            <div class="nob" id="nob4"></div>  
        </div>  
        <div class="shu">  
            <div class="n" id="n1">1</div>  
            <div class="n" id="n2">2</div>  
            <div class="n" id="n3">3</div>  
            <div class="n" id="n4">关</div>  
        </div>  
        <div class="pan"></div>  
    </div>  
<script>  
var n1 = document.getElementById("n1");  
var n2 = document.getElementById("n2");  
var n3 = document.getElementById("n3");  
var n4 = document.getElementById("n4");  
var i=1;  
var interval;  
function change3(num){  
    nob2.style.transform = "rotate("+i*360+"deg)";  
    nob2.style.transition = "transform "+num+"ms linear";  
    var num2 = i*360+240;  
    nob3.style.transform = "rotate("+num2+"deg)";  
    nob3.style.transition = "transform "+num+"ms linear";  
    var num3 = i*360+120;  
    nob4.style.transform = "rotate("+num3+"deg)";  
    nob4.style.transition = "transform "+num+"ms linear";  
    i++;   
}  
n1.onclick=function(){  
    clearInterval(interval);  
    change3(1000);  
    interval = setInterval(function(){  
        change3(1000);  
    },1000);  
};  
n2.onclick=function(){  
    clearInterval(interval);  
    change3(500);  
    interval = setInterval(function(){  
        change3(500);  
    },500);  
};  
n3.onclick=function(){  
    clearInterval(interval);  
    change3(200);  
    interval = setInterval(function(){  
        change3(200);  
    },200);  
};  
n4.onclick=function(){  
    clearInterval(interval);  
};  
</script>  
</body>  
</html>
猜你喜欢
