基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效。效果图如下：

在线预览    源码下载

实现的代码。

html代码：

<div class="container">
        <img src="images/1.jpeg" alt="1" />
        <img src="images/2.jpeg" alt="2" />
        <img src="images/3.jpeg" alt="3" />
        <img src="images/4.jpeg" alt="4" />
        <img src="images/5.jpeg" alt="5" />
    </div>
    <div class="name">
        <p>No 1</p>
    </div>

css代码：

 * {
            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;
            }

js代码：

$(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();

        })

via：http://www.w2bc.com/Article/45764

在线预览    源码下载