原生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浏览器最大化满屏及比例缩放方法
如果要在大屏上展示,大屏所带电脑的浏览器应该处于满屏,此时就不会显示浏览器软件的边框了.个别浏览器在满屏状态下,某些边栏等还继续保留,此时应设置此浏览器的显示选项方可消除. 如果屏幕中的显示对象过小或 ...
随机推荐
- java数据结构整理（二）
一.List接口,有序的Collection接口,能够精确地控制每个元素插入的位置,允许有相同的元素 1.链表,LinkedList实现了List接口,允许null元素,提供了get().remove ...
- sql数据库恢复 文件丢失误删除 误格式化置疑报错修复 数据库置疑修复总结/SQL SERVER 2000/2005/2008/2008R2
数据库置疑的原因会有多种多样,不同的问题采用的步骤也会有所不同,以下的步骤不能适用所有的情况,但包括了一些基本的步骤. 数据库置疑是指数据库内部处于不一致的状态,很有可能会有数据丢失.我们推荐您从做数 ...
- c# 正则表达式的用户
Regex emailregex = new Regex("(?<user>[^@]+)@(?<host>.+)"); if(emailregex.IsMa ...
- Selenium2（java）框架设计 九
设计框架原则: 数据分离,业务层和逻辑层不要混杂在一起. 设计图: 框架结构初始化: com.wymall.test:这是存放这个框架源代码的根目录 base:里面有个基类(BaseParpaare. ...
- Mysql常用表管理语句
- Spring的 classpath 通配符加载配置文件
http://www.cnblogs.com/taven/archive/2012/10/24/2737556.html classpath:app-Beans.xml 说明:无通配符,必须完全匹配 ...
- Java 的String类
String类 1.String对象的初始化 由于String对象特别常用,所以在对String对象进行初始化时,Java提供了一种简化的特殊语法,格式如下: String s = “abc”; s ...
- 内功心法 -- java.util.ArrayList<E> (1)
写在前面的话:读书破万卷,编码如有神--------------------------------------------------------------------下文主要对java.util ...
- linux pagecache与内存占用
实验环境 CentOS Linux release 7.3.1611 (Core) 3.10.0-514.6.1.el7.x86_64 一.概念介绍 linux系统中通常使用free命 ...
- java_JDBC(2)
1.Statement 每次执行sql语句,数据库都要执行sql语句的编译 ,最好用于仅执行一次查询并返回结果的情形,效率高于PreparedStatement. 2.PreparedStatemen ...