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. sql中exists和not exists的用法

    该文转载自:http://www.cnblogs.com/mytechblog/articles/2105785.html sql中exists,not exists的用法 exists : 强调的是 ...

  2. 用vue实现省市县三级联动

    我真的没想到这个会困扰到我.最开始以为,不就是直接找个简单的插件就实现了吗,jquery插件找了几个,都没有达到目的. 需求是这样的: 点击input框,弹出一个popup,然后可以滚动选择省,市,县 ...

  3. Load generator连接失败的解决办法！（转）

    环境:1.loadrunner control 一台物理机(win2008r2) 2.loadrunner agent 两台物理机(win2008r2) 问题:loadrunner control 连 ...

  4. 通过session 怎么防止表单的重复提交!

    1.在提交表单的时候使用隐藏域: String tokenValue=new Date().getTime(); <input type="hidden" name=&quo ...

  5. APP接口

    <?phpClass Response{ /*** 返回json数据* @param $code 状态码* @param $message 描述信息* @param $data 数据* @par ...

  6. （转）关于ES6的 模块功能 Module 中export import的用法和注意之处

    关于ES6的 模块功能 Module 中export import的用法和注意之处 export default 的用法 export default命令用于指定模块的默认输出.显然,一个模块只能有一 ...

  7. 【uoj#213】[UNR #1]争夺圣杯 单调栈+差分

    题目描述 给出一个长度为 $n$ 的序列,对于 $1\sim n$ 的每一个数 $i$ ,求这个序列所有长度为 $i$ 的子区间的最大值之和,输出每一个 $i$ 的答案模 $998244353$ 后异 ...

  8. Python语言算法的时间复杂度和空间复杂度

    算法复杂度分为时间复杂度和空间复杂度. 其作用: 时间复杂度是指执行算法所需要的计算工作量: 而空间复杂度是指执行这个算法所需要的内存空间. (算法的复杂性体现在运行该算法时的计算机所需资源的多少上, ...

  9. Eclipse中设置新创建文件的默认编码格式

    window-prefenences-web-jsp(或者是其他文件格式,里面是一个列表) 找到之后点击,在右侧区域中选择encoding进行修改即可,然后应用,OK

  10. Eclipse中设置作者、日期等的方式

    1.点击Windows->Preferences->Java->Code Style->Code Templates: 2.点击展开右侧的Comments选项卡,里面的选项对应 ...