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中null与undefined分析
Jul 25 Javascript
解决jquery .ajax 在IE下卡死问题的解决方法
Oct 26 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
Aug 23 Javascript
查看图片(前进后退)功能实现js代码
Apr 24 Javascript
顶部缓冲下拉菜单导航特效的JS代码
Aug 27 Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 Javascript
使用BootStrap进行轮播图的制作
Jan 06 Javascript
详解JavaScript RegExp对象
Feb 04 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
Oct 26 Javascript
webpack4 从零学习常用配置(小结)
May 28 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
vue/cli 配置动态代理无需重启服务的方法
May 20 Vue.js
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
中英文字符串翻转函数
2008/12/09 PHP
关于PHP内存溢出问题的解决方法
2013/06/25 PHP
PHP实现将浏览历史页面网址保存到cookie的方法
2015/01/26 PHP
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
Jquery中getJSON在asp.net中的使用说明
2011/03/10 Javascript
JavaScript使用cookie实现记住账号密码功能
2015/04/27 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
2016/03/05 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
2016/08/29 Javascript
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
浅析Node.js:DNS模块的使用
2016/11/23 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
JS ES6中setTimeout函数的执行上下文示例
2017/04/27 Javascript
Three.js基础学习教程
2017/11/16 Javascript
微信网页授权并获取用户信息的方法
2018/07/30 Javascript
NodeJS 将文件夹按照存放路径变成一个对应的JSON的方法
2018/10/17 NodeJs
vue拖拽组件使用方法详解
2018/12/01 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
[48:31]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第一场 2月2日
2021/03/11 DOTA
Python中使用MELIAE分析程序内存占用实例
2015/02/18 Python
Python并行分布式框架Celery详解
2018/10/15 Python
Python实现常见的回文字符串算法
2018/11/14 Python
python爬虫项目设置一个中断重连的程序的实现
2019/07/26 Python
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
标签和贴纸印刷:Lightning Labels
2018/03/22 全球购物
烹调加工管理制度
2014/02/04 职场文书
化工工艺设计求职信
2014/06/25 职场文书
2014年作风建设剖析材料
2014/10/23 职场文书
学校2015年纠风工作总结
2015/05/15 职场文书
小型婚礼主持词
2015/06/30 职场文书
幼儿园2016年圣诞活动总结
2016/03/31 职场文书
MySQL查看表和清空表的常用命令总结
2021/05/26 MySQL
总结几个非常实用的Python库
2021/06/26 Python