原生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浏览器最大化满屏及比例缩放方法
如果要在大屏上展示,大屏所带电脑的浏览器应该处于满屏,此时就不会显示浏览器软件的边框了.个别浏览器在满屏状态下,某些边栏等还继续保留,此时应设置此浏览器的显示选项方可消除. 如果屏幕中的显示对象过小或 ...
随机推荐
- css所有属性参考
学习地址:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference
- PHP header( ) 禁止页面后退
header("Cache-control:no-cache,no-store,must-revalidate"); header("Pragma:no-cache&qu ...
- php分页原理教程及简单实例
<?php //连接数据库 $con = mysql_connect("localhost","root",""); mysql_se ...
- 互信息应用于SNP特征选择的局限
互信息已广泛应用于特征选择问题,但应用在 SNP 选择上还存在着一些局限.第一,互信息只能衡量一个 SNP 组合与表型的相关性, 无法衡量多个 SNP 与表型的相关性.第二, 利用互信息排序 SNP ...
- 一张图告诉你什么是Linux distributions...
- java me 旋转的X案例
package com.xushouwei.cn; import javax.microedition.lcdui.Command;import javax.microedition.lcdui.Co ...
- js原生设计模式——13桥接模式(相同业务逻辑抽象化处理的职责链模式)
桥接模式之多元化类之间的实例化调用实例 <!DOCTYPE html><html lang="en"><head> <meta ch ...
- db2 数据类型
数据类型: 字符串类型 描述 CHARACTER(n) n bytes定长字符串. n 大于0 不大于255. 默认 1. VARCHAR(n) 变长字符串,最大 n bytes. n大于 0 小于表 ...
- swift 使用pod管理
在oc 中使用pod 管理第三方库还是很方便的 今天来在swift中使用pod 来管理第三方库 其实还是很简单的 和oc 区别不大 下面来说说我遇到的一些问题及解决方法 当然使用pod 你要先安装p ...
- 如何使用Ninja快速编译LLVM和Clang
在使用Make工具编译LLVM是非常耗时的.往往需要三四个小时.但是使用goolge开源的ninja编译LLVM只需要10到20分钟. 本文以llvm3.3为例,演示在linux上编译和安装过程. 第 ...