圖片翻轉效果

* { margin: 0; padding: 0;}

ul { list-style-type: none;}

body { font: 14px "Microsoft Yahei"; overflow-x: hidden; background-color: #2B2B2B; }

h1 { width: 900px; margin: 40px auto 100px; font: 32px "Microsoft Yahei"; text-align: center; color: #D3D3D3; }

$(function(){

var $animate = $('#animate');

var $opposite = $('#opposite');

$(".wrap").hover(function(){

$animate.removeClass();

$opposite.removeClass();

$animate.addClass("test");

$opposite.addClass('test2');

},function(){

$animate.removeClass();

$opposite.removeClass();

$animate.addClass("test2");

$opposite.addClass('test');

});

$(".well-item").hover(function(){

$(this).find(".correct").children().removeClass();

$(this).find(".opposite").children().removeClass();

$(this).find(".correct").children().addClass("test");

$(this).find(".opposite").children().addClass('test2');

},function(){

$(this).find(".correct").children().removeClass();

$(this).find(".opposite").children().removeClass();

$(this).find(".correct").children().addClass("test2");

$(this).find(".opposite").children().addClass('test');

});

});

圖片翻轉效果

請我吃烤魚！

請我吃火鍋！

請我吃披薩

請我吃牛排！

總結

以上是生活随笔為你收集整理的html翻转切换div效果,图片翻转效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。