图片翻转效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>图片翻转效果</title>
<link rel="stylesheet" href="CSS/animate.css">
<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>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(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 class="well">
      <div class="well-item">
               <div class="correct"><img  class="" src="images/pro1.jpg" /></div>
               <div class="opposite">
                        <div class="">
                                 <div class="opposite-content">
                                             <div class="opposite-content-text">
                                                      请我吃烤鱼！
                                             </div>
                                 </div>
                        </div>
               </div>
      </div>
      <div class="well-item">
               <div class="correct"><img  class="" src="images/pro2.jpg" /></div>
               <div class="opposite">
                        <div class="">
                                 <div class="opposite-content">
                                             <div class="opposite-content-text">
                                                      请我吃火锅！
                                             </div>
                                 </div>
                        </div>
               </div>
      </div>
      <div class="well-item">
               <div class="correct"><img  class="" src="images/pro3.jpg" /></div>
               <div class="opposite">
                        <div class="">
                                 <div class="opposite-content">
                                             <div class="opposite-content-text">
                                                      请我吃披萨
                                             </div>
                                 </div>
                        </div>
               </div>
      </div>
      <div class="well-item">
               <div class="correct"><img  class="" src="images/pro4.jpg" /></div>
               <div class="opposite">
                        <div class="">
                                 <div class="opposite-content">
                                             <div class="opposite-content-text">
                                                      请我吃牛排！
                                             </div>
                                 </div>
                        </div>
               </div>
      </div>

</div>
</body>
</html>

		自动登录	找回密码
密码			立即注册

图片翻转效果-Discuz教程下载

图片翻转效果

相关帖子

全部评论 0

最佳新人

管理/版主

土豪装逼

教程 / CSS+DIV素材

Discuz! X3.2 - X3.4 升级至 Discuz! X3.5 详细教程18人阅读

【原创】根据论坛发帖时间或门户文章发布时间，判断时间是否为当38人阅读

非手动网站版权年份自动更新代码35人阅读

【收集整理】兔源码简单收集整理关于网页上各meta标签说明36人阅读

【原创】JS检测网址是否可访问，如可访问则显示链接直达并可点击47人阅读

【原创】分享一款html5+css3的横排导航列表DIY模块（百分百有效39人阅读

【原创】分享一款html5+css3的四排图文资讯列表DIY模块（百分百187人阅读

【转载】垂直时光轴HTML单页+CSS+js模块880人阅读

【转载】文字由左向右循环滚动DIY+CSS+js模块930人阅读

【原创】左侧导航栏样式，点击展开一级分类二级分类的DIY+CSS+JS3690人阅读

所属版块