phe*_*hew 5 html javascript jquery css3
我只是偶然发现了http://www.newego.de/,并想知道他们在初始页面上使用的"图像幻灯片效果"是如何完成的.
当您向上滚动背景图像更改并在浏览完所有"介绍/欢迎"页面幻灯片后,您将被引导至主要网站内容.
我试图从好奇心和学习目的中复制效果,因此我最近开始深入研究响应式网页设计,但我有点卡住并且不确定我的方法是否是一个很好的解决方案.
这个JSFiddle是我试图复制图像滑块的程度.
$(window).bind('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
console.log('scrolling down');
}
else {
console.log('scrolling up');
$('.s1').slideUp('slow');
}
});* { margin: 0; padding: 0 }
#menubar {
width: 100%;
background-color: orange;
height: 60px;
}
.slide {
position: absolute;
width: 100%;
top: 60px;
bottom: 0;
}
.slide.s1 { background-color: green; }
.slide.s2 { background-color: red; }
.slide.s3 { background-color: cornflowerblue; }
.l1 { z-index: 3; }
.l2 { z-index: 2; }
.l3 { z-index: 1; }<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<html>
<body>
<header id="menubar"><p>hi im a header</p></header>
<section class="slide s1 l1"><p>im the first</p></section>
<section class="slide s2 l2"><p>im the second</p></section>
<section class="slide s3 l3"><p>im the third</p></section>
</body>
</html>我的想法是只.slide使用层次结构将三个容器填入"空视口空间" z-index,然后.slide使用jQuery的.slideUp()函数向上滑动最顶层的容器.
但是,我不确定这是不是很好,因为我不知道如何选择最顶层的容器才能淡出它.
我应该采用更简单(如果可能更模块化)的方法吗？有没有一种有效的方法(jQuery/CSS选择器)来找到当前可见的最顶层 .slide？
这是您想要的效果的 JSFiddle： https://jsfiddle.net/d1xzc4jf/7/
这是相关的 jQuery 代码：
$(window).bind('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0)
{
console.log('scrolling down');
if ($('.s2').is(':visible')) { $('.s3').slideDown('slow'); }
else if ($('.s1').is(':visible')) { $('.s2').slideDown('slow'); }
}
else
{
console.log('scrolling up');
if ($('.s3').is(':visible')) { $('.s3').slideUp('slow'); }
else if ($('.s2').is(':visible')) { $('.s2').slideUp('slow'); }
}
});
一种方法是放置所有 div 并将其display属性设置为none（当前显示的除外）。这就是项目从 jQueryslideUp函数向上滑动后所发生的情况。您可以检查哪一个是可见的，并使用您喜欢的任何方法将其隐藏，同时显示下一个。
更新：
双击时发生 double-slideUp 而不是 double-slideDown 的原因是因为该visible属性设置在 a 的开头slideDown，但它设置在a 的末尾slideUp。
为了防止硬滚动产生 double-slideUp 效果，请在启动动画时设置一个变量来指示动画正忙，并在动画结束时使用回调函数将该变量设置为不忙，如下所示：
首先，将其放在页面底部：
<script> var isbusy = 0; </script>
然后将此代码用于您的滚动功能：
$(window).bind('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
console.log('scrolling up');
if ($('.s2').is(':visible')) {
if (isbusy == 0)
{
isbusy = 1;
$('.s3').slideDown('slow', function() {
isbusy = 0;
})
}
}
else
{
if ($('.s1').is(':visible'))
{
if (isbusy == 0)
{
isbusy = 1;
$('.s2').slideDown('slow', function(){
isbusy = 0;
});
}
}
}
}
else
{
console.log('scrolling down');
if ($('.s3').is(':visible'))
{
if (isbusy == 0)
{
isbusy = 1;
$('.s3').slideUp('slow', function(){
isbusy = 0;
});
}
}
else if ($('.s2').is(':visible'))
{
if (isbusy == 0)
{
isbusy = 1;
$('.s2').slideUp('slow', function(){
isbusy = 0;
});
}
}
}
});
该代码起作用的原因是，回调函数在动画完成时执行，因此isbusy在动画完成时更改为零，同时不会阻止更多代码运行。
| 归档时间： |
|
| 查看次数： |
100 次 |
| 最近记录： |