分页特效

最新推荐文章于 2024-05-18 23:14:50 发布

weixin_30641465

最新推荐文章于 2024-05-18 23:14:50 发布

阅读量87

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/jiechen/p/5365766.html

版权

page.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js分页</title>
<style type="text/css">
body{
text-align: center;
margin: 0;
}
a{
text-decoration: none;
display: inline-block;
height: 20px;
font: 14px/20px arial;
margin-right: 5px;
padding: 2px 5px;
background-color: #ECF5FD;
color: #666666;
border: 1px solid #B8D2ED;
border-radius: 2px;
}
a:hover{
background-color: #369BDC;
color: #fff;
}
a.active{
background-color: #FFF9F2;
color: #FE7C00;
border-color: #FE7C00;
}
.clearfix{
zoom: 1;
}
.clearfix::after{
content: "";
display: block;
clear: both;
}
#div1{
position: absolute;
bottom: 20%;
width: 100%;
text-align: center;
}
#ul1{
margin: 5% auto;
width: 760px;
}
#ul1 li{
list-style: none;
width: 180px;
height: 170px;
margin: 0 10px 10px 0;
float: left;
background-color: #CEE9F8;
}
#ul1 li img{
width: 180px;
height: 110px;
}
#ul1 li p{
margin: 0;
padding: 0;
height: 24px;
line-height: 24px;
font-size: 14px;
}
</style>
<script type="text/javascript" src="move.js"></script>
<script type="text/javascript">
window.οnlοad=function(){
var json = {
title : [
'日本11岁小学生女团走红走成熟性感风遭吐槽',
'美国小伙喝酒喝断片稀里糊涂设计出一架飞机',
'真实版贪吃蛇!日本一只蛇把自己尾巴当食物吃掉',
'滑板高手高速路上炫技风驰电掣与汽车擦身而过',
'别痴心妄想了香港女子流行晒太阳减肥',
'保安摔倒滚360度继续追持刀贼监控录像全记录',
'女子被雷击中胸口文胸钢圈救了她一命',
'男子酒后机场闹事错过航班还被拘',
'保安被拖行百米“奔驰哥”见义勇为救人',
'4名法官办公楼内被捅伤犯罪嫌疑人已被控制',
'印小天迎娶圈外娇妻赵宝刚主婚众星到场祝福',
'天龙八部重聚！林志颖刘涛刘亦菲摆招合影',
'陈建州谈妻子范玮琪被炮轰网络世界就是这样',
'苍老师晒照庆祝教师节侧卧大床妩媚出镜',
'范冰冰带李晨回青岛见家长看大别墅疑婚期将至',
'胡军对嘴亲吻14岁女儿引争议',
'天然居硅藻泥',
'盘点那些闪耀荧幕的星女郎',
'军训学妹遭暴晒！吐槽要抗日',
'针对女性的犯罪',
'夜醉囧-女星醉酒后',
'爽翻!下辈子一定要做大象',
'调皮王妃-元气女神经碾压皇宫',
'校花的贴身高手-少年调戏校花',
'巨乳萝莉永井里菜性感写真',
'郭美美出庭受审揭秘背后真相',
'《碟中谍系列》尖叫中帅一脸！碟中谍系列来袭',
'苹果秋季新品发布会揭秘苹果新品',
'抗战胜利日阅兵直击大阅兵现场',
'抗战胜利70周年阅兵直击阅兵活动盛况',
'开学季爆笑青春大盘点爆笑青春大盘点',
'古装热门侠客侠女古装造型大盘点',
'教师节电影特刊老师“拯救你”',
'进击的女二号秒杀女主爆红逆袭',
'三城记制作特辑成龙父母的爱情故事',
'终结者5 制作特辑施瓦辛格卷土重来',
'七夕情人节成名电影大盘点',
'宝宝学习剧场好动画助宝宝成长',
'抗战胜利70周年经典大剧佳作展播',
'万万没想到赵丽颖身价翻百倍向赵薇看齐',
'《情敌蜜月》片花：张雨绮霍建华惊曝“另一面”',
'蒋欣花痴宁泽涛晒PS合照',
'我不是霍建华请叫我白子画!',
'伪装者-胡歌暧昧过夜',
'女神跟我走-林永健喜当爹',
'调皮王妃-晴柔犯花痴',
'熊二，这是什么鬼',
'机器侠-吴京耍大刀',
'天亮·分手-美女玩转富二代',
'女生日记-宅男共学霸一色',
' 惹毛媳妇的下场！ '
]
};
var iNow=7;
var arr=[];
var onOff=true;
page({
id : "div1",
nowNum : 1,
allNum : Math.ceil(json.title.length/8),
callBack : function(now,all){
var num = now*8 < json.title.length ? 8 : json.title.length%8;
var oUl = document.getElementById("ul1");
var aLi = oUl.getElementsByTagName("li");
var aImg = oUl.getElementsByTagName("img");
var aP = oUl.getElementsByTagName("p");
if(oUl.innerHTML==""){
for (var i = 0; i < num; i++) {
var oLi = document.createElement("li");
var oP = document.createElement("p");
oP.innerHTML = json.title[(now-1)*8+i];
var oImg = document.createElement("img");
oImg.src = "img/"+((now-1)*8+i+1)+".jpg";
oLi.appendChild(oImg);
oLi.appendChild(oP);
oUl.appendChild(oLi);
};
for (var i = 0; i < num; i++) {
arr.push( [aLi[i].offsetLeft,aLi[i].offsetTop] );
};
for (var i = 0; i < num; i++) {
aLi[i].style.position="absolute";
aLi[i].style.left = arr[i][0]+"px";
aLi[i].style.top = arr[i][1]+"px";
}
}
else{
if (!onOff) {return};
onOff=false;
var timer = setInterval(function(){
startMove(aLi[iNow],{left:500,top:500,opacity:0});
if (iNow==0) {
clearInterval(timer);
iNow = num-1;
for (var i = 0; i < num; i++) {
aP[i].innerHTML = json.title[(now-1)*8+i];
aImg[i].src = "img/"+((now-1)*8+i+1)+".jpg";
};
var timer2 = setInterval(function(){
startMove(aLi[iNow],{left:arr[iNow][0],top:arr[iNow][1],opacity:100},function(){
onOff=true;
});
if ( iNow==0 ) {
clearInterval(timer2);
iNow = num-1;
}
else{
iNow--;
}

},100);
}
else{
iNow--;
}

},100);
}
}
})
}
function page(opt){
if ( !opt.id || opt.nowNum>opt.allNum || opt.nowNum<=0 || opt.allNum<=0 ) { return; }
var obj = document.getElementById(opt.id);
var nowNum = opt.nowNum || 1;
var allNum = opt.allNum || 5;
var callBack = opt.callBack || function(){};
if (nowNum>=2) {
var oA = document.createElement("a");
oA.href="#"+1;
oA.innerHTML="首页";
obj.appendChild(oA);
}
if ( nowNum>=4 && allNum>=6 ) {
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 (i==nowNum) {
oA.innerHTML = i;
oA.className="active";
}
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;
oA.className="active";
}
else{
oA.innerHTML = "["+i+"]";
};
}
else if ( (allNum-nowNum)==1 || (allNum-nowNum)==0 ) {
oA.href="#"+(allNum-5+i);
if ( (allNum-nowNum)==1 && i==4 ) {
oA.innerHTML = allNum-5+i;
oA.className="active";
}
else if ( (allNum-nowNum)==0 && i==5 ) {
oA.innerHTML = allNum-5+i;
oA.className="active";
}
else{
oA.innerHTML = "["+(allNum-5+i)+"]";
}
}
else{
oA.href="#"+(nowNum-3+i);
if (i==3) {
oA.innerHTML = nowNum-3+i;
oA.className="active";
}
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);

move.js

function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}

效果

转载于:https://www.cnblogs.com/jiechen/p/5365766.html

weixin_30641465

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分页特效

page.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js分页</title> <style type="text/css"> body{ text-align: center; margin: 0; ...
复制链接

扫一扫