jQuery animate分页标签按钮鼠标悬停滑动展开分页按钮-20130730 -

xjwolaile

浏览: 341958 次
性别:
来自: 杭州

最近访客更多访客>>

waylon33

Cyoooa

h06910101

androidHua

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery animate分页标签按钮鼠标悬停滑动展开分页按钮-20130730

博客分类：

学习
jQuery
前端技术

each hover animate children stop

1、效果及功能说明

animate动画分页按钮制作鼠标悬停分页按钮上滑动展开分页按钮，鼠标离开后分页按钮收缩

2、实现原理

主要是靠动画方法，来让原本的箭头图像的长度发生变长，正好可以融入下标题的文字大小，当鼠标离开以后就会让箭头图像触发另一个动画效果让让标题消失和长度变回原来的大小。

主要的方法

$(this).animate({width:90},400,function(){
//定义当前动画让长度通过动画变成90长度在0.4秒完成
$(this).children(".title").css("display","block");
//让标题文字显示出来

$(this).children(".title").css("display","none");
//定义标题文字消失
$(this).animate({width:20},400);
//定义箭头图像回到原来的长度

3、效果图

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

(无图片)5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合

6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来，将保存类型(T)换成(所有文件(*.*))，将html5和解压后的图片文件夹放在同一个文件夹内效果

7、代码[html5]

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* next prev btn*/
.npbtn{padding:10px 30px 20px 30px;height:60px;width:300px;margin:20px auto;}
.disable{background:#EBEBEB;
	border-radius:30px;
	-moz-border-radius:30px;
	-webkit-border-radius:30px;}
.prev{float:left;}
.next{float:right;}
.next,.prev{padding:0 20px 0 0;height:40px;background-position:right -348px;position:relative;text-shadow:0 1px transparent}
.next .title{padding:11px 38px 0 0;right:0;}
.prev .title{padding:11px 26px 0 0;right:0;}
.cap{width:20px;height:40px;display:block;background-position:left -282px;}
.title{display:none;position:absolute;top:0;color:#fff;font-size:16px;}
.arrow{width:40px;height:40px;position:absolute;top:0;background:url(http://www.17sucai.com/static/images/arrow-left-right.png) no-repeat;}
.prev .arrow{left:0;background-position:0px 0px;}
.next .arrow{right:0;background-position:0px -40px;}
.active{
	background-color:#3F9CDE;
	border-radius:30px;
	-moz-border-radius:30px;
	-webkit-border-radius:30px;
}
.active a{display:block;}
.active a:hover{text-decoration:none;}
</style>


<div class="npbtn">
	<div class="prev active"><a href="http://www.17sucai.com/"><span class="cap"></span><span class="arrow"></span><span class="title">上一页</span></a></div>
	<div class="next active"><a href="http://www.17sucai.com/"><span class="cap"></span><span class="arrow"></span><span class="title">下一页</span></a></div>
</div>

<div class="npbtn">
	<div class="prev disable"><span class="cap"></span><span class="arrow"></span><span class="title">上一页</span></div>
	<div class="next active"><a href="http://www.17sucai.com/"><span class="cap"></span><span class="arrow"></span><span class="title">下一页</span></a></div>
</div>

<div class="npbtn">
	<div class="prev active"><a href="http://www.17sucai.com/"><span class="cap"></span><span class="arrow"></span><span class="title">上一页</span></a></div>
	<div class="next disable"><span class="cap"></span><span class="arrow"></span><span class="title">下一页</span></div>
</div>

<script type="text/javascript" src="http://www.jsfoot.com/skin/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
	$(".active a").each(function(){	
	//定义遍历方法
		$(this).hover(function(){
		//定义伪类
			$(this).css("cursor","pointer");
			//定义当前样式
			$(this).stop();
			//当前停止所有动画
			$(this).animate({width:90},400,function(){
			//定义当前动画让长度通过动画变成90长度在0.4秒完成
				$(this).children(".title").css("display","block");
				//将当前的标题文字显示出来
			})
		},function(){
		//当鼠标离开时
			$(this).stop();	
			//停止所有动画
			$(this).children(".title").css("display","none");
			//定义标题文字消失
			$(this).animate({width:20},400);
			//定义动画从90的长度变为20的长度在0.4秒内完成
		})
	})
});
</script>

</body>
</html>

查看图片附件

分享到：

jQuery google日历练习-20130731 | 背景透明和ie跟谷歌和火狐px不同-20130729

2013-07-30 23:09
浏览 2028
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery animate分页标签按钮鼠标悬停滑动展开分页按钮-20130730

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery animate分页标签按钮鼠标悬停滑动展开分页按钮-20130730

评论

发表评论

相关推荐

Zepto

node.js的学习-20140611

node.js的学习-20140609

git的学习-20140604

PC和移动端的页面的一些差距-20140525

Bootstrap排版基础样式和响应式图片-20140521

Bootstrap特性、设计和组件-20140519

Bootstrap流式布局-20140515

Bootstrap的宽度和分辨率的差别-20140514

Bootstrap的认识-20140513

jquery初步认识-20140123

html5的特殊标签作用-20140114

ie下的指定样式-20140106

margin-left在IE6下左浮动加倍-20140102

浮动存在的问题-20131229

在ie6下同张图片不能外面包有a标签后在画热区-20131223

ie6下导航存在的问题和-2013-12-20

按比例展示的小js-20131217

定位需要注意-20131214

flash在Safari下的BUG-20131212

最近访客更多访客>>