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插件之validation插件
Mar 29 jQuery
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
简单实现jQuery轮播效果
Aug 18 jQuery
jquery 一键复制到剪切板的实例
Sep 20 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
jquery实现点击弹出对话框
Feb 08 jQuery
jQuery AJAX应用实例总结
May 19 jQuery
jQuery实现增删改查
Dec 22 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 之入门篇
2006/12/04 PHP
php下过滤html代码的函数 提高程序安全性
2010/03/02 PHP
PHP管理依赖(dependency)关系工具 Composer 安装与使用
2014/08/18 PHP
Yii实现多按钮保存与提交的方法
2014/12/03 PHP
php类的扩展和继承用法实例
2015/06/20 PHP
php实现短信发送代码
2015/07/05 PHP
理解php依赖注入和控制反转
2016/05/11 PHP
关于二级域名下使用一级域名下的COOKIE的问题
2011/11/07 Javascript
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
JS实现控制表格单元格垂直对齐的方法
2015/03/30 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
2015/08/05 Javascript
JavaScript知识点整理
2015/12/09 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
JavaScript实现Base64编码转换
2016/04/23 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
JS数组返回去重后数据的方法解析
2017/01/03 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
2017/11/08 jQuery
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
2019/10/12 Javascript
vue+koa2搭建mock数据环境的详细教程
2020/05/18 Javascript
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
详解Python的Flask框架中生成SECRET_KEY密钥的方法
2016/06/07 Python
由浅入深讲解python中的yield与generator
2017/04/05 Python
python3.x上post发送json数据
2018/03/04 Python
python语音识别实践之百度语音API
2018/08/30 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
python绘制地震散点图
2019/06/18 Python
python程序 线程队列queue使用方法解析
2019/09/23 Python
Python3如何判断三角形的类型
2020/04/12 Python
Python使用OpenPyXL处理Excel表格
2020/07/02 Python
如果NULL定义成#define NULL((char *)0)难道不就可以向函数传入不加转换的NULL了吗
2012/02/15 面试题
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
五年级语文教学反思
2014/01/30 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
Win11 Beta 22621.601 和 22622.601今日发布 KB5017384修复内容汇总
2022/09/23 数码科技