图片翻转效果

<!DOCTYPE html>

<head>

<title>图片翻转效果</title>

<style>

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

</style>

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

});

</script>

</head>

<body>

<h1>图片翻转效果</h1>

请我吃烤鱼！

</div>

请我吃火锅！

</div>

请我吃披萨

</div>

请我吃牛排！

</div>

</body>

</html>

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h15045.shtml