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 相关文章推荐
js函数中onmousedown和onclick的区别和联系探讨
May 19 Javascript
JavaScript学习笔记之基础语法
Jan 22 Javascript
浅谈JavaScript中运算符的优先级
Jul 07 Javascript
jQuery简单入门示例之用户校验demo示例
Jul 09 Javascript
npm 下载指定版本的组件方法
May 17 Javascript
使用react render props实现倒计时的示例代码
Dec 06 Javascript
JavaScript常用工具方法封装
Feb 12 Javascript
layui下拉列表select实现可输入查找的方法
Sep 28 Javascript
微信小程序swiper使用网络图片不显示问题解决
Dec 13 Javascript
vue 调用 RESTful风格接口操作
Aug 11 Javascript
JavaScript前后端JSON使用方法教程
Nov 23 Javascript
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
原生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
PHP实现的英文名字全拼随机排号脚本
2014/07/04 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
php构造函数与析构函数
2016/04/23 PHP
php+ajax注册实时验证功能
2016/07/20 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
2012/12/16 Javascript
jquery对dom的操作常用方法整理
2013/06/25 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
2014/09/04 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
js精准的倒计时函数分享
2016/06/29 Javascript
微信小程序实现的canvas合成图片功能示例
2019/05/03 Javascript
NodeJs生成sitemap站点地图的方法示例
2019/06/11 NodeJs
[03:58]2014DOTA2国际邀请赛 龙宝赛后解密DK获胜之道
2014/07/14 DOTA
详解详解Python中writelines()方法的使用
2015/05/25 Python
Python读取一个目录下所有目录和文件的方法
2016/07/15 Python
Python编程产生非均匀随机数的几种方法代码分享
2017/12/13 Python
python实现微信每日一句自动发送给喜欢的人
2019/04/29 Python
css3的@media属性实现页面响应式布局示例代码
2014/02/10 HTML / CSS
canvas 下载二维码和图片加水印的方法
2018/03/21 HTML / CSS
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
售后服务承诺书范文
2014/03/26 职场文书
新文化运动的口号
2014/06/21 职场文书
领导班子个人对照检查剖析材料
2014/09/29 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
平安家庭事迹材料
2014/12/20 职场文书
绵山导游词
2015/02/05 职场文书
2015年校本培训工作总结
2015/07/24 职场文书
大学毕业谢师宴致辞
2015/07/27 职场文书
奖学金申请书(范文)
2019/08/14 职场文书
MySQL 查询速度慢的原因
2021/05/25 MySQL
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技
MySQL的存储函数与存储过程的区别解析
2022/04/08 MySQL
阿里云 Windows server 2019 配置FTP
2022/04/28 Servers