jQuery鼠标点击图片侧翻切换特效插件

jQuery鼠标点击图片侧翻切换特效插件

一款jQuery鼠标点击图片滑动切换特效是一款简单的动画效果图片切换特效。本段代码适应于所有网页使用,有兴趣的朋友们可以前来下载使用。

使用方法
需要用到的JS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
$(function(){  
         
    var interval;
    $(".container img").click(function cover(){
            $(this).addClass("zoom").fadeOut(700,append);      
            function append(){
            $(this).removeClass("zoom").appendTo(".container").show();
            var name = $(".container").children("img").first().attr("alt");
             $(".name p").text("No "+name);
            }  
     
    })
   
    function auto(){
            var play = $(".container").children("img").first();
            play.addClass("zoom").fadeOut(700,append);     
            function append(){
            $(this).removeClass("zoom").appendTo(".container").show();
            var name = $(this).parent().children("img").first().attr("alt");
             $(".name p").text("No "+name);
            }
            interval = setTimeout(auto,5000);
    }
   
    $(".container img").hover(function(){
            stopPlay();
    },function(){
            interval = setTimeout(auto,5000);
    })
   
    function stopPlay(){
        clearTimeout(interval)
    }
    auto();
                   
})

CSS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
*{margin:0;padding:0;}
body{background:url(images/bg-texture.jpg);}
ul{list-style:none;}
.container{
    background:#FF9;
    width:420px;
    height:300px;
    margin:170px auto 0;
    cursor:pointer;
    overflow:hidden;
    box-shadow:6px 4px 5px #969696;
}
.container img{
    background:#FFF;
    display:block;
    width:400px;
    height:280px;
    padding:10px;
    float:left;
    -webkit-transition:0.7s;
    -moz-transition:0.7s;
    -o-transition:0.7s;
}
.zoom{
    position:absolute;
    -moz-transform:translate(-150px,-120px);
    -webkit-transform:scale(1.1) translate(-150px,-120px) skew(15deg,-30deg);
    -ms-transform:scale(1.1) translate(-150px,-120px) skew(15deg,-30deg);
    -o-transform:scale(1.1) translate(-150px,-120px) skew(15deg,-30deg);
}
.name{
    background:#FFF;
    width:220px;
    height:30px;
    margin:15px auto;
    cursor:pointer;
    box-shadow:2px 2px 5px #969696;/*opera或ie9*/
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    border-radius:20px;
}

.name p{
    font:bold 24px Verdana, Geneva, sans-serif;
    text-align:center;
    line-height:30px;
    color:#FFF;
    background:#333;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    border-radius:20px;
}
当前内容只有登录了才能查看,如果您已经注册,请登录
0

发表评论