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、代码

<!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动画分页按钮，鼠标悬停滑动展开的更多相关文章

  1. 基于Bootstrap的超酷jQuery开关按钮插件

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAAA2CAIAAAC0tsfoAAAB/0lEQVR4nO3bQWrCQBTGcc/mbVz0DD

  2. 【转】基于Bootstrap的超酷jQuery开关按钮插件

    基于Bootstrap的超酷jQuery开关按钮插件

  3. jquery图片放大插件鼠标悬停图片放大效果

    都知道jquery都插件是非常强大的,最近分享点jquery插件效果,方便效果开发使用. 一.HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  4. 基于jQuery的时间轴鼠标悬停动画插件

    之前为大家分享了很多jquery插件,这次我们要来分享一款不太常见的jQuery插件,它是一个时间轴,时间轴上的每一个点在鼠标滑过时都可以显示该点的描述信息,并且鼠标滑过时都可以产生一定的动画特效,比 ...

  5. 超酷jQuery进度条加载动画集合

    在丰富多彩的网页世界中,进度条加载动画的形式非常多样,有利用gif图片实现的loading动画,也有利用jQuery和CSS3实现的进度加载动画,本文主要向大家介绍很多jQuery和CSS3实现的进度 ...

  6. jquery.imagezoom.js制作鼠标悬停图片放大镜特效、参数和最简教程

    一.插件介绍 今天在用到放大镜效果的时候,突然发现网站里没有放大镜的插件.于是总结了一下,放到这里.为自己,也为他人提供方便.jquery.imagezoom.js这款插件用途很简单,就是鼠标移过去, ...

  7. HTML5超酷秒表动画 可暂停和重置秒表

    关于HTML5和CSS3的时钟应用在之前我们已经分享过不少了,还有一些HTML5的日期选择应用.今天我们要分享一款基于HTML5和CSS3的圆盘秒表动画,秒表可以精确到0.001秒,并且可以在计时过程 ...

  8. HTML5/CSS3超酷环形动画菜单

    在线演示 本地下载

  9. 加载信息，先从数据库取出5条实现分页，鼠标向上滑动触发Ajax再加载5条，达到异步刷新，优化加载。。。

    php数据库取数据 <?php include("conn1.php"); include('../function/functions.php'); $page=intva ...

随机推荐

  1. scp命令与Screen服务的区别

    scp:远程传输命令.(通过网络传送给其他主机,又恰好两台主机都是linux系统,便可以使用scp传输文件) 参数 作痛 -v 先是详细的连接进度 -P 指定远程主机的sshd端口号 -r 传送文件夹 ...

  2. eureka集群高可用配置

    譬如eureka.client.register-with-eureka和fetch-registry是否要配置,配不配区别在哪里:eureka的客户端添加service-url时,是不是需要把所有的 ...

  3. docker-py安装

    linux: pip install docker-py  

  4. Java的checked exception与unchecked exception

    在Java中exception分为checked exception和unchecked异常,两者有什么区别呢? 从表象来看, checked异常就是需要在代码中try ... catch ...的异 ...

  5. Python中用dict统计列表中元素出现的次数

    01 Python增加元素,不像其他语言使用现实的操作接口,只需要dict[1]=3,如果字典中不存在1,则直接新增元素键值对(1,3),如果存在则替换键1为3. if key in dict:判断出 ...

  6. BZOJ1064 NOI2008假面舞会（dfs树）

    将图中的环的长度定义为正向边数量-反向边数量,那么答案一定是所有环的环长的共同因子.dfs一下就能找到图中的一些环,并且图中的所有环的环长都可以由这些环长加加减减得到(好像不太会证).如果有环长为1或 ...

  7. Oracle 事务实例（非理论）

     begin    begin    savepoint  p1;    ---------============   在这里写删改差语句(SELECT 不行)每句以分号结尾:如 delete ta ...

  8. java中poi进行execl导出

    首先贴出最终导出的execl截图吧: 前台界面如下: 点击导出时,为其按钮的onclick事件添加exportDate()函数: function exportDate(){ var begin_Da ...

  9. Luogu 2801 教主的魔法 | 分块模板题

    Luogu 2801 教主的魔法 | 分块模板题 我犯的错误: 有一处l打成了1,还看不出来-- 缩小块大小De完bug后忘了把块大小改回去就提交--还以为自己一定能A了-- #include < ...

  10. 51nod 1636 教育改革 | DP

    51nod 1636 教育改革 | DP 题面 最近A学校正在实施教育改革. 一个学年由n天组成.A学校有m门课程,每天学生必须学习一门课,一门课程必须在一天内学习完.在学习完第i门课程后,学生们会收 ...