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版本 1.x? 2.x? 3.x?
Apr 01 jQuery
Jquery中attr与prop的区别详解
May 27 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
jQuery轮播图功能制作方法详解
Dec 03 jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 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
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
php将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
php的常量和变量实例详解
2017/06/27 PHP
基于PHP实现短信验证码发送次数限制
2020/07/11 PHP
基于jquery的一个拖拽到指定区域内的效果
2011/09/21 Javascript
jQuery右键菜单contextMenu使用实例
2011/09/28 Javascript
Ajax搜索结果页面下方的分页按钮的生成
2012/04/05 Javascript
jQuery实现多按钮单击变色
2014/11/27 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
2015/04/27 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
2015/11/06 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
使用Angular自定义字段校验指令的方法示例
2019/02/01 Javascript
微信小程序云开发实现增删改查功能
2019/05/17 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
基于Python的身份证号码自动生成程序
2014/08/15 Python
node.js获取参数的常用方法(总结)
2017/05/29 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
django 通过url实现简单的权限控制的例子
2019/08/16 Python
详解Python3 pandas.merge用法
2019/09/05 Python
学python安装的软件总结
2019/10/12 Python
python GUI库图形界面开发之PyQt5复选框控件QCheckBox详细使用方法与实例
2020/02/28 Python
解决jupyter notebook打不开无反应 浏览器未启动的问题
2020/04/10 Python
python的Jenkins接口调用方式
2020/05/12 Python
Python爬虫爬取微信朋友圈
2020/08/06 Python
城市轨道专业个人求职信范文
2013/09/23 职场文书
安全生产检讨书
2014/01/21 职场文书
《小蝌蚪找妈妈》教学反思
2014/02/21 职场文书
推荐信模板
2014/05/09 职场文书
机电专业求职信
2014/06/14 职场文书
迁户口计划生育证明
2014/10/19 职场文书
2016年寒假社会实践活动总结
2015/03/27 职场文书
MySQL和Oracle批量插入SQL的通用写法示例
2021/11/17 MySQL
使用Ajax实现无刷新上传文件
2022/04/12 Javascript