<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <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" target="_blank" class="a_jump"><span class="tit">开心网</span>

 <p>开心网营销</p>

 </a> </div>

 </div>

 <div class="fgH20"></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" target="_blank" class="a_jump"><span class="tit">人人网</span>

 <p>人人网营销</p>

 </a> </div>

 </div>

 <div class="fgH20"></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" target="_blank" class="a_jump"><span class="tit">QQ空间</span>

 <p>QQ空间营销</p>

 </a> </div>

 </div>

 <div class="fgH20"></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" target="_blank" class="a_jump"><span class="tit">问答营销</span>

 <p>问答投放 锁住潜在客户</p>

 </a> </div>

 </div>

 <div class="fgH20"></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" 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鼠标悬停内容动画切换效果的更多相关文章

  1. 基于html5鼠标悬停图片动画展示效果

    分享一款基于html5鼠标悬停图片动画展示效果.里面包含两款不同效果的html5图片展示效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

  2. jQuery鼠标悬停文字渐隐渐现动画效果

    jQuery鼠标悬停文字渐隐渐现动画效果 当时是做项目的时候用到的所以图片有些大,九张,真正要做图片不需要这么大 css样式 <style> *{ margin: 0; padding: ...

  3. jQuery鼠标悬停3d菜单展开动画

    效果体验:http://hovertree.com/texiao/jquery/93/ 竖直的主菜单贴着页面左侧,当光标移入菜单项时,以3D动画的方式弹出对应的二级菜单.采用jQuery和CSS3实现 ...

  4. 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

    一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...

  5. 鼠标悬停css3动画效果

    下载Demo 效果预览 html: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  6. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  7. jquery带按钮的图片切换效果

    <!doctype html> <html> <head> <meta charset="gb2312"> <title> ...

  8. jQuery手机端触摸卡片切换效果

    效果:http://hovertree.com/code/run/jquery/a1gr3gm9.html 可以用手机查看效果. 代码如下: <!doctype html> <htm ...

  9. 15款css3鼠标悬停图片动画过渡特效

    分享15款css3鼠标悬停图片动画过渡特效.这是一款15款不同效果的css3 hover动画过渡效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

随机推荐

  1. 贪吃蛇（C++实现，VC6.0编译，使用了EasyX图形库）

    程序效果: 代码: //main.cpp 1 #include <iostream> #include<fstream> #include <graphics.h> ...

  2. POJ1426Find The Multiple[BFS]

    Find The Multiple Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 27433   Accepted: 114 ...

  3. HDU2191悼念512汶川大地震遇难同胞——珍惜现在，感恩生活[多重背包]

    悼念512汶川大地震遇难同胞——珍惜现在,感恩生活 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Jav ...

  4. java的构造方法

    当一个类a继承一个类b,类b继承类c,类c继承类d时, 先执行d的构造,然后c.b:当该执行a的构造时,如果有成员变量,就先执行成员变量,最后构造 子类继承父类,子类重写父类的某个方法,当父类构造时, ...

  5. 杭电OJ——1198 Farm Irrigation (并查集)

    畅通工程 Problem Description 某省调查城镇交通状况,得到现有城镇道路统计表,表中列出了每条道路直接连通的城镇.省政府"畅通工程"的目标是使全省任何两个城镇间都可 ...

  6. android整体架构概述--①

    android的logo 是由设计师去厕所时来的灵感. 其中android的命名都是以甜点的名字来定的. android的系统一共有四层. 1.Linux内核和驱动层 2.函数库  由C或C++编写 ...

  7. MySQL 基础语句的练习

    -- *** ①.对数据库的操作 *** -- -- 查看所有的数据库 SHOW DATABASES; -- 创建数据库 CREATE DATABASE day1026 DEFAULT CHARACT ...

  8. splay总结

    以此文纪念人生首次竞赛大选 这里主要讲一讲splay的区间操作,我讲的是指针实现,程序的效率可能比较低,更偏重代码的可读可写性,语言风格不是很优美有效,不喜勿喷 零.初始化结构体 1)这里主要是初始化 ...

  9. samsung Galaxy s2(GT i9100g )刷机升级至4.4小记

    从昨天上午到现在,大部分时间都是在将i9100g更新到4.4.虽然中途也做了一些别的事情,但是更新过程还是走了一点弯路,比开始预想的稍微慢了一点,现在将完整的更新步骤分享给大家,以帮助后来的同学.升级 ...

  10. oracle中substr() instr() 用法

    --substr(字符串,截取开始位置,截取长度)=返回截取的字 ,) from dual;--返回结果为:m ,) from dual;--返回结果为:m--说明0和1都表示截取的位置为第一个字符 ...