基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效。效果图如下:
在线预览 源码下载
实现的代码。
html代码:
<div class="container"> <img src='/images/loading.gif' data-original="images/1.jpeg" /> <img src='/images/loading.gif' data-original="images/2.jpeg" /> <img src='/images/loading.gif' data-original="images/3.jpeg" /> <img src='/images/loading.gif' data-original="images/4.jpeg" /> <img src='/images/loading.gif' data-original="images/5.jpeg" /> </div> <div class="name"> <p>No 1</p> </div>
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
原标题:基于jquery鼠标点击图片翻开切换效果
关键词:jquery