原生javascript满屏上下滚动
使用到一个滚动事件：onmousewheel (不支持火狐浏览器) / DOMMouseScroll (支持火狐浏览器)；这篇代码支持ie8以上版本，Firefox，Safari，Chrome。
每个li代表一屏内容，滚动的是div 的滚动条，根据每个li的top值，改变滚动条距离顶部的距离。可以在每个li里添加每一屏想展示给用户的内容。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<title></title>
<style>
*{padding:0;margin:0;}
body{
overflow:hidden;
}
div{
position:absolute;
top:0;
left:0;
overflow-y: auto;
overflow-x:hidden;
}
ul{
position:relative;
}
li{
outline:1px solid red;
position:relative;
font-size:50px;
font-family:Microsoft YaHei;
font-weight:bold;
overflow:hidden;
}
</style>
</head>
<body>
<div>
<ul>
<li>
第一屏
</li>
<li>
第二屏
</li>
<li>
第三屏
</li>
<li>
第四屏
</li>
</ul>
</div> <script> var type = true;//控制动画的开关
var bodyW = document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth;
var bodyH = document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight;
var div = document.getElementsByTagName("div")[0];
div.style.width = bodyW + "px";
div.style.height = bodyH + "px";
var ul = document.getElementsByTagName("ul")[0]; var liLen = ul.getElementsByTagName("li");//获取li var spanLen = ul.getElementsByTagName("span"); //设置Li的高度
for(var i = 0;i<liLen.length;i++){
liLen[i].style.height = bodyH + "px";
liLen[i].style.lineHeight = bodyH + "px";
}
ul.style.height = bodyH*liLen.length + "px";//设置ul的高
ul.style.width = bodyW + "px";//设置ul的宽 //鼠标的滚轮事件(兼容 ie and chrome);
div.onmousewheel = function(event){
var event = event || window.event;
var direction = event.wheelDelta && (event.wheelDelta > 0 ? "mouseup" : "mousedown");
//向上滚动
if(direction == "mouseup"){ mouseTop();
} //向下滚动
if(direction == "mousedown"){
mouseBottom(); }
} //鼠标滚轮事件(兼容 firefox)
document.body.addEventListener("DOMMouseScroll", function(event) { var direction= event.detail && (event.detail > 0 ? "mousedown" : "mouseup");
//向下滚动
if(direction == "mousedown"){
mouseBottom();
} //向上滚动
if(direction == "mouseup"){
mouseTop();
}
}); //向上滚动代码函数
function mouseTop(){
//第三屏
if(div.scrollTop == liLen[3].offsetTop && type == true){
type = false;
//延时滚动。要不然会先执行代码再执行滚轮，那样会多滚动出一截子。
setTimeout(function(){ AnimationTop(2); },10);
return;
} //第二屏
if(div.scrollTop >= liLen[2].offsetTop && type == true){
type = false;
//延时滚动。要不然会先执行代码再执行滚轮，那样会多滚动出一截子。
setTimeout(function(){ AnimationTop(1); },10);
return;
} //第一屏
if(div.scrollTop >= liLen[1].offsetTop && type == true){
type = false;
//延时滚动。要不然会先执行代码再执行滚轮，那样会多滚动出一截子。
setTimeout(function(){ AnimationTop(0); },10);
return;
}
} //行下滚动代码函数
function mouseBottom(){
// console.log("向下") //第二屏
if(div.scrollTop == liLen[0].offsetTop && type == true){
type = false; //延时滚动。要不然会先执行代码再执行滚轮，那样会多滚动出一截子。
setTimeout(function(){ AnimationBottom(1); },10); return;
} //第三屏
if(div.scrollTop <= liLen[1].offsetTop && type == true){
type = false;
//延时滚动。要不然会先执行代码再执行滚轮，那样会多滚动出一截子。
setTimeout(function(){ AnimationBottom(2); },10);
return;
} //第四屏
if(div.scrollTop <= liLen[2].offsetTop && type == true){
type = false;
//延时滚动。要不然会先执行代码再执行滚轮，那样会多滚动出一截子。
setTimeout(function(){ AnimationBottom(3); },10);
return;
}
} //向上滚轮动画函数
function AnimationTop(num){
var t = setInterval(function(){
if(div.scrollTop > liLen[num].offsetTop){ //控制移动速度（慢--快--慢）
// -- 慢
if(div.scrollTop >= liLen[num].offsetTop+(parseInt(liLen[num].style.height)/11*9)) { div.scrollTop -= 1; // -- 快
}else if(div.scrollTop <= liLen[num].offsetTop+(parseInt(liLen[num].style.height)/11*9) && div.scrollTop >= liLen[num].offsetTop+(parseInt(liLen[num].style.height)/11*2)){
div.scrollTop -= 3; // -- 慢
}else if(div.scrollTop <= liLen[num].offsetTop+(parseInt(liLen[num].style.height)/11*2) && div.scrollTop >= liLen[num].offsetTop){ div.scrollTop -= 1; } }else{
div.scrollTop = liLen[num].offsetTop;
clearInterval(t);
type = true;
}
},1);
} //向下滚轮动画函数
function AnimationBottom(num){
var t = setInterval(function(){
if(div.scrollTop < liLen[num].offsetTop){ //控制移动速度（先快后慢）
// -- 慢
if(div.scrollTop <= liLen[num].offsetTop/11*2) { div.scrollTop += 1; // -- 快
}else if(div.scrollTop >= liLen[num].offsetTop/11*2 && div.scrollTop <= liLen[num].offsetTop/11*10){
div.scrollTop += 3; // -- 慢
}else if(div.scrollTop >= liLen[num].offsetTop/11*10 && div.scrollTop <= liLen[num].offsetTop){ div.scrollTop += 1; } }else{
div.scrollTop = liLen[num].offsetTop;
clearInterval(t);
type = true;
}
},1);
} </script>
</body>
</html>
原生javascript满屏上下滚动的更多相关文章
- 第145天：jQuery.touchSlider触屏满屏左右滚动幻灯片
1.HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- 原生javascript效果：无缝滚动
<style type="text/css"> #con {width:400px; padding:10px; margin:20px auto; text-alig ...
- 利用snowfall.jquery.js实现爱心满屏飞
小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...
- 原生javascript开发仿微信打飞机小游戏
今天闲来无事,于是就打算教一个初学javascript的女童鞋写点东西,因此为了兼顾趣味性与简易程度,果断想到了微信的打飞机小游戏.. 本来想用html5做的,但是毕竟人家才初学,连jquery都还不 ...
- 原生javascript写的侧栏跟随效果
浏览网站时经常看到有的网站上,当一个页面很长的时候,设定侧栏内容会跟随滚动条滚动,我们把这种效果叫做“侧栏跟随滚动”.这种特效对提高网站浏览量.文章点击率.广告点击量都有一定效果. 侧栏跟随滚动的实现 ...
- 原生javascript实现老.虎机抽奖点名demo源码思路解析
想着使用原生Javascript做一个随机点名的小应用, 也可以做抽奖使用. html简单化,人名单可以通过js生成并处理. 可以非常随意的添加修改人名字. 应用想带点特效,比如老.虎机转动的特效. ...
- 原生javascript写自己的运动库（匀速运动篇）
网上有很多JavaScript的运动库,这里和大家分享一下用原生JavaScript一步一步写一个运动函数的过程,如读者有更好的建议欢迎联系作者帮助优化完善代码.这个运动函数完成后,就可以用这个运动函 ...
- Easyui layout设置满屏效果
html文件: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...
- [WebShow系列] Web浏览器最大化满屏及比例缩放方法
如果要在大屏上展示,大屏所带电脑的浏览器应该处于满屏,此时就不会显示浏览器软件的边框了.个别浏览器在满屏状态下,某些边栏等还继续保留,此时应设置此浏览器的显示选项方可消除. 如果屏幕中的显示对象过小或 ...
随机推荐
- thinkphp ，进行关联模型的时候出现的问题，版本是3.2
看的后盾网络视频,里面操作的是3.1. 我用的是onethink,基于3.2. 在关联模式的操作时.主要是user role role_user 3个张表 视频中可以操作,但是本地操作出现问题. ...
- CSS3 Transitions 你可能不知道的知识点
如何临时让transition失效 我们给一个element设置了transition效果,但某些特殊情况,我们希望让transition临时失效.我们第一反应就是先移除transition设置,等其 ...
- Bzoj3756
传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=3756 题解:乱搞 代码: #include<iostream> #include ...
- MindManager 安装注册
正版现在998元,对于个人用户来说是不是太贵了.直接下载的还不能打开,挺奇怪.
- arcgis 瓦片图加载规则（转载）
arcgis 瓦片图加载规则 最近需要做地图离线的功能,要能下载指定区域的瓦片图,我们都知道如何加载谷歌和天地图的加载规则,但是网上貌似没有找到如何加载arcgis自己发布的瓦片图规则,好不容易找到一 ...
- spark RDD编程，scala版本
1.RDD介绍: RDD,弹性分布式数据集,即分布式的元素集合.在spark中,对所有数据的操作不外乎是创建RDD.转化已有的RDD以及调用RDD操作进行求值.在这一切的背后,Spark会自动 ...
- 3.3. 轻量级的迁移方式（Core Data 应用程序实践指南）
持久化存储协调器会试着用新版的模板打开原来的持久化存储区,但是那是旧的模板,旧的格式,当然会出错.现在要做的就是迁移现有的持久化数据区,以便跟新模型匹配. 怎么进行迁移呢? 在什么时候进行迁移? 在向 ...
- js与php传递参数
这个问题在网页开发时经常遇到,其实解决办法非常简单,就是几行代码的事,不过各种js.php书上都没有,百度下来也乱七八糟的,有的能用,有的不能用.小编遇到这问题时认认真真研究了一上午,研究出一点心得, ...
- CocosBuilder 多分辨率基础
最近两个项目大量使用了CocosBuilder, 对于开发效率提高是巨大的. 一直计划写一篇博客谈谈CocosBuilder的多分辨率问题, 懒病加上一些疙疙瘩瘩的小事情, 拖延了一个多月, 才终于下 ...
- Oracle job调用存储过程
在PL/SQL中的what值中直接写入存储过程的名称+“分号”: begin sys.dbms_job.submit(job => :job, what => 'del_ky_items; ...