pc版div全屏滚动
2015-05-13 20:24
429 查看
全屏滚动是一个比较酷炫的事情，最近练习了一下，写了原生的PC版全屏滚动js代码，支持滚轮滚动、键盘上下左右键滚动。兼容ie8+，chrome，fifefox
demo演示：zhaozengbo.sinaapp.com/fullscreen
源代码如下：
demo演示：zhaozengbo.sinaapp.com/fullscreen
源代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>fullscreen</title>
<style>
html,body{
margin:0;
padding:0;
}
div img{
height:100%;
width:100%;
}
</style>
</head>
<body>
<div id="container">
<div id="first">
<h1>滚动你的鼠标，或者键盘上下左右键，滚动吧~</h1>
<img src="1.jpg" alt="">
</div>
<div id="second">
<img src="2.jpg" alt="">
</div>
<div id="third">
<img src="3.jpg" alt="">
</div>
<div id="fourth">
<img src="4.jpg" alt="">
</div>
</div>
<script src="fullscreen.min.js"></script>
<script>
fullScreen("container","horizontal","slow");
</script>
</body>
</html>/*direction："vertical" or "horizontal";
ele:dom id;
speed:"fast","middle","slow"
*/
function fullScreen(ele,direction,speed){
document.documentElement.style.height = "100%";
document.body.style.height = "100%";
document.body.style.overflow = "hidden";
var ele = ele;
var bodyHeight = document.body.offsetHeight;
var divindex = 0;//页面是第几个子div
var nowSlide = 0;//页面滚动位置
var isSlide = false;//是否正在滚动，阻止滚动时的鼠标事件
var mouseDirection;//查看滚动方向，1为向上，0为向下
var element = document.getElementById(ele);
var divnumber,slideDirection,slideSpeed;//子div数量,页面滑动方向,滑动速度
if(direction === "horizontal"){
slideDirection = 0;//竖直滑动
}else{
slideDirection = 1;//水平滑动
}
if(speed === "fast"){
slideSpeed = 10;
}else if(slideSpeed === "slow"){
slideSpeed = 2;
}else {
slideSpeed = 5;
}
function main(ele){
element.style.height = "100%";
if(slideDirection){
element.style.marginTop = "0";
}else{
element.style.marginLeft = "0";
}
var childElement = [];
/*获取子元素中的div元素*/
for(var i = 0; i < element.childNodes.length;i++){
if(element.childNodes[i].nodeType === 1 && element.childNodes[i].nodeName.toLowerCase() === "div"){
childElement.push(element.childNodes[i]);
}
}
if(!slideDirection){//设置横向父div宽度
element.style.width = document.body.offsetWidth*childElement.length + "px";
}
divnumber = childElement.length;
/*对每个子元素添加样式，增加ul元素*/
var ul = document.createElement("ul");
for(var i = 0;i < childElement.length;i++){
childElement[i].style.height = "100%";
childElement[i].style.overflow = "hidden";
if(!slideDirection){//设置横向子div宽度
childElement[i].style.width = document.body.offsetWidth + "px";
childElement[i].style.boxSizing = "border-box"
childElement[i].style.float = "left";
}
var li = document.createElement("li");
li.style.cssText = "list-style:none;width:10px;height:10px;margin:10px;border:2px solid yellow;border-radius:10px;";
if(i == 0){
li.style.border = "2px solid red";
li.style.background = "yellow";
}
ul.appendChild(li);
}
ul.setAttribute("id","slidelist");
ul.style.cssText = "position:fixed;right:10px;top:50%;margin:0;padding:0;";
ul.style.marginTop = "-" + (childElement.length*14) + "px";
document.body.appendChild(ul);
var eventType = "mousewheel";
//检测是ie还是Firefox
if(navigator.userAgent.indexOf("Firefox") > 0){
eventType = "DOMMouseScroll";//是Firefox
}
//鼠标滚轮绑定
setEvent(element,eventType,function(e){
var event = e||event||window.event;
if(eventType === "mousewheel"){
//非Firefox
if(event.wheelDelta > 0){
mouseDirection = 1;//向上
}else{
mouseDirection = 0;//向下
}
}else{
if(event.detail > 0){
mouseDirection = 0;//向下
}else{
mouseDirection = 1;//向上
}
}
slideDetail(e);
});
//键盘按键绑定
setEvent(document,"keyup",function(e){
var event = e||event||window.event;
if(event.keyCode === 37 || event.keyCode === 38 ){
mouseDirection = 1;
slideDetail(e);
}else if(event.keyCode === 39 || event.keyCode === 40){
mouseDirection = 0;
slideDetail(e);
}
});
}
//添加事件，兼容各个浏览器
function setEvent(element,type,done){
if(document.addEventListener){
element.addEventListener(type,done,false);
}else{
element.attachEvent("on"+type,done);
}
}
//滚动的具体细节
function slideDetail(e){
if(isSlide){
return;
}else{
isSlide = true;
}
if(mouseDirection){//鼠标向上
if(nowSlide < 0){
divindex--;
changeLiStyle(divindex);
if(slideDirection){
var nowHeight = 0;
var number = setInterval(function(){
if(nowHeight < bodyHeight){
element.style.marginTop = nowSlide + nowHeight + "px";
nowHeight+=slideSpeed;
}else{
clearInterval(number);
element.style.marginTop = nowSlide + bodyHeight + "px";
nowSlide += bodyHeight;
isSlide = false;
}
},1);
}else{
var nowWidth = 0;
var number = setInterval(function(){
if(nowWidth < 100){
element.style.marginLeft = nowSlide + nowWidth + "%";
nowWidth+=slideSpeed;
}else{
clearInterval(number);
element.style.marginLeft = "-" + divindex*100 + "%";
nowSlide = -divindex*100;
isSlide = false;
}
},1);
}
}else{
isSlide = false;
}
}else{
if(slideDirection){
if(Math.abs(nowSlide) < element.scrollHeight - bodyHeight){
var nowHeight = 0;
divindex++;
changeLiStyle(divindex);
var number = setInterval(function(){
if(nowHeight < bodyHeight){
element.style.marginTop = nowSlide - nowHeight + "px";
nowHeight+=slideSpeed;
}else{
clearInterval(number);
element.style.marginTop = nowSlide - bodyHeight + "px";
nowSlide -= bodyHeight;
isSlide = false;
}
},1);
}else{
isSlide = false;
}
}else{
if(Math.abs(nowSlide) < (divnumber-1)*100){
var nowWidth = 0;
divindex++;
changeLiStyle(divindex);
var number = setInterval(function(){
if(nowWidth < 100){
element.style.marginLeft = nowSlide - nowWidth + "%";
nowWidth+=slideSpeed;
}else{
clearInterval(number);
element.style.marginLeft = -divindex*100 + "%";
nowSlide = -divindex*100;
isSlide = false;
}
},1);
}else{
isSlide = false;
}
}
}
}
//更改右边li样式
function changeLiStyle(divindex){
var ul = document.getElementById("slidelist");
var li = ul.getElementsByTagName('li');
for(var i = 0;i < li.length;i++){
li[i].style.border = "2px solid yellow";
li[i].style.background = "none";
}
li[divindex].style.border = "2px solid red";
li[divindex].style.background = "yellow";
}
setEvent(window,"load",function(){
main(ele);
});
setEvent(window,"resize",function(){
if(slideDirection){
bodyHeight = document.body.offsetHeight;
4000
document.getElementById(ele).style.marginTop = "-" + bodyHeight*divindex + "px";
nowSlide = -bodyHeight*divindex;
}else{
document.getElementById(ele).style.marginLeft = -divindex*100 + "%";
}
});
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 中间部分滚动记录div内滚动条的位置, 以及将页面分为三部分组成解决position:fixed在ios下失效问题
- div滚动条与文字滚动
- CSS控制DIV永远固定在页面底部不随滚动而滚动
- 用marquee和div+js实现首尾相连循环滚动效果
- JavaScript基础 获取整个div的宽度 不含滚动条的宽度 向下滚动了多少px offsetWidth scrollWidth scrollTop
- 四个div平均铺满全屏方法
- Html点击按钮上下逐条滚动,外层div不遮挡内层div内容
- 原生 js 实现全屏滚动效果
- 让div全屏
- jQuery 全屏滚动插件 fullPage.js 参数说明
- jQuery.scroll jQuery自带的Div滚动插件
- jQuery全屏滚动插件fullPage.js
- Jquery几行代码解决跟随屏幕滚动DIV
- 滚动页面时DIV到顶部时fixed(原生js实现)
- 基于jquery的DIV随滚动条滚动而滚动的代码
- js控制点击让div滚动，显示一个，隐藏一个
- 固定DIV不随滚动条滚动
- 响应式的无限滚动全屏dribbble作品集布局展示效果
- 滚动条事件—固定div(第一篇)
- 【Codeforces Round 273 (Div 2)D】【DP 滚动数组】 Red-Green Towers 两种颜色积木拼搭最高锯齿楼每层颜色相同的总方案数