js如何实现图片翻转效果

发布时间：2022-03-11 16:47:46 作者：iii
来源：亿速云阅读：1266

今天小编给大家分享一下js如何实现图片翻转效果的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

代码：

<!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; }

h2 { 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>

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

请我吃烤鱼！

</div>

请我吃火锅！

</div>

请我吃披萨

</div>

请我吃牛排！

</div>

</body>

</html>

以上就是“js如何实现图片翻转效果”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。

js如何实现图片翻转效果

相关阅读