jQuery鼠标悬停内容动画切换效果
<!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鼠标悬停内容动画切换效果的更多相关文章
- 基于html5鼠标悬停图片动画展示效果
分享一款基于html5鼠标悬停图片动画展示效果.里面包含两款不同效果的html5图片展示效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=" ...
- jQuery鼠标悬停文字渐隐渐现动画效果
jQuery鼠标悬停文字渐隐渐现动画效果 当时是做项目的时候用到的所以图片有些大,九张,真正要做图片不需要这么大 css样式 <style> *{ margin: 0; padding: ...
- jQuery鼠标悬停3d菜单展开动画
效果体验:http://hovertree.com/texiao/jquery/93/ 竖直的主菜单贴着页面左侧,当光标移入菜单项时,以3D动画的方式弹出对应的二级菜单.采用jQuery和CSS3实现 ...
- 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件
一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...
- 鼠标悬停css3动画效果
下载Demo 效果预览 html: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- js鼠标滚轮滚动图片切换效果
效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...
- jquery带按钮的图片切换效果
<!doctype html> <html> <head> <meta charset="gb2312"> <title> ...
- jQuery手机端触摸卡片切换效果
效果:http://hovertree.com/code/run/jquery/a1gr3gm9.html 可以用手机查看效果. 代码如下: <!doctype html> <htm ...
- 15款css3鼠标悬停图片动画过渡特效
分享15款css3鼠标悬停图片动画过渡特效.这是一款15款不同效果的css3 hover动画过渡效果代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
随机推荐
- Bubble Sort [ASM-MIPS]
# Program: Bubble sort # Language: MIPS Assembly (32-bit) # Arguments: 5 unordered numbers stored in ...
- Java 对象和类
1.对象 object 对象是可被感知的一个实体,有唯一的名称.有一组表现对象的状态属性和对象内在具有的行为能力.比如张三这个人,他有姓名.职业.眼睛等具体状态属性,能实施说.跑.吃等方法.对象,在j ...
- cdoj 1489 老司机采花
地址:http://acm.uestc.edu.cn/#/problem/show/1489 题目: 老司机采花 Time Limit: 3000/1000MS (Java/Others) M ...
- 单机搭建Android开发环境(二)
前文介绍了如何优化SSD和内存,以发挥开发主机的最佳性能,同时提到在SSD上创建虚拟机.为什么不装双系统呢?双系统性能应该会更好!采用Windows+虚拟机的方式,主要是考虑到安卓开发和日常办公两方面 ...
- HDU 4630 No Pain No Game 树状数组+离线操作
题意:给一串数字,每次查询[L,R]中两个数的gcd的最大值. 解法:容易知道,要使取两个数让gcd最大,这两个数最好是倍数关系,所以处理出每个数的所有倍数,两两间根据倍数关系形成一条线段,值为该数. ...
- NOIP2003神经网络[BFS]
题目背景 人工神经网络(Artificial Neural Network)是一种新兴的具有自我学习能力的计算系统,在模式识别.函数逼近及贷款风险评估等诸多领域有广泛的应用.对神经网络的研究一直是当今 ...
- Redis的安装和使用
Redis 安装redis: 将将要安装redis文件夹放到一个盘中 通过命令行切换到放文件的地方 安装成功后,将文件夹中的扩展放入wamp/php/ext中,然后配置php.ini,重启服务器. 使 ...
- java 24 - 8 GUI之创建四则运算计算器(未校验版)
这个是用NetBeans软件制作的,因为这个软件制作GUI任务比较方便 通过拖拽控件生成的窗体:(红色的名称是更改后的控件名称) 拉拽好布局后,要进行的步骤: A:更改想要进行操作的控件的名称(右键控 ...
- javascript中的链表结构
1.定义 很多编程语言中数组的长度是固定的,就是定义数组的时候需要定义数组的长度,所以当数组已经被数据填满的时候,需要再加入新的元素就很困难.只能说在部分变成语言中会有这种情况,在javascript ...
- Java 集合系列10之 HashMap详细介绍(源码解析)和使用示例
概要 这一章,我们对HashMap进行学习.我们先对HashMap有个整体认识,然后再学习它的源码,最后再通过实例来学会使用HashMap.内容包括:第1部分 HashMap介绍第2部分 HashMa ...