jQuery实现的仿百度分页足迹效果代码

2024-03-01 20:02:47

本文实例讲述了jQuery实现的仿百度分页足迹效果代码。分享给大家供大家参考，具体如下：

这是一个类似于百度的分页足迹效果，基于jquery，原理就是所有为奇数的足迹元素给不一样的样式而已，其它的非奇数元素就按默认的样式。

参数说明：

obj为所有奇数元素
even当前所要点击触发事件
bg为足迹元素
active_bg为点击后的足迹背景

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-f-baidu-page-style-codes/

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度分页足迹</title>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<style type="text/css">
.page{padding:100px 0;zoom:1}
.page:after{content:"";display:block;height:0;clear:both;visibility:hidden;}
.page span{position:relative;margin:0 2px;border:solid 1px #ccc;float:left;}
.page span a{padding:2px 5px;cursor:pointer;}
.page span i{display:block;height:10px;width:10px;background:#ccc;border-radius:50%;position:absolute;left:50%;top:-20px;margin-left:-5px;}
.page span i.active_i{background:red;}
</style>
<script type="text/javascript">
$(document).ready(function(){
 function pageStyle(obj,even,bg,active_bg){
  /*参数说明：
  obj为所有奇数元素
  even当前所要点击触发事件
  bg为足迹元素
  active_bg为点击后的足迹背景
  作者：zoowar
  */
  $(obj).css("top","-30px");
  $(even).click(function(){
  $(this).siblings(bg).addClass(active_bg).parent().siblings().find(bg).removeClass(active_bg);
  })
 }
 pageStyle(".page i:even",".page a","i","active_i");
 })
</script>
</head>
<body>
<div class="page">
 <span><a>上一页</a></span>
 <span><a>1</a><i class="active_i"></i></span>
 <span><a>2</a><i></i></span>
 <span><a>3</a><i></i></span>
 <span><a>4</a><i></i></span>
 <span><a>5</a><i></i></span>
 <span><a>5</a><i></i></span>
 <span><a>6</a><i></i></span>
 <span><a>7</a><i></i></span>
 <span><a>8</a><i></i></span>
 <span><a>9</a><i></i></span>
 <span><a>下一页</a></span>
</div>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

使用JQuery实现的分页插件分享

一个简单的jQuery分页插件,兼容AMD规范和requireJS. /** * jQuery分页插件 * */ ;(function (factory) { if (typeof define === "function" && define.amd) { // AMD模式 define([ "jquery" ], factory); } else { // 全局模式 factory(jQuery); } }(function ($) { //定义
jquery实现的伪分页效果代码

本文实例讲述了jquery实现的伪分页效果代码.分享给大家供大家参考,具体如下: 这里介绍的jquery伪分页效果,在火狐下表现完美,IE全系列下有些问题,引入了jQuery1.7.2插件,代码里有丰富的注释,相信对学习jQuery有不小的帮助,期待大家关注. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-pic-mn-page-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W
基于jquery实现表格无刷新分页

本文实例讲解了基于jquery实现表格无刷新分页功能,分享给大家供大家参考,具体内容如下效果图: 具体代码: <html> <head> <title>面向对象的无刷新表格分页</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <link rel="stylesheet" hre
jQuery无刷新分页完整实例代码

本文实例讲述了jQuery无刷新分页实现方法.分享给大家供大家参考,具体如下: 这款jQuery分页示例,是分页经典形式,兼容性也做的好,网页上的分页代码,分享给大家. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-wsx-page-style-demo/ 具体代码如下: <!DOCTYPE html> <head> <meta http-equiv="Content-Type" conte
jQuery+Ajax实现无刷新分页

1.前台使用ajax无刷新分页,主要需要生成分页的工具条,这里使用的是jquery.pagination.js 下面贴出代码 /** * This jQuery plugin displays pagination links inside the selected elements. * * @author Gabriel Birke (birke *at* d-scribe *dot* de) * @version 1.2 * @param {int} maxentries Number o
jQuery ajax分页插件实例代码

推荐阅读:jQuery插件开发精品教程让你的jQuery提升一个台阶既然说到基于jQuery的ajax分页插件,那我们就先看看主要的代码结构:(我觉得对咱们程序员来说再优美的文字描述.介绍也比不上代码来得实在.) 1.首先定义一个pager对象: var sjPager = window.sjPager = { opts: { //默认属性 pageSize: , preText: "pre", nextText: "next", firstText: &quo
自己动手写的jquery分页控件(非常简单实用)

最近接了一个项目,其中有需求要用到jquery分页控件,上网也找到了需要分页控件,各种写法各种用法,都是很复杂,最终决定自己动手写一个jquery分页控件,全当是练练手了.写的不好,还请见谅,本分页控件在chrome测试过,其他的兼容性不知道怎么没时间测试呢.欢迎有同样需求的小伙伴采用,在使用过程发现有问题欢迎提出批评建议. css: @charset "utf-"; * { margin:px; padding:px; font-family:"微软雅黑"; fo
jquery ajax分页插件的简单实现

说到基于jQuery的ajax分页插件,那我们就先看看主要的代码结构: 1.首先定义一个pager对象: var sjPager = window.sjPager = { opts: { //默认属性 pageSize: 10, preText: "pre", nextText: "next", firstText: "First", lastText: "Last", shiftingLeft: 3, shiftingRig
jQuery simplePage+AJAX plus分页插件用法实例

本文实例讲述了jQuery simplePage+AJAX plus分页插件.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q
基于jQuery实现的无刷新表格分页实例

本文实例讲述了基于jQuery实现的无刷新表格分页.分享给大家供大家参考,具体如下: 效果图如下: html结构: <table id="cs_table" class="datatable"></table> css样式: html,body{margin: 0;padding:0} a:focus {outline: none;} /* 通用表格显示 */ table, th, td {font: 12px Arial,Helvetica
jQuery实现伪分页的方法分享

本文实例讲述了jQuery实现伪分页的方法.分享给大家供大家参考,具体如下: 可以对表格数据进行伪分页,而且只需要执行简单的代码就可以实现. 实现的很简单.样式也不太好看,大家可以自行调整,纠正. 下面是一个table,tbody里加载tr数据,无论你怎么加载, 在数据加载完成后便可以对table数据进行伪分页.注意div引用的class,我填充的数据是四列的,所以td里加了colspan,div是分页显示区域 <table> <tbody id="dialog-items&q

jQuery实现的仿百度分页足迹效果代码

相关推荐

随机推荐