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. mybati内sql查询语句在两个日期内

    装载自: http://blog.csdn.net/u010442302/article/details/72902441?locationNum=9&fps=1   <select i ...

  2. ORA-06530: 引用未初始化的组合 ;

    select * FROM TABLE(fun_test_1) : ORA-06530: 引用未初始化的组合ORA-06512: 在 "PCISS.FUN_TEST_1", lin ...

  3. scrapy 直接在编辑器运行

    # *_*coding:utf-8 *_* from scrapy.cmdline import execute execute("scrapy crawl spbeen --nolog&q ...

  4. [转帖] 中国SaaS死或生之二: ERP两大邪术，尽出歪门邪路 ---- 挺好玩的

    中国SaaS死或生之二: ERP两大邪术,尽出歪门邪路   http://www.cniteyes.com/archives/33753   文章摘要:在数字化浪潮中,油腻ERP大叔的那些“歪门邪术” ...

  5. 安装Zookeeper出现Unable to start AdminServer，existing abnormally问题解决方法

    问题如下: 出现这个问题主要是由于8080端口占用,可在zoo.cfg中增加admin.serverPort=没有被占用的端口号解决问题.

  6. 01.基于IDEA+Spring+Maven搭建测试项目--综述

    目前公司的测试工作中常见两种接口:HTTP和Dubbo,这两种接口类型均可以使用相关测试工具进行测试,但都会有一定的局限性和不便之处,具体如下: 1.HTTP接口,当需要对于参数进行加密解密时,就得对 ...

  7. 查看MySQL最近执行的语句

    首先登入MySQL. Reading table information for completion of table and column names You can turn off this ...

  8. Discrete Square Roots UVALive - 4270（拓展欧几里得）

    a≡b(mod n)的含义是“a和b除以n的余数相同”,其充要条件是“a-b是n的整数倍”: 求所有满足条件r^2=x(mod m)的r 题目已经给定了一个初始的r,x,m #include < ...

  9. UIScrollView浏览一组图片，且图片与图片之间有间隔

    ---恢复内容开始--- UIScrollView是可以浏览一组view的,只要将其属性 pagingEnabled设置为true就可以了.具体过程是这样的, 1:将一组图片按照从左到右的顺序添加到U ...

  10. Spring点滴一：Spring Ioc 容器

    Spring 容器: Spring 容器是Spring框架的核心.Spring容器将创建Bean对象实例,把它们联系在一起,配置它们,并管理它们整个生命周期从创建到销毁.Spring 容器通过依赖注入 ...