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 按位左移运算符使用介绍(
Feb 04 Javascript
通过Javascript读取本地Excel文件内容的代码示例
Apr 08 Javascript
jquery实现textarea输入框限制字数的方法
Jan 15 Javascript
javascript正则表达式中的replace方法详解
Apr 20 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
Jun 29 Javascript
js实现的黑背景灰色二级导航菜单效果代码
Aug 24 Javascript
JS组件Bootstrap Table使用实例分享
May 30 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
Jan 23 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
Jul 02 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
Jun 13 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
Jun 25 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
Aug 30 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实现文件下载(支持中文文名)
2013/12/04 PHP
Zend Framework生成验证码并实现验证码验证功能(附demo源码下载)
2016/03/22 PHP
PHP入门教程之字符串处理技巧总结(转换,过滤,解析,查找,截取,替换等)
2016/09/11 PHP
JavaScript包装对象使用介绍
2013/08/29 Javascript
Jquery动态添加输入框的方法
2015/05/29 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
2016/07/22 Javascript
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
jQuery插件实现可输入和自动匹配的下拉框
2016/10/24 Javascript
js初始化验证实例详解
2016/11/26 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
详解JavaScript树结构
2017/01/09 Javascript
微信小程序之picker日期和时间选择器
2017/02/09 Javascript
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
AngualrJs清除定时器遇到的坑
2017/10/13 Javascript
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
vue 基于element-ui 分页组件封装的实例代码
2018/12/10 Javascript
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
vue解决使用$http获取数据时报错的问题
2019/10/30 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
python和shell实现的校验IP地址合法性脚本分享
2014/10/23 Python
Windows下PyMongo下载及安装教程
2015/04/27 Python
更改Ubuntu默认python版本的两种方法python-&gt; Anaconda
2016/12/18 Python
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
python读取和保存视频文件
2018/04/16 Python
python 在sql语句中使用%s,%d,%f说明
2020/06/06 Python
python3中celery异步框架简单使用+守护进程方式启动
2021/01/20 Python
捷克钓鱼用品网上商店:Parys.cz
2018/06/15 全球购物
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
驾驶员岗位职责
2014/01/29 职场文书
语文教学随笔感言
2014/02/18 职场文书
捐赠仪式主持词
2014/03/19 职场文书
大学生村官承诺书
2014/03/28 职场文书
小学向国旗敬礼活动方案
2014/09/27 职场文书
CSS3通过var()和calc()函数实现动画特效
2021/03/30 HTML / CSS
windows11怎么查看wifi密码? win11查看wifi密码的技巧
2021/11/21 数码科技
Redis keys命令的具体使用
2022/06/05 Redis