jquery - 背景图片滚动，点击控制

标签 jquery html css onclick scrollto

在一个网页上，我有一个名为 posts 的 div，在这个 div 中有几个名为 post 的 div，都有一个背景图片。 我设法编写了一个代码来滚动滚动条时滚动背景图像， body 滚动。 它完美地工作。

这是我的 html:

<div id="posts" class="hidden-md hidden-xs hidden-sm">
    <div class="post format_L photo" style="background-image:url(http://www.mmdwc.com/wp-content/uploads/1210-807-2.jpg)" alt="mmm artisanal" id="1"></div>
    <div class="post format_L photo" style="background-image:url(http://www.mmdwc.com/wp-content/uploads/1210-807-3.jpg)" alt="mmm artisanal" id="2"></div>
    <div class="post format_L photo" style="background-image:url(http://www.mmdwc.com/wp-content/uploads/1210-807.jpg)" alt="mmm artisanal" id="3"></div>
</div>

我的 CSS:

#posts {
    display: inline-block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.post {
    background-size: auto 80%;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
}

和我的jquery:

/* BACKGROUND SCROLL*/
    var lastpost = $(".post").last().offset().top
    var page = 1
    var loading = false

    $(window).scroll(function(){

        if (loading) return;

        if ($(window).scrollTop() > lastpost - window.innerHeight*1.5) {

            loading = true
            var $div = $("<div>")
            $div.load("/page/" + (++page) + " .post", function(){

                $("#posts").append($div.find(".post"))
                lastpost = $(".post").last().offset().top
                loading = false

            });

        }
    });

现在我尝试添加 2 个 div，一个名为 arrow_down，另一个为 arrow_up，当点击 arrow_down 时， body 滚动到下一个 div，当点击 arrow_up 时，我们滚动到上一个 div。

这是我的 html:

<div class="controls">
    <div class="arrow_down">Down</div>
    <div class="arrow_up">Up</div>
</div>

我的 CSS:

.controls {
    position : fixed;
    z-index: 1000;
}

和我的jquery:

function scrollToPosition(element) {
    if (element !== undefined) {
        $("body, html").scrollTo(element, 800, {
            margin: true
        });
    }
}

    //Create an Array of posts
    var posts = $('.post');
    var position = 0; //Start Position
    var next = $('.arrow_down');
    var prev = $('.arrow_up');


    next.click(function(evt) {
        //Scroll to next position
        scrollToPosition(posts[position += 1]);
        if (position === posts.length - 1) {
        }
    });

    prev.click(function(evt) {
        //Scroll to prev position    
        scrollToPosition(posts[position -= 1]);
        if (position === 0) {
        }
    });

它也很好用。

但我的问题是，在手动滚动页面转到下一张图片后，如果我单击 arrow_down，正文将滚动到已查看图片的下一张图片(就像被查看的图片已被记住)。所以 2 个箭头控件与我的手动滚动不同步。

事实上，我想我需要检查哪个帖子 div 正在查看，并在点击 arrow_down 时滚动到下一个帖子。不知道你明白我的意思吗？

这里有一个很好的理解方式: 手动滚动到图像 3(使用鼠标，而不是通过单击)，然后单击向下箭头。从逻辑上讲，您应该转到第 4 个图像...但它会滚动到图像 2，因为未检测到手动滚动，你应该从图片 1 开始，所以图片 1 + 1 = 图片 2

我可以为每个帖子 div 添加唯一的 Id，我认为这是一个很好的开始，但我现在被卡住了......

这里有一个 jsfiddle 可以看到它的实际效果:

http://jsfiddle.net/0hd2k2jf/6/

希望有人能帮我解决这个问题，也许还有另一种方法......但我确实需要保留背景图片幻灯片。

另一种方法是添加两个按钮，arrow_up 和 arrow_down。当点击它时，它会滚动我的窗口，就像默认滚动条一样，就像旧浏览器的滚动条一样。 arrow_up 和 arrow_down 将与我的滚动条同步。这实际上是完美的解决方案，但我找不到任何资源或方法。也许有人可以帮助解决这个问题？

最佳答案

您需要找出用户正在查看的当前 div，以便您可以使用向上和向下按钮。

var post_size=$(".post").height() #is the height of a single post

在单击向上和向下按钮时，您需要将当前滚动位置除以 post_size 以获得用户正在查看的帖子，假设所有帖子的大小都相同。

next.click(function(evt) {
    console.info($(document).scrollTop());
    console.info(post_size);

    var currentPage=Math.round($(document).scrollTop()/post_size); //get the current post the user is looking at

    console.info("next "+currentPage);
    //Scroll to next position
    if (currentPage === posts.length - 1) {
        console.info('at the end');
    }else{
        scrollToPosition(posts[currentPage+1]);
    }

});

休息吧，我使用了与您相同的代码来滚动到正确的帖子。 scrollTo 在我的浏览器上不工作，所以用对我有用的东西更新它，随时更改它。

/* BACKGROUND SCROLL*/
var lastpost = $(".post").last().offset().top
var page = 1
var loading = false
var scrolling =false
$(window).scroll(function() {

  if (loading) return;

  
  if ($(window).scrollTop() > lastpost - window.innerHeight * 1.5) {

    loading = true
    var $div = $("<div>")
    $div.load("/page/" + (++page) + " .post", function() {

      $("#posts").append($div.find(".post"))
      lastpost = $(".post").last().offset().top
      loading = false

    });

  }
});

/* ARROW CONTROLS */

function scrollToPosition(element) {
  if (element !== undefined) {
    $('html, body').finish();
    scrolling=true;
    console.info('scrolling to ' + $(element).offset().top);
    $('html, body').animate({
      scrollTop: $(element).offset().top
    }, 2000,function(){scrolling=false;});
  }
}

//Create an Array of posts
var posts = $('.post');
var position = 0; //Start Position
var next = $('.arrow_down');
var prev = $('.arrow_up');

//Better performance to use Id selectors than class selectors
next.click(function(evt) {
  var post_size = $(".post").height();
  console.info($(document).scrollTop());
  console.info(post_size);

  var currentPage = Math.round($(document).scrollTop() / post_size);

  console.info("next " + currentPage);
  //Scroll to next position
  if (currentPage === posts.length - 1) {
    console.info('at the end');
  } else {
    scrollToPosition(posts[currentPage + 1]);
  }

});

prev.click(function(evt) {
  
  var post_size = $(".post").height();
  console.info($(document).scrollTop());
  console.info(post_size);

  var currentPage = Math.round($(document).scrollTop() / post_size);
  console.info('prev ' + currentPage);
  //Scroll to prev position    
  if (currentPage === 0) {} else {
    scrollToPosition(posts[currentPage - 1]);
  }
});
#posts {
  display: inline-block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.post {
  background-size: auto 80%;
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
}
.controls {
  position: fixed;
  z-index: 1000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="controls">
  <div class="arrow_up">Up</div>
  <div class="arrow_down">Down</div>
</div>


<div id="posts" class="hidden-md hidden-xs hidden-sm">
  <div class="post format_L photo" style="background-image:url(http://images.akamai.steamusercontent.com/ugc/547511114426230968/6E44158F7B8B19739ABF834A1C524A1D6BBCD687/)" alt="mmm artisanal" id="1"></div>
  <div class="post format_L photo" style="background-image:url(http://2.bp.blogspot.com/-AgPay1JWsEQ/UpDLUnqCTgI/AAAAAAAAAdQ/VrgFrHCgGbw/s1600/512px-Number_2_in_light_blue_rounded_square.svg.png)" alt="mmm artisanal" id="2"></div>
  <div class="post format_L photo" style="background-image:url(http://lavoiedesreves.olympe.in/wordpress/wp-content/uploads/2014/03/reve-chiffre-3.jpg)" alt="mmm artisanal" id="3"></div>
  <div class="post format_L photo" style="background-image:url(http://meganunchained.weebly.com/uploads/2/4/2/3/24232185/560060_orig.png)" alt="mmm artisanal" id="4"></div>


</div>

关于jquery - 背景图片滚动，点击控制，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33734768/

上一篇：css - 自定义 Google 自定义搜索 (GCS) 文本和样式

下一篇：html - Div 无法根据不同的屏幕尺寸正确调整大小

相关文章：

javascript - JQuery 'Jcarousel' 插件错误，需要帮助

internet-explorer-8 - 当在我的页面中使用时，JsDatePick 的数据选择器在 IE8 中的外观全部损坏

html - 奇怪的 5px 边距

html - 与 Wordpress 中的自定义 CSS 和重力形式对齐

html - 在我的网页上没有从 Facebook 页面上获得喜欢

特定 li 的 jQuery 选择器

javascript - 减去颜色

javascript - 设置并使用 localStorage 在表单编辑期间保留复选框选择

jquery - 在将 z-index 设置为 -1 时，Bootstrap Carousel 控件无法单击

javascript - 锚定平滑滚动脚本跳跃

©2024 IT工具网  联系我们