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

最新推荐文章于 2022-07-22 14:59:16 发布

xjwolaile

最新推荐文章于 2022-07-22 14:59:16 发布

阅读量171

点赞数

分类专栏：学习 jQuery 前端技术文章标签： each hover animate children stop

本文链接：https://blog.csdn.net/xjwolaile/article/details/84464238

版权

学习同时被 3 个专栏收录

219 篇文章 0 订阅

订阅专栏

前端技术

188 篇文章 0 订阅

订阅专栏

jQuery

63 篇文章 0 订阅

订阅专栏

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、效果图

[img]http://dl2.iteye.com/upload/attachment/0087/6517/d80df589-6d13-3804-b97c-f70bce8c51d8.jpg[/img]

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>

xjwolaile

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery animate分页标签按钮鼠标悬停滑动展开分页按钮-20130730

1、效果及功能说明 animate动画分页按钮制作鼠标悬停分页按钮上滑动展开分页按钮，鼠标离开后分页按钮收缩2、实现原理主要是靠动画方法，来让原本的箭头图像的长度发生变长，正好可以融入下标题的文字大小，当鼠标离开以后就会让箭头图像触发另一个动画效果让让标题消失和长度变回原来的大小。主要的方法 [code="html5"]$(this).animate(...
复制链接

扫一扫