jQuery鼠标悬停内容动画切换效果

2019-11-19 16:43:16

字体：大中小

来源：转载

供稿：网友

效果如下：

代码如下：

<!DOCTYPE html><html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>jQuery鼠标悬停内容动画切换效果</title> <style>  * {  margin: 0;  padding: 0;  list-style: none;  }  img {  border: 0;  }  a {  color: #fff;  text-decoration: none;  }  .servicesBox {  width: 1000px;  height: 270px;  margin: 0 auto;  clear: both;  line-height: 18px;  color: #999999;  font-size: 12px;  }  .servicesBox .serBox {  cursor: pointer;  border: 1px solid #fff;  display: inline;  width: 198px;  height: 250px;  float: left;  overflow: hidden;  background-color: #f7f7f7;  position: relative;  }  .servicesBox .serBoxOn {  font-family: "Microsoft Yahei";  display: none;  width: 320px;  height: 270px;  background: url(http://demo.lanrenzhijia.com/2014/pic0910/images/serboxon_bg.gif) repeat 0px 0px;  position: absolute;  left: 0px;  top: 0px;  z-index: 19;  }  .servicesBox .serBox .pic1 {  width: 110px;  height: 110px;  text-align: center;  position: absolute;  top: 22px;  right: 41px;  z-index: 99;  }  .servicesBox .serBox .pic2 {  width: 110px;  height: 110px;  text-align: center;  position: absolute;  top: 22px;  left: -110px;  z-index: 99;  }  .servicesBox .serBox .txt1 {  width: 198px;  height: 100px;  color: #999999;  position: absolute;  top: 145px;  left: 0px;  z-index: 99;  }  .servicesBox .serBox .txt2 {  width: 198px;  height: 100px;  color: #a9cf4f;  position: absolute;  top: 145px;  right: -240px;  z-index: 99;  }  .servicesBox .serBox span.tit {  font-size: 16px;  display: block;  text-align: center;  }  .servicesBox .serBox .txt1 .tit {  color: #000000;  line-height: 30px;  }  .servicesBox .serBox .txt2 .tit {  color: #fff;  line-height: 30px;  font-family: "Microsoft Yahei";  }  .servicesBox .serBox p {  padding: 0 10px;  text-align: center;  } </style> </head> <body> <!-- 代码begin --> <div class="servicesBox">  <div id="Div35" class="serBox" onclick="serFocus(1)">  <div class="serBoxOn"></div>  <div class="pic1 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/3.png"> </div>  <div class="pic2 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/3-3.png"> </div>  <div class="txt1"> <span class="tit">开心网</span>   <p>开心网营销</p>  </div>  <div class="txt2">   <a href="http://www.lanrenzhijia.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank" class="a_jump"><span class="tit">开心网</span>   <p>开心网营销</p>   </a>  </div>  </div>  <div id="Div36" class="serBox" onclick="serFocus(2)">  <div class="serBoxOn"></div>  <div class="pic1 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/1.png"> </div>  <div class="pic2 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/1-1.png"> </div>  <div class="txt1"> <span class="tit">人人网</span>   <p>人人网营销</p>  </div>  <div class="txt2">   <a href="http://www.lanrenzhijia.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank" class="a_jump"><span class="tit">人人网</span>   <p>人人网营销</p>   </a>  </div>  </div>  <div id="Div37" class="serBox" onclick="serFocus(3)">  <div class="serBoxOn"></div>  <div class="pic1 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/2.png"> </div>  <div class="pic2 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/2-2.png"> </div>  <div class="txt1"> <span class="tit">QQ空间</span>   <p>QQ空间营销</p>  </div>  <div class="txt2">   <a href="http://www.lanrenzhijia.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank" class="a_jump"><span class="tit">QQ空间</span>   <p>QQ空间营销</p>   </a>  </div>  </div>  <div id="Div38" class="serBox" onclick="serFocus(3)">  <div class="serBoxOn"></div>  <div class="pic1 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/35.png"> </div>  <div class="pic2 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/35-35.png"> </div>  <div class="txt1"> <span class="tit">问答营销</span>   <p>问答投放 锁住潜在客户</p>  </div>  <div class="txt2">   <a href="http://www.lanrenzhijia.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank" class="a_jump"><span class="tit">问答营销</span>   <p>问答投放 锁住潜在客户</p>   </a>  </div>  </div>  <div id="Div39" class="serBox" onclick="serFocus(3)">  <div class="serBoxOn"></div>  <div class="pic1 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/31.png"> </div>  <div class="pic2 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/31-31.png"> </div>  <div class="txt1"> <span class="tit">邮件推广</span>   <p>低成本 商机无限</p>  </div>  <div class="txt2">   <a href="http://www.lanrenzhijia.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank" class="a_jump"><span class="tit">邮件推广</span>   <p>低成本 商机无限</p>   </a>  </div>  </div> </div> <script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script> <script>  $(function() {  $(".serBox").hover(   function() {   $(this).children().stop(false, true);   $(this).children(".serBoxOn").fadeIn("slow");   $(this).children(".pic1").animate({    right: -110   }, 400);   $(this).children(".pic2").animate({    left: 41   }, 400);   $(this).children(".txt1").animate({    left: -240   }, 400);   $(this).children(".txt2").animate({    right: 0   }, 400);   },   function() {   $(this).children().stop(false, true);   $(this).children(".serBoxOn").fadeOut("slow");   $(this).children(".pic1").animate({    right: 41   }, 400);   $(this).children(".pic2").animate({    left: -110   }, 400);   $(this).children(".txt1").animate({    left: 0   }, 400);   $(this).children(".txt2").animate({    right: -240   }, 400);   }  );  }); </script> <!-- 代码end --> </body></html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持武林网

上一篇：js获取浏览器的各种属性

下一篇：详解axios在node.js中的post使用