原生JS实现杂志页的分页滚动翻页特效代码-JS特效-爱易网页

原生JS实现杂志页的分页滚动翻页特效代码

日期：2014-05-18　浏览次数：20244 次

以下是程序代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>哈哈</title>
<style>
*{padding:0;margin:0;}
ul,li{list-style:none;}
html,body,ul,li{height:100%;width:100%;}
html,body{overflow:hidden;}
body{font:500px/500px Tahoma,Arial;color:#333;position:relative;}
ul{position:absolute;}
li{float:right;}
</style>
</head>
<body>
<ul id="main">
<li style="background:#FFADAD">1</li>
<li style="background:#EAFFB9">2</li>
<li style="background:#FFDEBC">3</li>
<li style="background:#BFE5FF">4</li>
<li style="background:#90FFE0">5</li>
<li style="background:#DB9BFF">6</li>
</ul>
<script>
function $(id){return document.getElementById(id)}
function $c(p,i){return p.getElementsByTagName(i)}
var Command=function(){
 var //定义
 state={},//按键序列
 interval=interval,//计时器
 work=li_num=top_hei=0,//工作中,当前页面,偏移值
 Command={
  //我是Command部分的入口
  init:function(){
   //下面两行分别绑定了键盘的按下和抬起
   window.addEventListener('keydown', handle, false);
   window.addEventListener('keyup', handle, false);
  },
  state:state,
  bind:true
 };
 //我是键盘事件绑定的函数
 function handle(e){
  //定义了几个变量 code是按下的按键编号可以到<a href="http://txts.sinaapp.com/292.txt" target="_blank">http://txts.sinaapp.com/292.txt</a>查阅 ,max_h是最高偏移值
  var code=e.keyCode,max_h=$('main').clientHeight*5-100;
  //根据按键事件类型判断
  switch(e.type){
   //如果是按下
   case 'keydown':
    //如果当前按键已经按下 或者 滚动在工作中 那么取消操作
    if(state[code]>0||work){
     return;
    //如果按键编号等于40 
    }else if(code==40){
     //如果当前偏移值大于最高偏移值那么取消操作
     if(top_hei>max_h)return;
     //当前页面编号+1
     li_num++;
     //定义top_h 等于需要调整到的偏移值
     var top_h=$c($('main'),'li')[0].clientHeight*li_num;
     //传递到s_c函数
     s_c('main',Math.round(top_h));
    //如果按键编号等于38 
    }else if(code==38){
     //如果当前偏移值小于最小偏移值那么取消操作
     if(top_hei<50)return;
     //当前页面编号-1
     li_num--;
     //定义top_h 等于需要调整到的偏移值
     var top_h=$c($('main'),'li')[0].clientHeight*li_num;
     //传递到s_c函数
     s_c('main',Math.round(top_h));
    }
    //记录当前按键
    state[code] = 1;
   break;
   //如果是抬起
   case 'keyup':
    //取消记录当前按键
    state[code] = 0;
   break;
  }
 }
 //循环函数
 function s_c(i,t){
  //工作中
  work=1;
  //定义 o等于需要更改的id t等于需要调整到的偏移值
  var o=$(i),r=top_hei<t;
  //如果当前偏移值小于新的偏移值那么+30 否则-30
  top_hei<t?top_hei+=50:top_hei-=50;
  //将偏移值应用到界面上
  o.style.top=-top_hei+'px';
  //如果还没到应该偏移的地方
  if(Math.abs(top_hei-t)>50){
   //那么再运行自身
   interval=setTimeout(function(){s_c(i,t)},3);
  //如果到了应该偏移的地方
  }else{
   //精确定位到新偏移值
   o.style.top=-t+'px';
   //精确定位到新偏移值
   top_hei=t;
   //取消工作中状态
   work=0;
  }
 }
 return Command;
}();
Command.init();
</script>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

原生JS实现杂志页的分页滚动翻页特效代码

相关资料更多>

推荐阅读更多>