全屏滚动效果

最新推荐文章于 2022-05-14 11:47:16 发布

weixin_30387799

最新推荐文章于 2022-05-14 11:47:16 发布

阅读量95

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/shuzepeng/p/6906072.html

版权

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

html,body{
width: 100%;
height: 100%;
}
body{
overflow: hidden;
}
.box {
width: 100%;
height:100%;
background: url(img/1.jpg);
background-position: center;
background-size: cover;
}

.btn {
position: fixed;
left: 60px;
bottom: 200px;
width: 40px;
height: 150px;
}
.btn ul li{
list-style: none;
width: 15px;
height: 15px;
border: 2px solid #fff;
border-radius: 50%;
margin-top: 15px;
}
.btn ul li.active{
background: #fff;
}
</style>
</head>

<div class="btn">
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript">
var h=$('body').height();
var n=0; //初始值
var nowTime=new Date(); //获取当前时间
// 分割时间.解决animate bug问题
$(document).mousewheel(function(ev,dr){
if(new Date()-nowTime>1000)
{

nowTime=new Date();
if(dr<0){ //向下滚动
n++;
if(n>3){
n=0;
}
}else{ //向上滚动
n--;
if(n<0){
n=3;
}
}
console.log(n*h);
//自定义动画 scrollTop 当前滚动条的高度
$('html,body').animate({'scrollTop':n*h+"px"},500);
$('.btn ul li').eq(n).addClass("active").siblings().removeClass("active");
}
})
//当页面刷新的时候。把滚动条的位置改变的0
setTimeout(function(){
$(document).scrollTop(0)
})
</script>
</html>

//封装mousewheel.js

(function($) {

var types = ['DOMMouseScroll', 'mousewheel'];

if ($.event.fixHooks) {
for ( var i=types.length; i; ) {
$.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
}
}

$.event.special.mousewheel = {
setup: function() {
if ( this.addEventListener ) {
for ( var i=types.length; i; ) {
this.addEventListener( types[--i], handler, false );
}
} else {
this.onmousewheel = handler;
}
},

teardown: function() {
if ( this.removeEventListener ) {
for ( var i=types.length; i; ) {
this.removeEventListener( types[--i], handler, false );
}
} else {
this.onmousewheel = null;
}
}
};

$.fn.extend({
mousewheel: function(fn) {
return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
},

unmousewheel: function(fn) {
return this.unbind("mousewheel", fn);
}
});

})(jQuery);

转载于:https://www.cnblogs.com/shuzepeng/p/6906072.html

weixin_30387799

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
全屏滚动效果

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } html,body{ w...
复制链接

扫一扫