图片翻转效果

2019-09-11 郑州网站建设  

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="utf-8">

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

<link rel="stylesheet" href=http://www.divcss5.com/html/"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=http://www.divcss5.com/html/"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">


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/seo/1935.html转载请标明出处,谢谢合作!
标签:
  • HTML
  • Doctype
  • !
  • Ч
  • lang
  • =
  • z