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

    2020-09-06 16:38:25

    发表时间:

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

    这个原生JS实现杂志页的分页滚动翻页特效代码,这里还有关于杂志 分页 滚动 翻页 的教程,希望您能够喜欢并学到东西提升自己的知识与技能,下面是内容详细阅读:

    脚本代码如下:

    <!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是按下的按键编号可以到<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>

    作者:佚名

    来源:赵彦彬博客(QQ:51047299),转载请注明出处!

    本文地址:http://js.dgso.cn/html/20209898569698.html

    KEYAN编码网址解码

    · END ·

    关键词:原生JS实现杂志页的分页滚动翻页特效代码 标签:原生JS实现杂志页的分页滚动翻页特效代码

    以上内容来源本站

文章推荐:

最新 工具

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

发表时间:2020-09-06 16:38:25

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

这个原生JS实现杂志页的分页滚动翻页特效代码,这里还有关于杂志 分页 滚动 翻页 的教程,希望您能够喜欢并学到东西提升自己的知识与技能,下面是内容详细阅读:

脚本代码如下:

<!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是按下的按键编号可以到<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>

作者:佚名

来源:赵彦彬博客(QQ:51047299),转载请注明出处!

本文地址:http://js.dgso.cn/html/20209898569698.html

· END ·

关键词: 标签:

以上内容来源本站

//评论数 //参与数

博主简介 - 广告合作 - 文章投稿 - 故事文摘 - 典范条目 - 博主新闻

 百科创建更新

网站地图

 

© 2020 blog.dgso.cn 赵彦彬博客 吉ICP备17000796号-1