Fatal编程技术网
  • javascript/
  • Javascript 只有当视口中的整个元素处于活动状态时，jQuery.exe才会显示为激发

Javascript 只有当视口中的整个元素处于活动状态时，jQuery.exe才会显示为激发

javascript jquery

Javascript 只有当视口中的整个元素处于活动状态时，jQuery.exe才会显示为激发,javascript,jquery,Javascript,Jquery,我目前正在使用更改元素进入视口时的类别。该插件工作得很好，只是当元素的顶部进入视图时，它会立即启动。我想对其进行调整，使其仅在整个元素位于视口内或接近视口时激发 代码： jQuery Waypoints插件也很有用。当元素在屏幕上可见时，它会触发一个动作 $('.entry').waypoint(function() { alert('The element is appeared on the screen.'); }); 上有一些示例。我更改了一些代码，以便您可以检查元素是否完全可见

我目前正在使用更改元素进入视口时的类别。该插件工作得很好，只是当元素的顶部进入视图时，它会立即启动。我想对其进行调整，使其仅在整个元素位于视口内或接近视口时激发

代码：

jQuery Waypoints插件也很有用。当元素在屏幕上可见时，它会触发一个动作

$('.entry').waypoint(function() {
   alert('The element is appeared on the screen.');
});
上有一些示例。

我更改了一些代码，以便您可以检查元素是否完全可见。删除了将触发事件的代码，因为使用destroy（尚未实现）更难清理。我将尝试根据文档制作：

以下是html页面：

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script src="appear.js"></script>
<script>
    $(document).ready(function(){
        //TODO: not sure if there is such a thing as selector
        //  namespaces but could try that to add both appear and
        //  fully-appear to same selector elements
        $('#fully').appear(function(){
            console.log("full view");
        },{fullView:true});
        $('#partly').appear(function(){
            console.log("partly visible");
        });
        $(window).scrollTop(1400).scrollLeft(1000);
    });
</script>
</head>
<body >
    <div style="width:3000px;height: 3000px"></div>
    <div id="fully" style="width:50px;height:75px;
    position: absolute;left:1500px;top:1500px;
    background: black">
    </div>
    <div id="partly" style="width:50px;height:75px;
    position: absolute;left:1450px;top:1350px;
    background: yellow">
    </div>
</body>
</html>


$（文档）.ready（函数（）{
//TODO:不确定是否有选择器这样的东西
//名称空间，但可以尝试添加显示和
//完全显示在相同的选择器元素中
$（'#fully'）。出现（函数（）{
控制台日志（“完整视图”）；
}，{fullView:true}）；
$（'#部分'）。出现（函数（）{
控制台日志（“部分可见”）；
});
$（窗口）。滚动顶部（1400）。滚动左侧（1000）；
});
而修改后的appeal.js

/*
* jQuery appear plugin
*
* Copyright (c) 2012 Andrey Sidorov
* licensed under MIT license.
* Edit by HRM 2013 02 01
* https://github.com/morr/jquery.appear/
*
* Version: 0.2.1
*/
(function($) {
  var selectors = [];
  var $window = $(window);
  var $document = $(document);

  function process(p) {
    p.checkLock = false;
    var $appeared = p.elements.filter(function() {
        return $(this).is(p.filterName);
    });
    if($appeared.length==0){
      return;
    }
    p.callback($appeared);
  }

  // "appeared" custom filter
  $.expr[':']['appeared'] = function(element) {
    var $element = $(element);
    if (!$element.is(':visible')) {
      return false;
    }

    var window_left = $window.scrollLeft();
    var window_top = $window.scrollTop();
    var offset = $element.offset();
    var left = offset.left;
    var top = offset.top;
    if (top + $element.height() >= window_top &&
        top - ($element.data('appear-top-offset') || 0)
          <= window_top + $window.height() &&
        left + $element.width() >= window_left &&
        left - ($element.data('appear-left-offset') || 0)
          <= window_left + $window.width()) {
      return true;
    } else {
      return false;
    }
  }

   // "in-full-view" custom filter
  $.expr[':']['fully-appeared'] = function(element) {
    var $element = $(element);
    if (!$element.is(':visible')) {
      return false;
    }
    wLeft=$window.scrollLeft();
    wTop=$window.scrollTop();
    var offset = $element.offset();
    var left = offset.left- ($element.data
      ('appear-left-offset') || 0);
    var right = (offset.left+$element.width()) -
      ($element.data('appear-left-offset') || 0);
    var top = offset.top - ($element.data
      ('appear-top-offset') || 0);
    var bottom = offset.top+$element.height();
    var window_left = wLeft;
    var window_top = wTop;
    var window_right = wLeft+ $window.width();
    var window_bottom = wTop+$window.height();

    if (window_bottom>=bottom&&
        window_top<=top&&
        window_left<=left&&
        window_right>=right ) {
      return true;
    } else {
      return false;
    }
  }

  function compare(o1,o2){
    //simple compare, assumes all properties of o1 and o2 are
    //  simple types make sure that o1 is not undefined
    //  comparing goes much further but requires writing another
    //  extension
    if(typeof o2=="undefined"){
      return false;
    }
    var i;
    for(i in o1){
      if(typeof o2[i]=="undefined"){
        return false;
      }
    }
    for(i in o1){
      if(o1[i]!=o2[i]){
        return false;
      }
    }
    return true;
  }

  function checkExist(selector){
    return !(typeof selectors[selector]=="undefined");
  }

  $.fn.extend({
    // watching for element's appearance in browser viewport
    appear: function(callback, options) {
      if(typeof callback != "function"){
        throw("Have to provide a callback: "
          +"$('selector').appear(function()....");
      }
      var defaults = {
        interval: 250
      }
      var index=this.selector;
      if(index==""){
        throw("Can't use an empty selector with this function.");
      }
      $.extend(defaults, options || {});
      var exist=checkExist(index);
      if(!exist){
        selectors[index]=defaults;
      }
      var checkBind=compare(defaults,
        selectors[index]);
      selectors[index]=defaults;
      var p={
        checkLock:false,
        filterName:(defaults.fullView)?":fully-appeared":":appeared",
        callback:callback,
        elements:this
      }
      if ((!checkBind)||(!exist)) {
        $(window).off("scroll."+index,on_check)
          .on("resize."+index,on_check);
        var on_check = function() {
          if (p.checkLock) {
            return;
          }
          p.checkLock = true;
          setTimeout(function(){
            process(p);
          }, defaults.interval);
        };

        $(window).on("scroll."+index,on_check)
          .on("resize."+index,on_check);
      }

      if (options && options.force_process) {
        setTimeout(process, defaults.interval);
      }
      return $(this.selector);
    }
  });

  $.extend({
    // force elements's appearance check
    force_appear: function() {
      if (check_binded) {
        process();
        return true;
      };
      return false;
    }
  });
})(jQuery);

/*
*jQuery显示插件
*
*版权所有（c）2012安德烈·西多罗夫
*获得麻省理工学院许可证。
*人力资源部编辑2013 02 01
* https://github.com/morr/jquery.appear/
*
*版本：0.2.1
*/
（函数（$）{
变量选择器=[]；
变量$window=$（window）；
var$document=$（文档）；
功能过程（p）{
p、 checkLock=false；
var$executed=p.elements.filter（函数（）{
return$（this）.is（p.filterName）；
});
如果（$s.length==0）{
返回；
}
p、 回调（$）；
}
//“出现”自定义筛选器
$.expr['：']['出现的']=函数（元素）{
变量$element=$（element）；
如果（！$element.is（':visible'））{
返回false；
}
var window_left=$window.scrollLeft（）；
var window_top=$window.scrollTop（）；
var offset=$element.offset（）；
var left=offset.left；
var top=offset.top；
如果（顶部+$element.height（）>=窗口顶部&&
顶部-（$element.data（'appease-top-offset'）| | 0）
=窗口左&&
左-（$element.data（'seen-left-offset'）| | 0）
=底部&&

窗口定义“当它们进入视口时”当用户向下滚动页面，元素滚动到视图中时，我已经更改了显示插件，因为我需要一些制作jQuery扩展的练习。它还没有完成，但可以工作。删除了将触发事件的部分。您只能添加完整视图或某个选择器字符串可见的部分，因此$（“#myid”）不能同时对其进行完全和部分赋值。@HMR现在工作得很好！谢谢！但有趣的是，在代码中，默认情况下它会考虑元素的高度和宽度。您使用的是该插件的旧版本吗？奇怪的是，它不能工作，因为我不明白如果只有部分是v，为什么它会触发“出现”事件可见。也许你设置了“显示顶部偏移量”或“显示左侧偏移量”？我从github下载了最新的一个，不，我没有设置任何内容，只是将js文件放在页面中，并使用上面的脚本。我需要设置该插件吗？

/*
* jQuery appear plugin
*
* Copyright (c) 2012 Andrey Sidorov
* licensed under MIT license.
* Edit by HRM 2013 02 01
* https://github.com/morr/jquery.appear/
*
* Version: 0.2.1
*/
(function($) {
  var selectors = [];
  var $window = $(window);
  var $document = $(document);

  function process(p) {
    p.checkLock = false;
    var $appeared = p.elements.filter(function() {
        return $(this).is(p.filterName);
    });
    if($appeared.length==0){
      return;
    }
    p.callback($appeared);
  }

  // "appeared" custom filter
  $.expr[':']['appeared'] = function(element) {
    var $element = $(element);
    if (!$element.is(':visible')) {
      return false;
    }

    var window_left = $window.scrollLeft();
    var window_top = $window.scrollTop();
    var offset = $element.offset();
    var left = offset.left;
    var top = offset.top;
    if (top + $element.height() >= window_top &&
        top - ($element.data('appear-top-offset') || 0)
          <= window_top + $window.height() &&
        left + $element.width() >= window_left &&
        left - ($element.data('appear-left-offset') || 0)
          <= window_left + $window.width()) {
      return true;
    } else {
      return false;
    }
  }

   // "in-full-view" custom filter
  $.expr[':']['fully-appeared'] = function(element) {
    var $element = $(element);
    if (!$element.is(':visible')) {
      return false;
    }
    wLeft=$window.scrollLeft();
    wTop=$window.scrollTop();
    var offset = $element.offset();
    var left = offset.left- ($element.data
      ('appear-left-offset') || 0);
    var right = (offset.left+$element.width()) -
      ($element.data('appear-left-offset') || 0);
    var top = offset.top - ($element.data
      ('appear-top-offset') || 0);
    var bottom = offset.top+$element.height();
    var window_left = wLeft;
    var window_top = wTop;
    var window_right = wLeft+ $window.width();
    var window_bottom = wTop+$window.height();

    if (window_bottom>=bottom&&
        window_top<=top&&
        window_left<=left&&
        window_right>=right ) {
      return true;
    } else {
      return false;
    }
  }

  function compare(o1,o2){
    //simple compare, assumes all properties of o1 and o2 are
    //  simple types make sure that o1 is not undefined
    //  comparing goes much further but requires writing another
    //  extension
    if(typeof o2=="undefined"){
      return false;
    }
    var i;
    for(i in o1){
      if(typeof o2[i]=="undefined"){
        return false;
      }
    }
    for(i in o1){
      if(o1[i]!=o2[i]){
        return false;
      }
    }
    return true;
  }

  function checkExist(selector){
    return !(typeof selectors[selector]=="undefined");
  }

  $.fn.extend({
    // watching for element's appearance in browser viewport
    appear: function(callback, options) {
      if(typeof callback != "function"){
        throw("Have to provide a callback: "
          +"$('selector').appear(function()....");
      }
      var defaults = {
        interval: 250
      }
      var index=this.selector;
      if(index==""){
        throw("Can't use an empty selector with this function.");
      }
      $.extend(defaults, options || {});
      var exist=checkExist(index);
      if(!exist){
        selectors[index]=defaults;
      }
      var checkBind=compare(defaults,
        selectors[index]);
      selectors[index]=defaults;
      var p={
        checkLock:false,
        filterName:(defaults.fullView)?":fully-appeared":":appeared",
        callback:callback,
        elements:this
      }
      if ((!checkBind)||(!exist)) {
        $(window).off("scroll."+index,on_check)
          .on("resize."+index,on_check);
        var on_check = function() {
          if (p.checkLock) {
            return;
          }
          p.checkLock = true;
          setTimeout(function(){
            process(p);
          }, defaults.interval);
        };

        $(window).on("scroll."+index,on_check)
          .on("resize."+index,on_check);
      }

      if (options && options.force_process) {
        setTimeout(process, defaults.interval);
      }
      return $(this.selector);
    }
  });

  $.extend({
    // force elements's appearance check
    force_appear: function() {
      if (check_binded) {
        process();
        return true;
      };
      return false;
    }
  });
})(jQuery);