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. AG-Admin微服务框架入门

    AG-Admin微服务框架入门  @qq群:一群: 837736451  二群 169824183 一 概要介绍 AG-Admin后台地址:https://gitee.com/minull/ace-s ...

  2. 搭建企业级Docker Registry -- Harbor

    Harbor 是一个企业级的 Docker Registry,可以实现 images 的私有存储和日志统计权限控制等功能,并支持创建多项目(Harbor 提出的概念),基于官方 Registry V2 ...

  3. 如何获取app的activity

    (一) 本机安装appium的环境后,在cmd中输入:adb logcat>D:/log.log (二)真题连接电脑或在虚拟机中启动被测试app (三)直接查看d盘的log.log即可从来里面找 ...

  4. log4j2分析总结（一）

    现在公司用log4j2 进行日志记录,我也看了相关的资料,现在进行记录学习总结下 整体结构 Appenders里设置日志的输出方式.级别和格式 Loggers里设置全局的级别和绑定appenders里 ...

  5. delphi手动创建dataset并插入值

    unit Unit1; interface uses  Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, Syste ...

  6. springboot学习笔记-2 一些常用的配置以及整合mybatis

    一.一些常用的配置 1.1 使用没有父POM的springboot 通过添加scope=import的依赖,仍然能获取到依赖管理的好处: <dependencyManagement> &l ...

  7. Luogu4884 多少个1？（BSGS）

    11……1(n个)=99……9(n个)/9=(10n-1)/9. 那么显然就是求离散对数了,BSGS即可. #include<iostream> #include<cstdio> ...

  8. 学习Spring Boot：（六） 集成Swagger2

    前言 Swagger是用来描述和文档化RESTful API的一个项目.Swagger Spec是一套规范,定义了该如何去描述一个RESTful API.类似的项目还有RAML.API Bluepri ...

  9. Nginx web服务优化 （一）

    1.Nginx基本安全优化 a.更改配置文件参数隐藏版本 编辑nginx.conf配置文件增加参数,实现隐藏Nginx版本号的方式如下.在nginx配置文件nginx.conf中的http标签段内加入 ...

  10. Android Layout_weight 属性

    Android 对Layout_weight属性完全解析以及使用ListView来实现表格http://blog.csdn.net/xiaanming/article/details/13630837 ...