原生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浏览器最大化满屏及比例缩放方法
如果要在大屏上展示,大屏所带电脑的浏览器应该处于满屏,此时就不会显示浏览器软件的边框了.个别浏览器在满屏状态下,某些边栏等还继续保留,此时应设置此浏览器的显示选项方可消除. 如果屏幕中的显示对象过小或 ...
随机推荐
- win7下sublime text3 安装Emmet的pyv8
1.通过快捷键 ctrl+` 或者 View > Show Console 菜单打开控制台 2.适用于 Sublime Text 3: import urllib.request,os;pf=' ...
- IE6下完美兼容css3圆角和阴影属性的htc插件PIE.htc
1.(推荐:)css插件PIE.htc,这个才是真正完美兼容css3的圆角和阴影属性在IE6环境下使用的效果,但要注意的是:下面的代码必须写在html文件的head标签内,否则无效(不能从外部引用下面 ...
- 常用的JavaScript字符串处理函数及用法
最近参加了几次前端实习生招聘的笔试,发现很多笔试题都会考到字符串的处理,比方说去哪儿网笔试题.淘宝的笔试题等,如果你经常参加笔试或者也是一个过来人,相信你也跟我一样,发现字符串的处理是前端招聘过程中最 ...
- php将图片以二进制保存到mysql数据库并显示
一.存储图片的数据表结构: -- -- 表的结构 `image` -- CREATE TABLE IF NOT EXISTS `image` ( `id` int(3) NOT NULL AUTO_I ...
- --@angularjs-- $location.path('/login')-$location服务用法示例
$httpProvider interceptor .factory('auth403', ['$rootScope', '$q', '$location', function auth403($ro ...
- CentOS 7 部署、连接 数据库mariadb
1.安装mariadb yum -y install mariadb* 2.开启/停止 systemctl start mariadb #启动MariaDB systemctl stop maria ...
- Java线程：线程中断
interrupt方法可以用来请求终止线程. 当对一个线程调用interrupt方法时,线程的中断状态被置位.这时每个线程都有boolean标志.每个线程都应该不时的检查这个标志,以判断线程是否被中断 ...
- Chrome控制台详解
Chrome控制台详解 http://www.codeceo.com/article/chrome-console.html console.log('%casdf','font-size:16px; ...
- Spring 集成 Dubbo
Duboo是什么 DUBBO是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,是阿里巴巴SOA服务化治理方案的核心框架,每天为2,000+个服务提供3,000,000,000+次 ...
- Javaweb程序服务器部署
话说从接触web后就想着写一个自己的站点然后别人都可以访问,这也是一个小目标吧,从之前在使用校园网的时候把自己的电脑当成服务器然后部署使用同学的电脑访问,现在想让所有人都可以访问,于是就花重金租了腾讯 ...