原生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浏览器最大化满屏及比例缩放方法
如果要在大屏上展示,大屏所带电脑的浏览器应该处于满屏,此时就不会显示浏览器软件的边框了.个别浏览器在满屏状态下,某些边栏等还继续保留,此时应设置此浏览器的显示选项方可消除. 如果屏幕中的显示对象过小或 ...
随机推荐
- 代码中使用bitmap资源并加载到控件上
1.从res/drawable/XX.jpg里引用图片资源: 1. Resources res = getResources(); Bitmap inDrawable= BitmapFactory.d ...
- 笔记整理——linux程序设计
数据库 (2013/2/27 16:07:11) 线程 (2013/2/27 15:47:51) 信号 (2013/2/27 15:31:28) 消息队列.共享内存 (2013/2 ...
- windows中如何查看某个端口被谁占用
说明:本人操作系统为win7 x64,文章转自http://jingyan.baidu.com/article/3c48dd34491d47e10be358b8.html,加上本人的注释. 开始--- ...
- Myeclipse程序调试快捷键及步骤详解
Myeclipse程序调试快捷键及步骤详解: 调试快捷键 Eclipse中有如下一些和运行调试相关的快捷键. 1. [Ctrl+Shift+B]:在当前行设置断点或取消设置的断点. ...
- js原生封装getClassName()方法-ie不支持getElementsByClassName,所以要自己实现获取类名为className的所有元素
<html> <head> <script type="text/javascript"> window.onload = function() ...
- ImageView及其子类（二）
实例:强大的图片按钮 下面的实例定义了多个图片按钮,并定义了两个ZoomButton.两个ZoomButton的android:src属性分别指定为@android:drawable/btn_minu ...
- 数据契约（DataContract）的作用
服务契约定义了远程访问对象和可供调用的方法,数据契约则是服务端和客户端之间要传送的自定义数据类型. 一旦声明一个类型为DataContract,那么该类型就可以被序列化在服务端和客户端之间传送,如下所 ...
- JavaScript的核心
对象 ECMAScript做为一个高度抽象的面向对象语言,是通过对象来交互的.即使ECMAScript里边也有基本类型,但是,当需要的时候,它们也会被转换成对象. 一个对象就是一个属性集合,并拥有一个 ...
- javaScript基础详解（1）
javaScript基础详解 首先讲javaScript的摆放位置:<script> 与 </script> 可以放在head和body之间,也可以body中或者head中 J ...
- 照片提取GPS 转成百度地图坐标
感谢: 小慧only http://www.cnblogs.com/zhaohuionly/p/3142623.html GPS转化坐标方法 大胡子青松 http://www.cnblogs.com ...