前端开发javaScript分页效果
摘要： 前端开发浏览器的兼容性 前端开发 浏览器 前端开发要注意的浏览器兼容性 html 代码 <html> <head> <style> * { padding: 0; ……
| 前端开发浏览器的兼容性 |
| 前端开发 浏览器 |
| 前端开发要注意的浏览器兼容性 |
html 代码
<html>
<head>
<style>
* {
padding: 0;
margin: 0;
}
ul,
li {
list-style: none;
}
.left {
float: left;
}
.right {
float: left;
}
.page_container {
height: 30px;
line-height: 30px;
width: 510px;
overflow: hidden;
text-align: center;
padding: 30px 0;
color: #757575;
}
.page_num_container {
width: 301px;
margin: 0 10px;
border: 1px solid #ccc;
border-right: 0;
box-sizing: border-box;
overflow: hidden;
position: relative;
height: 32px;
}
.page_num_container ul {
position: absolute;
top: 0;
}
.page_num_container ul li {
float: left;
width: 30px;
border-right: 1px solid #ccc;
box-sizing: border-box;
text-align: center;
cursor: pointer;
}
.page_num_container ul li:hover,
.page_num_container ul li.active {
background: #f4a100;
color: #fff;
}
.page_btn {
width: 60px;
border: 1px solid #ccc;
box-sizing: border-box;
cursor: pointer;
}
.page_btn:hover {
background: #f4a100;
color: #fff;
}
.all_page:hover {
background: none;
color: #757575;
}
.prev_btn {
margin-right: 10px;
}
</style>
</head>
<body>
<!– 页码 –>
<div class=”page_container center”>
<div class=”page_btn prev_page left”>上一页</div>
<div class=”page_num_container left” id=”page_num_container”>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
</ul>
</div>
<div class=”page_btn next_page left”>下一页</div>
<div class=”page_btn all_page right”>共21页</div>
</div>
<!– 页码 –>
<script>
function page() {
var contain = $(“.page_num_container”);
var ul = contain.children(“ul”);
var li = ul.children(“li”);
var length = li.length;
var index = 0;
var leftIndex = 0;
var prev_btn = contain.siblings(“.prev_page”);
var next_btn = contain.siblings(“.next_page “);
ul.css(“width”, li.outerWidth() * length);
change_page(index);
function change_page(eqindex) {
if (eqindex < 0)
{
index = 0;
}
else if (eqindex >= length) {
index = length – 1;
}
if (index – 4 <= 0) {
leftIndex = 0;
}
else if (index > length – 10)
{
leftIndex = Math.ceil(length / 2);
}
else {
leftIndex = index – 4;
}
ul.animate({ “left”: “-” + leftIndex * li.outerWidth() + “px” }, 200);
li.eq(index).addClass(“active”).siblings(li).removeClass(“active”);
}
prev_btn.click(function () {
index = index – 1;
change_page(index);
}) < br />
next_btn.click(function () {
index = index + 1;
change_page(index);
}) < br />
li.click(function () {
index = $(this).index();
change_page(index);
}) < br />
}
page() < br />
</script>
</body>
</html>
| 前端开发浏览器兼容集合 |
| 前端开发那个浏览器兼容性好 |
| 浏览器 前端开发 |
» 本文来自：前端开发者 » 《前端开发javaScript分页效果》
» 本文链接地址：https://www.rokub.com/6856.html
» 您也可以订阅本站：https://www.rokub.com
近期评论