Jquery 完成单个鼠标滚轮滚动后，滚动到下一个div
我正在制作一个paralax网站，我想实现鼠标滚轮滚动到div的功能。也就是说，每当我通过鼠标滚轮使用scroll时，它就会滚动到下一个或上一个div。我尝试从这里复制代码。但它不起作用。对不起，我可能看起来太傻了 这是我的HTML代码Jquery 完成单个鼠标滚轮滚动后，滚动到下一个div,jquery,html,scroll,Jquery,Html,Scroll,我正在制作一个paralax网站，我想实现鼠标滚轮滚动到div的功能。也就是说，每当我通过鼠标滚轮使用scroll时，它就会滚动到下一个或上一个div。我尝试从这里复制代码。但它不起作用。对不起，我可能看起来太傻了 这是我的HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta h
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Stamp it Go!</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<linkrel="stylesheet"href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/menu.css">
<link href='http://fonts.googleapis.com/css?family=Nova+Flat' rel='stylesheet' type='text/css'>
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id='cssmenu'>
<ul>
<li class='active'><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>Company</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
<div class="content">
<div class="firstscreen" style="text-align: center;">
<div class="container">
<div class="video">
<iframe src="//player.vimeo.com/video/91085172" width="800" height="400 " frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
<div class="secondscreen" style="text-align: center;">
<div class="container" style="padding: 11% 0;">
<div class="col-sm-offset-1 col-sm-4">
<img class="img-responsive" src="pics/reward.jpg" alt="" width="" >
</div>
<div class="col-sm-offset-1 col-sm-6">
<ul style="margin-top: 15%;">
<li class="liitem">Establish YOUR own Loyalty club</li>
<li class="liitem">Reward your customers</li>
<li class="liitem">Categorize your customers(Silver Gold and Platinum)</li>
<li class="liitem">Stay connected with your customers, anywhere they are.(Lead management system, Social media)</li>
</ul>
</div>
</div>
</div>
<div class="thirdscreen">
<div class="container" style="padding: 16% 0;">
<div class="col-sm-offset-1 col-sm-6">
<ul style="margin-top: 13%;">
<li class="liitem">Understand your Customer</li>
<li class="liitem">Get insights into Customer behavior</li>
<li class="liitem">Know your customers special days</li>
<li class="liitem">Tailor made offers and campaigns to suit your customers</li>
</ul>
</div>
<div class="<col>-sm-4">
<img class="img-responsive" src="pics/customer-reach.jpg" alt="" width="" style="margin-top: 12%;">
</div>
</div>
</div>
<div class="fourthscreen">
<div class="container" style="padding: 16% 0;">
<div class="col-sm-offset-1 col-sm-4">
<img class="img-responsive" src="pics/Analytics.jpg" alt="" width="" style="margin-top: 12%;">
</div>
<div class="col-sm-offset-1 col-sm-6">
<ul style="margin-top: 13%;">
<li class="liitem">Analyse, manage and grow your Business</li>
<li class="liitem">Get insights into your Business</li>
<li class="liitem">Reach new customers</li>
<li class="liitem">Speed up your slow hours</li>
<li class="liitem">Increase footfall traffic and ROI</li>
</ul>
</div>
</div>
</div>
<footer>
<div class="socialicons">
<h2 style="font-family:'Nova Flat', cursive; text-align: center; margin: 0; padding-top: 2%;">Reach Us At</h2> <br>
<div style="padding-bottom: 2%;">
<img src="pics/facebook.png" alt="" width="4%">
<img src="pics/twitter.png" alt="" width="3.5%">
<img src="pics/gplus.png" alt="" width="3.5%">
</div>
</div>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
(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);}});function handler(event){var orgEvent=event||window.event,args=[].slice.call(arguments,1),delta=0,returnValue=true,deltaX=0,deltaY=0;event=$.event.fix(orgEvent);event.type="mousewheel";if(orgEvent.wheelDelta){delta=orgEvent.wheelDelta/120;}
if(orgEvent.detail){delta=-orgEvent.detail/3;}
deltaY=delta;if(orgEvent.axis!==undefined&&orgEvent.axis===orgEvent.HORIZONTAL_AXIS){deltaY=0;deltaX=-1*delta;}
if(orgEvent.wheelDeltaY!==undefined){deltaY=orgEvent.wheelDeltaY/120;}
if(orgEvent.wheelDeltaX!==undefined){deltaX=-1*orgEvent.wheelDeltaX/120;}
args.unshift(event,delta,deltaX,deltaY);return($.event.dispatch||$.event.handle).apply(this,args);}})(jQuery);
var Parallax = {
utils: {
doSlide: function(section) {
var top = section.position().top;
$('.content').stop().animate({
top: -top
}, 600, 'linear', function() {
section.addClass('slided').siblings('div.section').removeClass('slided');
});
}
},
fn: {
setHeights: function() {
$('div.section').height($(window).height());
},
onSiteScroll: function() {
var section = null;
$('.content').mousewheel(function(event, delta) {
event.preventDefault();
if (delta < 0) {
section = ($('.slided').length) ? $('.slided') : $('.firstscreen');
var next = (section.next().length) ? section.next() : $('.firstscreen');
Parallax.utils.doSlide(next);
}
else if(delta > 0) {
section = ($('.slided').length) ? $('.slided') : $('.firstscreen');
var prev = (section.prev().length) ? section.prev() : $('.firstscreen');
Parallax.utils.doSlide(prev);
}
});
}
},
init: function() {
for (var prop in this.fn) {
if (typeof this.fn[prop] === 'function') {
this.fn[prop]();
}
}
}
};
Parallax.init();
</script>
</body>
</html>
踩上去！
- 建立自己的忠诚俱乐部
- 奖励您的客户
- 对客户进行分类（银、金和白金）
- 随时随地与客户保持联系。（销售线索管理系统、社交媒体）
- 了解您的客户
- 深入了解客户行为
- 了解客户的特殊日子
- 针对您的客户量身定制的优惠和活动
分析、管理和发展您的业务
- 深入了解您的业务
- 接触新客户
- 加快慢行时间
- 增加人流流量和投资回报率
请致电
（函数（$）{var types=['DOMMouseScroll'，'mouseweel']；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）}$.fn.extend（{mousewheel:function（fn）{return fn？this.bind（“mousewheel”，fn）：this.trigger（“mousewheel”）；}，unmousewheel:function（fn）{return this.unbind（“mousewheel”，fn）；}）；函数处理程序（event）{var orgeevent=event | | window.event，args=[].slice.call（参数，1），delta=0，returnValue=true，deltaX=0，deltaX=0；event=$.event.fix（orgEvent）；event.type=“鼠标滚轮”；如果（orgEvent.wheelDelta）{delta=orgEvent.wheelDelta/120；}
if（orgEvent.detail）{delta=-orgEvent.detail/3；}
deltaY=delta；if（orgEvent.axis！==未定义和&orgEvent.axis===orgEvent.HORIZONTAL_轴）{deltaY=0；deltaX=-1*delta；}
如果（orgEvent.wheelDeltaY！==未定义）{deltaY=orgEvent.wheelDeltaY/120；}
如果（orgEvent.wheelDeltaX！==未定义）{deltaX=-1*orgEvent.wheelDeltaX/120；}
args.unshift（event，delta，deltaX，deltaY）；return（$.event.dispatch | |$.event.handle）.apply（this，args）；}）（jQuery）；
视差={
UTIL：{
剂量计：功能（部分）{
var top=section.position（）.top；
$（'.content'）.stop（）.animate({
顶部：-顶部
}，600，'线性'，函数（）{
section.addClass（'slided'）。同胞（'div.section'）。removeClass（'slided'）；
});
}
},
fn：{
setHeights:function（）{
$（'div.section'）.height（$（window.height（））；
},
onSiteScroll:function（）{
var段=null；
$（'.content'）.mousewheel（函数（事件，增量）{
event.preventDefault（）；
if（δ<0）{
节=（$（'.slided'）.length）？$（'.slided'）：$（'.firstscreen'）；
var next=（section.next（）.length）？section.next（）：$（'.firstscreen'）；
视差.utils.doSlide（下一个）；
}
否则如果（增量>0）{
节=（$（'.slided'）.length）？$（'.slided'）：$（'.firstscreen'）；
var prev=（section.prev（）.length）？section.prev（）：$（'.firstscreen'）；
视差、眼压、剂量（上）；
}
});
}
},
init:function（）{
for（本.fn中的var prop）{
if（这个.fn[prop]==“函数”的类型）{
本.fn[prop]（）；
}
}
}
};
视差初始化（）；
$('#....').scroll(function(){
$('#...').scrollTop($(this).scrollTop());
});