编程 Javascript

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>

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

js实现下一页页码效果

- Author -

marie0119

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Script的加载方法小结

Jan 12 Javascript

javascript 使用 NodeList需要注意的问题

Mar 04 Javascript

javascript常用方法汇总

Dec 02 Javascript

jQuery中:last选择器用法实例

Dec 30 Javascript

Bootstrap表单布局样式源代码

Jul 04 Javascript

jQuery获取复选框选中的当前行的某个字段的值

Sep 15 jQuery

jQuery中 DOM节点操作方法大全

Oct 12 jQuery

在微信小程序里使用watch和computed的方法

Aug 02 Javascript

微信小程序textarea层级过高的解决方法

Mar 04 Javascript

JavaScript中的函数申明、函数表达式、箭头函数

Dec 06 Javascript

js实现小球在页面规定的区域运动

Jun 16 Javascript

jQuery实现移动端扭蛋机抽奖

Nov 08 jQuery

原生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