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. 微信小程序倒计时实现

    思路:跟一般js倒计时一样,主要在于this的变相传递. 实现效果: wxml文件部分代码: common.js文件 : 引用页JS文件: PS: 1.在data里初始化时间格式,是避免时间加载的第1 ...

  2. 关于 WinScp 的一点使用经验

    在嵌入式平台下 是,使用SSH登陆,可以使用WinScp提供的图形界面,支持拖拽,鼠标直接打开,甚是好用. 使用WinScp 登陆的方式有,Scp和sftp两种,之前一只用scp,但后来出现了如下错误 ...

  3. ASP.NET MVC 模型绑定

    模型绑定指的是MVC从浏览器发送的HTTP请求中为我们创建.NET对象,在HTTP请求和C#间起着桥梁的作用.模型绑定的一个最简单的例子是带参数的控制器action方法,比如我们注册这样的路径映射: ...

  4. [BZOJ3295][Cqoi2011]动态逆序对 CDQ分治&树套树

    3295: [Cqoi2011]动态逆序对 Time Limit: 10 Sec  Memory Limit: 128 MB Description 对于序列A,它的逆序对数定义为满足i<j,且 ...

  5. win10远程连接

    提示凭证不工作问题 https://blog.csdn.net/sinat_25926481/article/details/50775616

  6. Linux内核设计与实现第十周读书笔记

    第十七章 设备与模块 关于设备驱动与设备管理,我们讨论四种内核成分. 设备类型 模块 内核对象 sysfs 17.1设备类型 在Linux以及所有Unix系统中,设备被分为以下三种类型: 块设备,块设 ...

  7. Java之字节数组和字符串的转换问题

    今天在使用字节流复制图片的时候发现一个问题,就是将字节数组转化为字符串的时候会出现长度不同的问题.这其实是个错误的操作. public static void main(String[] args) ...

  8. Android Studio下“Error:Could not find com.android.tools.build:gradle:2.2.1”的解决方法

    ref from: Android Studio下“Error:Could not find com.android.tools.build:gradle:2.2.1”的解决方法http://blog ...

  9. 20170520 DP阶段总结

    DP的力量不是无穷的. 但是,因为它叫做“动态规划”,它在OI界如鱼得水.这个“动态”不是指“离线”与“在线”,也不是什么“可持久化”.它只是把问题抽象为一个个“阶段”,在每一个“阶段”中作出或繁或简 ...

  10. 【位运算】判断一个数是否为2的n次方

    import java.util.Scanner; /** * 功能:用位运算,判断一个数是否为2的n次方. * 思路:用1做移位操作,然后判断移位后的值是否与给定的数相同. */ public cl ...