1
2
3
4
5
6
7
8
9
10
 <p class="tips">Tip: You may need to use the browser like chrome， firefox or safari which supports CSS attribute to watch this rotate effect...</p>
    <div class="dock">
        <img src="http://www.jq22.com/img/cs/500x500-1.png" class="rotate" alt="icon">
        <img src="http://www.jq22.com/img/cs/500x500-2.png" class="rotate" alt="icon">
        <img src="http://www.jq22.com/img/cs/500x500-3.png" class="rotate" alt="icon">
        <img src="http://www.jq22.com/img/cs/500x500-4.png" class="rotate" alt="icon">
        <img src="http://www.jq22.com/img/cs/500x500-5.png" class="rotate" alt="icon">
    </div>
    <img class="board" src="http://www.jq22.com/img/cs/500x300-1.png">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

 
Tip: You may need to use the browser like chrome， firefox or safari which supports CSS attribute to watch this rotate effect...

    

        
        
        
        
        
    
    

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(function() {
    function state1() {
        $(".rotate").removeClass("r2");
        $(".rotate").addClass("r1");
        setTimeout(state2, 150);
    }
    function state2() {
        $(".rotate").removeClass("r1");
        $(".rotate").addClass("r2");
        setTimeout(state1, 150);
    }
    state1();
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX