Question

这个问题有点难以解释：我在页面底部有一个图像。单击该图像后，我通过ajax加载下一页而不删除该图像。如何裁剪或移除图像上方的所有空间？或者，也许更好的方法是如何不明显地滚动到顶部？

Here is perfect example我想要完成的任务 - 转到页面底部，看看点击图片时会发生什么。这背后的概念是什么？

Answer 1

我可以具体告诉你该网站正在做什么。

他们将每个页面都放在一个名为<div class="page-container">的容器中。单击底部链接时，会添加一个新的<div class="page-container">，其中包含css top属性，该属性会将其从屏幕底部推出，并且两个页面容器都设置为position:absolute。

两个页面容器的top css属性都使用Javascript计时器进行动画处理，直到第一个<div class="page-container">被推离屏幕顶部，然后第一个页面容器从DOM中删除。< / p>

同时页面容器通过被操纵的top属性移动，滚动条位置被动画化，因此它随容器一起移动。完成动画并将新页面容器设置为position:relative后，滚动条将再次位于屏幕顶部。

这是一个使用jQuery以方便https://jsfiddle.net/0bzt9mmq/

的粗略示例

Answer 2

您也可以这样做。 https://jsfiddle.net/vh60oycj/2/

<强> HTML

<div id="container"></div>

<强> CSS

body{
  width:100%;
  height:100%;
}
#container{
  width:100vw;
  height:100vh;
}

.img_elems{
  width: 640px;
  height: 480px;
  padding: 5px;
}

.pages{
  width: 640px;
  height: 480px;
  margin: 5px;
  background: #000;
  color:#fff;
}

.label{
  width:  20px;
  height: 20px;
  background-color: #fff;
  padding: 5px;
}

.move{
    position: relative;
    -webkit-animation-name: slide; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    animation-name: slide;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes slide {
    0%   { top: 100%}
    100% { top: 0;}
}

@keyframes slide {
    0%   { top: 100%}
    100% { top: 0;}
}

.fade{
    position: relative;
    -webkit-animation-name: fade; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
    animation-name: fade;
    animation-duration: 2s;
}

@-webkit-keyframes fade {
    0%   { opacity : 0;}
    100% { opacity : 1;}
}

<强> JS

var get_some_images =  "https://placehold.it/640x480";
var get_container = document.getElementById("container");

init(11);

//function that create the it
function create_img_elem(content,index){
    var new_elem = document.createElement("div");
  var label = document.createElement("div");
    new_elem.className = "img_elems";
  new_elem.id = "img_elem"+index;
  new_elem.style.background = "url('"+ content +"') no-repeat center";
  new_elem.setAttribute("data-elem-num", index);

  label.className = "label";
  label.id = "label" + index;
  label.innerHTML = "#" + index;

  new_elem.appendChild(label)
  get_container.appendChild(new_elem);
}

//function that create the elem
function create_page(content,index){
    var new_elem = document.createElement("div");
  var label = document.createElement("div");
    new_elem.className = "pages";
  new_elem.id = "page" + index;
  new_elem.innerHTML = content;
  new_elem.setAttribute("data-elem-num", index);
  get_container.appendChild(new_elem);
  $( "#page" + index).addClass("fade");
}

function click_event (clicked_img){

   //getting all the elements on container
     var array_elems = $('#container').children();

   //getting data attributes "data-elem-num" of clicked_element
   var clicked_elem = clicked_img[0].attributes[2].value;

   //store "data-elem-num" attr
   var elem_ids;

   for(var j = 0, len_elems = array_elems.length; j <len_elems;j++){
     elem_ids = array_elems[j].attributes[2].value;

     //store "data-elem-num" attr
     if(elem_ids !== clicked_elem){
      //instead of fadeout from jquery, you can do css animation. better animation that way
        $( "#img_elem" + elem_ids).fadeOut("fast");

     }else{
         create_page("this is about element " + clicked_elem, clicked_elem);
        $("#img_elem" + clicked_elem).addClass('move fade').css("pointer-events", "none");
     }

   }
}

function init(amount_of_elements){
  for(var i=0, len = amount_of_elements; i < len; i++){
    create_img_elem(get_some_images,i)
  }
  $(".img_elems").click(function(){
    click_event ($(this));
  });
}

我正在访问已经点击并循环的DOM对象，以查看是否有任何匹配我点击的项目。如果不隐藏它们，后面的元素和任何元素都会消失其他元素。我知道你已经有了解决方案，我想这更多的资源。

滚动到顶部不连续或顶部溢出

2 个答案: