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

稿源：互联网 2020-04-23 19:25:00 点击： 16011 撤稿纠错

一个类似杂志页的分页滚动效果，目前仅chrome IE9可用,code每行都写了注释,依旧使用了atrl的炸弹人部分代码>_< FF下翻滚的时候总是有些诡异,键盘上下键可滚动

以下讨论的是和杂志分页滚动翻页相关的原生JS实现杂志页的分页滚动翻页特效代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>js特效 阿里西西</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是按下的按键编号可以到[url]http://txts.sinaapp.com/292.txt[/url]查阅 ,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>

关于原生JS实现杂志页的分页滚动翻页特效代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2020042378969.shtml方便下次再访问哦。

·上一篇： 仿淘宝首页轮播原生js面对对象封装版
·下一篇： 动态文本文字TAG标签随机变换排列显示的JS特效代码

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

文章分类LIST >>返回首页

最新游戏

最新新闻