小编und*_*ken的帖子

我使用fullpage.js来实现垂直和水平滚动.

我想在第2节滚动时滑块滑动.

功能类似于本 网站

这是我的代码:

$(document).ready(function() {
$('#fullpage').fullpage({
    sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
    anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
    menu: '#menu',
    css3: true,
    loop: false,
    afterLoad: function(anchorLink, index) {
        var loadedSection = $(this);

        //using index
        if (index == 3) {
            $.fn.fullpage.setAllowScrolling(false);
            $.fn.fullpage.setKeyboardScrolling(false);
            $(window).bind('mousewheel DOMMouseScroll', function(event) {
                if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
                    $(".fp-prev").click();
                    if ($(".fp-slide:first-child").hasClass("active")) {
                        $.fn.fullpage.setAllowScrolling(true);
                        $.fn.fullpage.setKeyboardScrolling(true);
                    }
                } else {
                    $(".fp-next").click();
                    if ($(".fp-slide:last-child").hasClass("active")) {
                        $.fn.fullpage.setAllowScrolling(true);
                        $.fn.fullpage.setKeyboardScrolling(true);
                    }
                }
            });
        }
    }
});

});

对于视觉:

我试图修复Section 2一旦它到达视口,在每个滚动上,左边的下一个段落突出显示到另一个,右边的电话屏幕滑到下一个.

因此,在每个卷轴上,我想突出显示下一个文本并更改手机内部的方式,就像您在许多应用程序登录页面上看到的那样.

这是一个演示

我一直试图获得一个输出，其中图像被掩盖在一个双筒望远镜形状的元素内。圆形部分随鼠标光标移动，无论鼠标移到哪里，它都会显示图像的一部分。还需要将鼠标设置为不退出主容器。

输出图像：

其余部分将保持黑色，并且在鼠标移动时只有该形状的元素可见。

我尝试了以下代码：

  $('.clipping-cursor').on('mousemove', function(e) {

    var parentOffset = $(this).parent().offset();
    var relativeXPosition = (e.pageX - parentOffset.left); //offset -> method allows you to retrieve the current position of an element 'relative' to the document
    var relativeYPosition = (e.pageY - parentOffset.top);

    $('.clipping-cursor').css({
      left: relativeXPosition,
      top: relativeYPosition
    });
  });

.collaborate-wrapper {
  width: 100%;
  height: 90vh;
  background: #000;
  overflow: hidden;
  position: relative;
}
.clipping-cursor {
  width: 1000px;
  height: 580px;
  box-sizing: border-box;
  position: absolute;
  margin-top: -290px;
  margin-left: -500px;
  background-image: url('../images/background/collaborate-2.svg');
  background-repeat: no-repeat;
  background-size: container; …

我试图将一个元素固定在一个容器中,但固定元素似乎是根据屏幕而不是父元素定位自己.

我的代码:

<div class="relative">
  <div class="absolute">
    <div class="fixed"></div>
  </div>
</div>

Css:

.relative{
  position: relative;
  height:800px;
  width: 400px;
  background: #000;
}

.absolute{
  height:60px;
  width: 60px;
  position: absolute;
  top:0;
  right:0;
  background: #ccc;
  -webkit-transform: translateZ(0); 
}

.fixed{
  height:20px;
  width: 20px;
  background: red;
  position: fixed;
  top:0;
  right:0;
}

我想把红色框固定在灰色框内.但现在当我滚动框滚动并且仍未固定.

现场观看:http://codepen.io/undefinedtoken/pen/abhgc