Fatal编程技术网
  • javascript/
  • Javascript 滚动至顶部无法识别或裁剪顶部溢出

Javascript 滚动至顶部无法识别或裁剪顶部溢出

javascript jquery css

Javascript 滚动至顶部无法识别或裁剪顶部溢出,javascript,jquery,css,Javascript,Jquery,Css,这个问题有点难以解释：我在页面底部有一个图像。单击该图像后，我通过ajax加载下一页，而不删除该图像。如何裁剪或删除图像上方的所有空间？或者，一个更好的表达方式是，我如何在不明显的情况下滚动到顶部 我想要完成的事情——转到页面底部，看看当你点击图片时会发生什么。这背后的概念是什么？我可以具体告诉你该网站正在做什么 它们将每个页面放在一个名为的容器中。单击底部链接时，将添加一个新的，其中包含一个csstop属性，该属性将其推离屏幕底部，并且两个页面容器都设置为位置：绝对 两个页面容器的topcss

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

我想要完成的事情——转到页面底部，看看当你点击图片时会发生什么。这背后的概念是什么？

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

它们将每个页面放在一个名为
的容器中。单击底部链接时，将添加一个新的
，其中包含一个css
top
属性，该属性将其推离屏幕底部，并且两个页面容器都设置为
位置：绝对

两个页面容器的
top
css属性都使用Javascript计时器设置动画，直到第一个
被推离屏幕顶部，然后第一个页面容器从DOM中移除

在页面容器通过操纵的
top
属性移动的同时，滚动条位置将设置动画，使其与容器一起移动。动画完成后，新页面容器设置为
位置：relative
，滚动条再次位于屏幕顶部

这里有一个简单的例子，为了方便起见使用jQuery

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

它们将每个页面放在一个名为
的容器中。单击底部链接时，将添加一个新的
，其中包含一个css
top
属性，该属性将其推离屏幕底部，并且两个页面容器都设置为
位置：绝对

两个页面容器的
top
css属性都使用Javascript计时器设置动画，直到第一个
被推离屏幕顶部，然后第一个页面容器从DOM中移除

在页面容器通过操纵的
top
属性移动的同时，滚动条位置将设置动画，使其与容器一起移动。动画完成后，新页面容器设置为
位置：relative
，滚动条再次位于屏幕顶部

下面是一个简单的例子，为了方便起见使用jQuery，您也可以这样做。

HTML

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

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;}
}

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));
  });
}

var获取一些图像=”https://placehold.it/640x480";
var get_container=document.getElementById（“容器”）；
init（11）；
//函数，它创建了
函数create\u img\u elem（内容、索引）{
var new_elem=document.createElement（“div”）；
var标签=document.createElement（“div”）；
new_elem.className=“img_elems”；
new_elem.id=“img_elem”+索引；
new_elem.style.background=“url（“+content+”）无重复中心”；
新的元素setAttribute（“数据元素数”，索引）；
label.className=“label”；
label.id=“label”+索引；
label.innerHTML=“#”+索引；
新元素追加子元素（标签）
获取容器appendChild（新元素）；
}
//创建元素的函数
函数创建页面（内容、索引）{
var new_elem=document.createElement（“div”）；
var标签=document.createElement（“div”）；
new_elem.className=“pages”；
new_elem.id=“page”+索引；
new_elem.innerHTML=内容；
新的元素setAttribute（“数据元素数”，索引）；
获取容器appendChild（新元素）；
$（“#页面”+索引）.addClass（“淡入”）；
}
函数单击事件（单击\u img）{
//获取容器上的所有元素
var数组_elems=$（'#容器'）.children（）；
//获取已单击元素的数据属性“data elem num”
var clicked\u elem=clicked\u img[0]。属性[2]。值；
//存储“数据元素数”属性
变量元素ID；

对于（var j=0，len_elems=array_elems.length；j您也可以这样做。


HTML


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


JS


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;}
}



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));
  });
}



var获取一些图像=”https://placehold.it/640x480";
var get_container=document.getElementById（“容器”）；
init（11）；
//函数，它创建了
函数create\u img\u elem（内容、索引）{
var new_elem=document.createElement（“div”）；
var标签=document.createElement（“div”）；
new_elem.className=“img_elems”；
new_elem.id=“img_elem”+索引；
new_elem.style.background=“url（“+content+”）无重复中心”；
新的元素setAttribute（“数据元素数”，索引）；
label.className=“label”；
label.id=“label”+索引；
label.innerHTML=“#”+索引；
新元素追加子元素（标签）
获取容器appendChild（新元素）；
}
//创建元素的函数
函数创建页面（内容、索引）{
var new_elem=document.createElement（“div”）；
var标签=document.createElement（“div”）；
new_elem.className=“pages”；
new_elem.id=“page”+索引；
new_elem.innerHTML=内容；
新的元素setAttribute（“数据元素数”，索引）；
获取容器appendChild（新元素）；
$（“#页面”+索引）.addClass（“淡入”）；
}
函数单击事件（单击\u img）{
//获取容器上的所有元素
var数组_elems=$（'#容器'）.children（）；
//获取已单击元素的数据属性“data elem num”
var clicked\u elem=clicked\u img[0]。属性[2]。值；
//存储“数据元素数”属性
变量元素ID；

对于（var j=0，len_elems=array_elems.length；j工作得很好！谢谢。你对跨浏览器/移动支持有什么建议吗？使用这种方法需要注意的事情？我想不出有什么想法，除了当你尝试用Javascript设置CSS属性的动画时，大多数手机都会对你吐出来。工作得很好！谢谢。你有什么想法吗e关于跨浏览器/移动支持有什么建议吗？使用这种方法需要注意的事情？我想不出任何事情会超出我的想象，除了大多数手机会在你尝试使用Javascript设置CSS属性动画时呕吐之外。也许你可以解释一下这种设计，因为我不明白