全屏图片上下滚动，鼠标一次滚动一屏

Html

Css

/*
         * 说明：
         * 标注为慎删的属性暂时认定可以删除，即在作者测试的环境下删除暂时没有影响，但不代表所有环境下删除都没有影响
         * 其他属性一概不可以删除
*/
html,body {
	height:100%;
}
body,ul,li,a,p,div {
	/*慎删*/
            padding:0px;
	margin:0px;
}
#wrap {
	overflow:hidden;
	width:100%;
}
#main {
	top:0;
	position:relative;
}
.page {
	/*谨删*/
            width:100%;
	margin:0;
}
#pageUl {
	position:fixed;
	right:10px;
}

//改变窗口大小时调整图片大小
window.onload = resizeImages;
window.onresize = resizeImages;

function resizeImages() {
    $(function(e) {
        var screenWeight = document.documentElement.clientWidth;
        var screenHeight = document.documentElement.clientHeight;
        $("[name=pageImg]").css("width", screenWeight).css("height", screenHeight);
        $("#pageUl").css("bottom", screenHeight >> 1);
    });
}

//滚动事件处理函数
function scrollFun(event) {
    startTime = new Date().getTime();
    var delta = event.detail || (-event.wheelDelta);
    //mousewheel事件中的 “event.wheelDelta” 属性值：返回的如果是正值说明滚轮是向上滚动
    //DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动
    if ((endTime - startTime) < -1000) {
        if (delta > 0 && parseInt(main.offsetTop) > -(hei * (pageNum - 1))) {
            //向下滚动
            index++;
            toPage(index);
        }
        if (delta < 0 && parseInt(main.offsetTop) < 0) {
            //向上滚动
            index--;
            toPage(index);
        }
        endTime = new Date().getTime();
    } else {
        event.preventDefault();
    }
}

//鼠标悬停翻页
document.getElementById("pageUlLi1").onmouseover = function() {
   toPage(1);
}
document.getElementById("pageUlLi2").onmouseover = function() { 
    toPage(2);
}
document.getElementById("pageUlLi3").onmouseover = function() {
    toPage(3);
}
document.getElementById("pageUlLi4").onmouseover = function() {
    toPage(4);
}
document.getElementById("pageUlLi5").onmouseover = function() {
    toPage(5);
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

全屏图片上下滚动，鼠标一次滚动一屏



代码描述：纯js实现全屏滚动，一次鼠标滑动滚动一屏幕，包含鼠标悬停翻页效果

纯js实现的全屏滚动效果，鼠标滚动一次实现全屏滚动，适应所有屏幕大小，并根据窗口大小改变自动调节，右侧附有导航栏，悬停即可快速跳转到相应界面，使用时直接替换相应的div即可。

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

莜莜

相关代码

全屏图片上下滚动，鼠标一次滚动一屏

最新