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


Posted in Javascript onOctober 30, 2015

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

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

参数说明:

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 指导方针
Apr 05 Javascript
javascript 打印内容方法小结
Nov 04 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
Mar 28 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
Sep 29 Javascript
jQuery学习笔记 更改jQuery对象
Sep 19 Javascript
使用js判断TextBox控件值改变然后出发事件
Mar 07 Javascript
加随机数引入脚本不让浏览器读取缓存
Sep 04 Javascript
JavaScript设计模式学习之“类式继承”
Mar 12 Javascript
JavaScript与ActionScript3两者的同性与差异性
Sep 22 Javascript
canvas滤镜效果实现代码
Feb 06 Javascript
vue路由跳转传参数的方法
May 06 Javascript
原生JS实现微信通讯录
Jun 18 Javascript
JavaScript获取function所有参数名的方法
Oct 30 #Javascript
jQuery实现瀑布流布局详解(PC和移动端)
Sep 01 #Javascript
jQuery实现切换页面过渡动画效果
Oct 29 #Javascript
js实现跨域的4种实用方法原理分析
Oct 29 #Javascript
异步JS框架的作用以及实现方法
Oct 29 #Javascript
图解JavaScript中的this关键字
May 28 #Javascript
jquery validate demo 基础
Oct 29 #Javascript
You might like
PHP生成带有雪花背景的验证码
2006/10/09 PHP
PHP parse_url 一个好用的函数
2009/10/03 PHP
php+mysql 实现身份验证代码
2010/03/24 PHP
解决在laravel中auth建立时候遇到的问题
2019/10/15 PHP
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
js调试工具Console命令详解
2014/10/21 Javascript
JS实现可调整倒计时间代码分享
2015/08/18 Javascript
Javascript之Date对象详解
2016/06/07 Javascript
javascript数组定义的几种方法
2017/10/06 Javascript
详解微信小程序input标签正则初体验
2018/08/18 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
JS实现数组深拷贝的方法分析
2019/03/06 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
2019/11/13 Javascript
js实现的订阅发布者模式简单示例
2020/03/14 Javascript
深入浅析JavaScript中的in关键字和for-in循环
2020/04/20 Javascript
Python设计模式之抽象工厂模式
2016/08/25 Python
Python实现基于二叉树存储结构的堆排序算法示例
2017/12/08 Python
Python实现修改IE注册表功能示例
2018/05/10 Python
浅谈flask源码之请求过程
2018/07/26 Python
Python单元和文档测试实例详解
2019/04/11 Python
Python的互斥锁与信号量详解
2019/09/12 Python
Java多线程实现四种方式原理详解
2020/06/02 Python
python软件都是免费的吗
2020/06/18 Python
编译 pycaffe时报错:fatal error: numpy/arrayobject.h没有那个文件或目录
2020/11/29 Python
Python实现Word文档转换Markdown的示例
2020/12/22 Python
Python爬虫回测股票的实例讲解
2021/01/22 Python
美国购买和销售礼品卡平台:Raise
2017/01/13 全球购物
COACH德国官方网站:纽约现代奢侈品牌,1941年
2018/06/09 全球购物
世界排名第一的万圣节服装店:Spirit Halloween
2018/10/16 全球购物
缓解脚、腿和背部疼痛:Z-CoiL鞋
2019/03/12 全球购物
乌克兰在线药房:Аптека24
2019/10/30 全球购物
西班牙在线光学:Visual-Click
2020/06/22 全球购物
远程教育心得体会
2014/01/03 职场文书
班级管理经验交流材料
2015/11/02 职场文书
JavaScript分页组件使用方法详解
2021/07/26 Javascript