利用jquery实现animate分页按钮



7 26 9



特效描述:利用jquery实现 animate 分页按钮,利用jquery实现animate分页按钮

代码结构

1. 引入CSS

<link href="css/style.css" type="text/css" rel="stylesheet" />

2. 引入JS

<script type="text/javascript" src="js/jquery.1.4.2-min.js"></script>

3. HTML代码

<!--演示内容开始-->
<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(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://51qianduan.com/"><span class="cap"></span><span class="arrow"></span><span class="title">上一页</span></a></div>
	<div class="next active"><a href="http://51qianduan.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://51qianduan.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://51qianduan.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">
$(function(){
	$(".active a").each(function(){	
		$(this).hover(function(){
			$(this).css("cursor","pointer");
			$(this).stop();
			$(this).animate({width:90},400,function(){
				$(this).children(".title").css("display","block");
			})
		},function(){
			$(this).stop();	
			$(this).children(".title").css("display","none");
			$(this).animate({width:20},400);
		})
	})
});
</script>
<!--演示内容结束-->
<div style="text-align:center;clear:both">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动星星打分 切换按钮 表单 表单美化 表单插件 表单美化插件 其他 按钮控制 分页 翻页 分页插件

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到