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代码实现table数据分页效果，包括了JS代码实现table数据分页效果的使用技巧和注意事项，需要的朋友参考一下 第一个：实现的很常见很简单的显示页数翻页 效果图： •这是HTML代码，很简单滴（我好像看到了被嫌弃的小眼神） •下面就是JS代码了 第二个：实现前进页和后退页 效果图： •这是全部代码，用得原生JS，依然还是很简单滴（好像对原生js有种莫名的喜
-
整个页面有2个部分， 第一部分如上图蓝色标注，蓝色部分高度大于浏览器高度， 滑动蓝色部分往上，当蓝色部分的底部和浏览器的底部的保持一致高度的时候， 希望蓝色部分固定住，类似sticky的效果， 继续滑动页面往上，白色部分会直接往上走，盖在蓝色部分往上滑动， 请问下这个效果有什么关键字吗
-
本文向大家介绍JS实现标签页切换效果，包括了JS实现标签页切换效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了JS标签页切换的具体代码，供大家参考，具体内容如下 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍JS基于Ajax实现的网页Loading效果代码，包括了JS基于Ajax实现的网页Loading效果代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS基于Ajax实现的网页Loading效果代码。分享给大家供大家参考，具体如下： 这是一款很不错的网页Loading效果，常用于Ajax交互式网页设计中，点击按钮即可弹出Loading框，若Loading框未加载完成时关闭网
-
本文向大家介绍20行JS代码实现网页刮刮乐效果，包括了20行JS代码实现网页刮刮乐效果的使用技巧和注意事项，需要的朋友参考一下 分享一段用canvas和JS制作刮刮乐的代码，JS部分去掉注释不到20行代码 效果如下 盖伦.jpg 刮刮乐.gif HTML部分 没什么要特别注意的 为了效果加了些CSS样式 CSS部分 注意 1.为了清除浏览器自带效果加了 2.img需要在灰布下面,加了z-index
-
本文向大家介绍layui分页效果实现代码，包括了layui分页效果实现代码的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了layui分页效果的具体代码，供大家参考，具体内容如下 效果图： 官网分页 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。