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


Posted in jQuery onApril 27, 2017

效果如下:

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

代码如下:

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木

jQuery 相关文章推荐
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
基于jQuery拖拽事件的封装
Nov 29 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 jQuery
使用jQuery,Angular实现登录界面验证码详解
Apr 27 #jQuery
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 #jQuery
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 #jQuery
jquery.form.js异步提交表单详解
Apr 25 #jQuery
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 #jQuery
jquery submit()不能提交表单的解决方法
Apr 24 #jQuery
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 #jQuery
You might like
php 攻击方法之谈php+mysql注射语句构造
2009/10/30 PHP
php中使用Imagick实现图像直方图的实现代码
2011/08/30 PHP
php 获取百度的热词数据的代码
2012/02/18 PHP
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
php一维二维数组键排序方法实例总结
2014/11/13 PHP
PHP实现动态柱状图改进版
2015/03/30 PHP
PHP进阶学习之Geo的地图定位算法详解
2019/06/19 PHP
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
2013/12/13 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
2020/08/21 Javascript
JQuery异步加载PartialView的方法
2016/06/07 Javascript
jQuery深拷贝Json对象简单示例
2016/07/06 Javascript
AngularJS递归指令实现Tree View效果示例
2016/11/07 Javascript
JS绘制微信小程序画布时钟
2016/12/24 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
2017/09/15 Javascript
基于Vue开发数字输入框组件
2017/12/19 Javascript
Node.js如何对SQLite的async/await封装详解
2019/02/14 Javascript
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
[01:07:53]RNG vs VG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python中cPickle用法例子分享
2014/01/03 Python
Python实现的弹球小游戏示例
2017/08/01 Python
python数字图像处理之骨架提取与分水岭算法
2018/04/27 Python
Python自动登录QQ的实现示例
2020/08/28 Python
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
2014/04/23 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
SmartBuyGlasses台湾:名牌眼镜,名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
英国领先的新鲜松露和最好的松露产品供应商:TruffleHunter
2019/08/26 全球购物
大学生就业自荐信
2013/10/26 职场文书
体育节口号
2014/06/19 职场文书
公司租房协议书
2014/10/14 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书
纯html+css实现打字效果
2021/08/02 HTML / CSS
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL