原生JS实现酷炫分页效果
本文实例为大家分享一个如下效果的JS分页特效，是不是很酷炫。
以下是代码实现：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS实现酷炫分页</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
#ul1 {
width: 600px;
height: 250px;
}
#ul1 li {
width: 100px;
height: 100px;
background: red;
float: left;
overflow: hidden;
margin: 10px;
}
a {
margin: 5px;
}
</style>
<!-- 引入运动函数 -->
<script type="text/javascript" src="js/move.js"></script>
<script>
window.onload = function () {
var json = {
title: [
'效果1',
'效果2',
'效果3',
'效果4',
'效果5',
'效果6',
'效果7',
'效果8',
'效果9',
'效果10',
'效果11',
'效果12',
'效果13',
'效果14',
'效果15',
'效果16',
'效果17',
'效果18',
'效果19',
'效果20',
'效果21',
'效果22',
'效果23',
'效果24',
'效果25',
'效果26',
'效果27',
'效果28',
'效果29',
'效果30',
'效果31',
'效果32',
'效果33',
'效果34'
]
};
//建立数组，存储布局坐标
var arr = [];
//从最后一个li开始运动，下标为9
var iNow = 9;
page({
id: 'div1',
nowNum: 1,
//计算总页数，除以10并向上取整
allNum: Math.ceil(json.title.length / 10),
callBack: function (now, all) {
//如果当前页乘以10小于json.title.length，加载10条
//如果当前页乘以10大于json.title.length, 加载本例中剩于的4条
var num = now * 10 < json.title.length ? 10 : json.title.length - (now - 1) * 10;
//获取ul
var oUl = document.getElementById('ul1');
//获取li
var aLi = oUl.getElementsByTagName('li');
//如果不前ul里面的的内容为空
if (oUl.innerHTML == '') {
//循环num次
for (var i = 0; i < num; i++) {
//创建li
var oLi = document.createElement('li');
//设置li的内容，如果now为0，那么[(now-1)*10 + i]从第1个分配内容
//设置li的内容，如果now为1，那么[(now-1)*10 + i]从第11个分配内容
oLi.innerHTML = json.title[(now - 1) * 10 + i];
//将li添加到ul中
oUl.appendChild(oLi);
}
//循环遍历
for (var i = 0; i < aLi.length; i++) {
//向arr中压入每个li的left和top值
arr.push([aLi[i].offsetLeft, aLi[i].offsetTop]);
}
//循环遍历
for (var i = 0; i < aLi.length; i++) {
//修改每个li的定位为绝对定位
aLi[i].style.position = 'absolute';
//重新分配left的值
aLi[i].style.left = arr[i][0] + 'px';
//重新分配top的值
aLi[i].style.top = arr[i][1] + 'px';
//把影响定位的margin值归0
aLi[i].style.margin = 0;
}
} else {
//设置定时器，依次执行每个效果的动画
var timer = setInterval(function () {
//执行move.js中的strartMove函数,从下标为iNow的li开始，修改left/top/opacity值
startMove(aLi[iNow], { left: 200, top: 250, opacity: 0 });
//当运动的li为最后一个时
if (iNow == 0) {
//清除定时器
clearInterval(timer);
//iNow下标值为当前加载数量减1,本例中加载10条为9，加载4条为3
iNow = num - 1;
//点击标签页时，更换显示内容
for (var i = 0; i < num; i++) {
aLi[i].innerHTML = json.title[(now - 1) * 10 + i];
}
//设置弹出的定时器
var timer2 = setInterval(function () {
//执行move.js中的strartMove函数,从下标为iNow的li开始
//将每个li的属性值还原到第一次运动前存储的值
startMove(aLi[iNow], { left: arr[iNow][0], top: arr[iNow][1], opacity: 100 });
//当运动的li为最后一个时
if (iNow == 0) {
//清除定时器
clearInterval(timer2);
//iNow下标值为当前加载数量减1,本例中加载10条为9，加载4条为3
iNow = num - 1;
} else {
//iNow递减，依次执行
iNow--;
}
}, 100);
} else {
//iNow递减，依次执行
iNow--;
}
}, 100);
}
}
});
};
function page(opt) {
if (!opt.id) { return false };
var obj = document.getElementById(opt.id);
var nowNum = opt.nowNum || 1;
var allNum = opt.allNum || 5;
var callBack = opt.callBack || function () { };
if (nowNum >= 4 && allNum >= 6) {
var oA = document.createElement('a');
oA.href = '#1';
oA.innerHTML = '首页';
obj.appendChild(oA);
}
if (nowNum >= 2) {
var oA = document.createElement('a');
oA.href = '#' + (nowNum - 1);
oA.innerHTML = '上一页';
obj.appendChild(oA);
}
if (allNum <= 5) {
for (var i = 1; i <= allNum; i++) {
var oA = document.createElement('a');
oA.href = '#' + i;
if (nowNum == i) {
oA.innerHTML = i;
} else {
oA.innerHTML = '[' + i + ']';
}
obj.appendChild(oA);
}
} else {
for (var i = 1; i <= 5; i++) {
var oA = document.createElement('a');
if (nowNum == 1 || nowNum == 2) {
oA.href = '#' + i;
if (nowNum == i) {
oA.innerHTML = i;
} else {
oA.innerHTML = '[' + i + ']';
}
} else if ((allNum - nowNum) == 0 || (allNum - nowNum) == 1) {
oA.href = '#' + (allNum - 5 + i);
if ((allNum - nowNum) == 0 && i == 5) {
oA.innerHTML = (allNum - 5 + i);
} else if ((allNum - nowNum) == 1 && i == 4) {
oA.innerHTML = (allNum - 5 + i);
} else {
oA.innerHTML = '[' + (allNum - 5 + i) + ']';
}
} else {
oA.href = '#' + (nowNum - 3 + i);
if (i == 3) {
oA.innerHTML = (nowNum - 3 + i);
} else {
oA.innerHTML = '[' + (nowNum - 3 + i) + ']';
}
}
obj.appendChild(oA);
}
}
if ((allNum - nowNum) >= 1) {
var oA = document.createElement('a');
oA.href = '#' + (nowNum + 1);
oA.innerHTML = '下一页';
obj.appendChild(oA);
}
if ((allNum - nowNum) >= 3 && allNum >= 6) {
var oA = document.createElement('a');
oA.href = '#' + allNum;
oA.innerHTML = '尾页';
obj.appendChild(oA);
}
callBack(nowNum, allNum);
var aA = obj.getElementsByTagName('a');
for (var i = 0; i < aA.length; i++) {
aA[i].onclick = function () {
var nowNum = parseInt(this.getAttribute('href').substring(1));
obj.innerHTML = '';
page({
id: opt.id,
nowNum: nowNum,
allNum: allNum,
callBack: callBack
});
return false;
};
}
}
</script>
</head>
<body>
<ul id="ul1"></ul>
<div id="div1"></div>
</body>
</html>
引入的运动函数代码：
function startMove(obj, json, endFn) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var bBtn = true;
for (var attr in json) {
var iCur = 0;
if (attr == 'opacity') {
if (Math.round(parseFloat(getStyle(obj, attr)) * 100) == 0) {
iCur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else {
iCur = Math.round(parseFloat(getStyle(obj, attr)) * 100) || 100;
}
} else {
iCur = parseInt(getStyle(obj, attr)) || 0;
}
var iSpeed = (json[attr] - iCur) / 3;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (iCur != json[attr]) {
bBtn = false;
}
if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')';
obj.style.opacity = (iCur + iSpeed) / 100;
} else {
obj.style[attr] = iCur + iSpeed + 'px';
}
}
if (bBtn) {
clearInterval(obj.timer);
if (endFn) {
endFn.call(obj);
}
}
}, 30);
}
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
}
else {
return getComputedStyle(obj, false)[attr];
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
纯js分页代码(简洁实用)
复制代码 代码如下: //每页显示字数PageSize=5000;//分页模式flag=2;//1:根据字数自动分页 2:根据[NextPage]分页//默认页startpage = 1;//导航显示样式 0:常规 1:直接 3:下拉TopShowStyle = 1;DownShowStyle = 0; var currentSet,CutFlag,TotalByte,PageCount,key,tempText,tempPage; key=""; currentSet=0; var
-
js实现简单的前端分页效果
有些项目业务比较简单,但用到前端分页的地方又比较多,插件的体积比较难控制用起来也麻烦,所以自己写一个简易的. 实现思路 通过 jQuery.slice()选择子集的区间元素, 然后控制显示隐藏来实现: 假设每页显示数量为x,当前页码为y,元素索引从0开始,那么显示的区间即为 x(y-1) 到 xy. 效果演示 demo代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U
-
jsp分页显示的实现代码
最近这几天在做JSP留言板设计的过程中,遇到了一个问题.先看一张截图: 这是随便在一个新闻的留言页面截的图,假如留言条数太多,那整个页面得排好长好长,这就直接给用户造成了麻烦.不舒服的感受,所以,解决这个问题,通常采用分页显示的方法. 要把页面显示方式设计成这样的方式,通常需要用到这几个基本变量:pageSize(每个页面所显示的记录数).pageCount(一共有多少个页面).showPage(目前显示第几页).recordCount(总的记录数),为了方便理解,画了一张图: 如果
-
非常不错的一个JS分页效果代码，值得研究
本来想用网上找来的分页程序,不过都得做修改,感觉麻烦了,还是自己写一个好了,以后自己用的时候修改就方便了~~大家都多动手,自己写的才是最好的,日后想干什么的,做修改也是很容易的~~顺便也扩充一下自己的代码库~~ 补充一句,cpage是页面计数,应为全局变量,这样可以随处调用它,totalpage是总页数 JS静态分页程序 a:link,a:visited,a:hover,.current,#info{ border:1px solid #DDD; background:#F2F2F2; disp
-
利用js制作html table分页示例(js实现分页)
有时候table的列数太长,不利于使用者查询,所以利用JS做了一个table的分页,以下为相关代码 一.JS代码 复制代码 代码如下: <script type="text/javascript"> var pageSize = 15; //每页显示的记录条数 var curPage=0; //当前页 var lastPage; //最后页 var
-
JS实现前端分页效果
本文实例为大家分享了JS实现前端分页效果的具体代码,供大家参考,具体内容如下 一.HTML部分 <!doctype html> <html> <head> <meta charset='utf-8'> <script src="js/jquery.js"></script> <style type="text/css"> a{text-decoration: none;} table
-
js分页显示div的内容
div分页显示_我们_www.jb51.net #frameContent{ width:500px; /*调整显示区的宽*/ height:200px; /*调整显示区的高*/ font-size:14px; line-height:20px; border:1px solid #000000; overflow-pageINdex:hidden; overflow-y:hidden; word-break:break-all; } a{ font-size:12px; color:#0000
-
纯javascript实现分页(两种方法)
先给大家贴效果图: 网上确实有很多分页的插件以及开源代码,单本是一个后台开发猿,前台css等样式还驾驭不住,所以就开始自己去写了.其实这个分页原理很简单,就是用ajax往后台传值(当前页码),后台使用limit进行分页. 因为这是我自己第一次动手用js写分页,写的应该也不是很完美,有些公共的没有抽取出来,但是用起来还是可以的,这块代码是可以把它当做公共的分页去处理的,我就是用 这块代码写了两个稍微不同一些的分页!公共的代码抽取的也差不多,主要就是ajax后台以及返回的值不同而已,只要把总页码的值
-
原生JS实现分页点击控件
这是一个面试题,要求使用原生JS实现一个分页点击控件,供大家参考,具体内容如下 1.点击首页.上一页.下一页和末页要实现相应的数字编号变红. 2.在页数1 不能够点击首页和上一页. 3.在页数10不能够点击下一页. 4.实现一个input输入页数跳转页码功能. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta nam
-
JS实现的简单分页功能示例
本文实例讲述了JS实现的简单分页功能.分享给大家供大家参考,具体如下: HTML部分: <body onLoad="goPage(1,10);"> <table id="idData" width="70%"> <tr><td>user2</td><td>25</td><td>男</td><td>山西吕梁</td>&