js实现下一页页码效果


Posted in Javascript onMarch 07, 2017

效果图:

js实现下一页页码效果

代码如下:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title></title>
 <style>
  *{
  margin: 0;
  padding: 0;
  }
  .scroll-tool{
  position: relative;
  height: 56px;
  padding: 12px 160px;
  background-color: #f9f9f9;
  }
  .st-con{
  font-size: 14px;
  line-height: 30px;
  text-align: center;
  padding: 12px 0;
  width: 680px;
  margin: 0 auto;
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
  }
  .st-con .img-page{
  font-size: 0;
  }
  a{
  text-decoration: none;
  }
  .st-con a.selected{
  background-color: #d3a12a;
  }
  .st-con a{
  font-size: 14px;
  display: inline-block;
  width: 30px;
  height: 30px;
  color: #fff;
  border-radius: 3px;
  background-color: #44c6ea;
  margin: 0 5px;
  }
  html,body{
  background: #f0f0f0;
  font: 14px/2 "微软雅黑";
  }
  header{
  width: 680px;
  height: 50px;
  margin: 50px auto;
  }
  header div{
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 30px;
  color: #999;
  }
 </style>
 </head>
 <body>
 <header>
  <div>
  简约下一页页码效果
  </div>
 </header>
 <div class="scroll-tool">
  <div class="st-con">
  <div class="img-page">
   <a href="javacript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="selected"><span>1</span></a>
   <a href="javacript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>2</span></a>
   <a href="javacript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>3</span></a>
   <a href="javacript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>4</span></a>
                    <a href="javacript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>5</span></a>
      <a href="javacript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>6</span></a>
  </div>
  </div>
 </div>
 <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
 <script>
  $(function(){
  $('.img-page a').on('click',function(){
   $(this).addClass('selected').siblings('a').removeClass('selected');
  })
  })
 </script>
 </body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
FileUpload上传图片(图片不变形)
Aug 05 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
Nov 07 Javascript
jQuery中get和post方法传值测试及注意事项
Aug 08 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
Sep 19 Javascript
JavaScript排序算法动画演示效果的实现方法
Oct 18 Javascript
浅谈Angular.js中使用$watch监听模型变化
Jan 10 Javascript
静态页面实现 include 引入公用代码的示例
Sep 25 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
Dec 22 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
Nov 28 Javascript
vue实现文字加密功能
Sep 27 Javascript
vue 路由守卫(导航守卫)及其具体使用
Feb 25 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
Sep 16 Javascript
原生JS中slice()方法和splice()区别
Mar 06 #Javascript
浅析vue component 组件使用
Mar 06 #Javascript
js常用的继承--组合式继承
Mar 06 #Javascript
VUE开发一个图片轮播的组件示例代码
Mar 06 #Javascript
canvas仿iwatch时钟效果
Mar 06 #Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 #Javascript
纯JS实现弹性导航条效果
Mar 06 #Javascript
You might like
注意:php5.4删除了session_unregister函数
2013/08/05 PHP
PHP内核探索:变量概述
2014/01/30 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
php注册和登录界面的实现案例(推荐)
2016/10/24 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
2007/11/30 Javascript
jquery 表单下所有元素的隐藏
2009/07/25 Javascript
jQuery 标题的自动翻转实现代码
2009/10/14 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
2012/12/21 Javascript
使用jquery中height()方法获取各种高度大全
2014/04/02 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
2014/10/29 Javascript
Angular中的Promise对象($q介绍)
2015/03/03 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
JavaScript中数据类型转换总结
2016/12/25 Javascript
原生JS实现不断变化的标签
2017/05/22 Javascript
对angularjs框架下controller间的传值方法详解
2018/10/08 Javascript
微信运维交互机器人的示例代码
2018/11/12 Javascript
JS基于开关思想实现的数组去重功能【案例】
2019/02/18 Javascript
jQuery分组选择器简单用法示例
2019/04/04 jQuery
vue视频播放插件vue-video-player的具体使用方法
2019/11/08 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
2020/11/02 Javascript
Python双精度浮点数运算并分行显示操作示例
2017/07/21 Python
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
python tkinter实现彩球碰撞屏保
2019/07/30 Python
python 发送get请求接口详解
2020/11/17 Python
End Clothing美国站:英国男士潮牌商城
2018/04/20 全球购物
程序员经常用到的UNIX命令
2015/04/13 面试题
大学生专科毕业生自我评价
2013/11/17 职场文书
运动会开幕式主持词
2014/03/28 职场文书
设计顾问服务计划书
2014/05/04 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
毕业答辩开场白范文
2015/05/27 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书
Spring依赖注入多种类型数据的示例代码
2022/03/31 Java/Android
Nginx如何限制IP访问只允许特定域名访问
2022/07/23 Servers