js实现下一页页码效果
发布于 2017-07-04 23:34:01 | 194 次阅读 | 评论: 0 | 来源: 网友投递
这里有新鲜出炉的Javascript教程，程序狗速度看过来！
JavaScript客户端脚本语言
Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。
本文主要介绍了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>以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持phperz！
推荐阅读
最新资讯