欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > HTML >

HTML基础必学列表

图片翻转效果

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

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

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2016-12-06 09:30 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。