1

我想使用https://github.com/lonekorean/mini-preview仅为网站的某些部分创建鼠标悬停预览。

使用目标网站的锚点让脚本呈现完整的网站预览，滚动到单个锚点所在的位置，我没有任何问题。然而，这不是我所追求的。

我希望脚本只显示锚的父 <p> 或 <div> 的内容。

在网站上，链接目标锚的编码如下：

<div class="paragraph">
    <p>
        <a id="anchor_1"></a>
        Foo bar baz.
    </p>
</div>

所以，我希望Foo bar baz.只显示小预览框。

我怀疑答案在于脚本的这一部分：

loadPreview: function() {
    this.$el.find('.' + PREFIX + '-frame')
        .attr('src', this.$el.attr('href'))
        .on('load', function() {
            // some sites don't set their background color
            $(this).css('background-color', '#fff');
});

具体来说，.attr('src', this.$el.attr('href'))部分。不过我不确定。

有谁知道我该怎么做？
或者你能推荐一些其他的脚本，我可以用它来做这个，让事情看起来和这个一样好？

我不是网络开发人员，所以请放轻松。
谢谢

更新（基于斯瓦蒂的回答和相应的评论）：

例如，如果我的网站包含以下内容：

<body>
    <p>
        <a href="#anchor_on_my_site">See internal</a>
    </p>
    <p>
        <a href="external_website.html#external_anchor">See external</a>
    </p>
    <div class="paragraph">
        <p>
            <a id="anchor_on_my_site"></a>
                Foo bar baz.
        </p>
    </div>
</body>

外部网站包括：

<body>
    <div class="paragraph">
        <p>
            <a id="external_anchor"></a>
                Qux quux quuz.
        </p>
    </div>
</body>

我想See internal展示Foo bar baz.和See external展示Qux quux quuz.

4

1 回答 1

1

loadPreview您可以使用内部函数从悬停的标签中closest('p').clone().children().remove().end().text()获取文本，然后使用该函数将该文本显示在您的框架 div 中，即：。pa.find('.' + PREFIX + '-frame').text(data_to_show)

演示代码：

(function($) {
  var PREFIX = 'mini-preview';

  $.fn.miniPreview = function(options) {
    return this.each(function() {
      var $this = $(this);
      var miniPreview = $this.data(PREFIX);
      if (miniPreview) {
        miniPreview.destroy();
      }

      miniPreview = new MiniPreview($this, options);
      miniPreview.generate();
      $this.data(PREFIX, miniPreview);
    });
  };

  var MiniPreview = function($el, options) {
    this.$el = $el;
    this.$el.addClass(PREFIX + '-anchor');
    this.options = $.extend({}, this.defaultOptions, options);
    this.counter = MiniPreview.prototype.sharedCounter++;
  };

  MiniPreview.prototype = {
    sharedCounter: 0,

    defaultOptions: {
      width: 256,
      height: 144,
      scale: .25,
      prefetch: 'parenthover'
    },

    generate: function() {
      this.createElements();
      this.setPrefetch();
    },

    createElements: function() {
      var $wrapper = $('<div>', {
        class: PREFIX + '-wrapper'
      });
      //no need to use iframe...use simple div 
      var $frame = $('<div>', {
        class: PREFIX + '-frame'
      });
      var $cover = $('<div>', {
        class: PREFIX + '-cover'
      });
      $wrapper.appendTo(this.$el).append($frame, $cover);

      // sizing
      $wrapper.css({
        width: this.options.width + 'px',
        height: this.options.height + 'px'
      });

      // scaling
      var inversePercent = 100 / this.options.scale;
      $frame.css({
        width: inversePercent + '%',
        height: inversePercent + '%',
        transform: 'scale(' + this.options.scale + ')'
      });
      var fontSize = parseInt(this.$el.css('font-size').replace('px', ''), 10)
      var top = (this.$el.height() + fontSize) / 2;
      var left = (this.$el.width() - $wrapper.outerWidth()) / 2;
      //add more style here ...if needed to outer div
      $wrapper.css({
        top: top + 'px',
        left: left + 'px',
        'font-size': '55px',
        'color': 'blue'
      });
    },

    setPrefetch: function() {
      switch (this.options.prefetch) {
        case 'pageload':
          this.loadPreview();
          break;
        case 'parenthover':
          this.$el.parent().one(this.getNamespacedEvent('mouseenter'),
            this.loadPreview.bind(this));
          break;
        case 'none':
          this.$el.one(this.getNamespacedEvent('mouseenter'),
            this.loadPreview.bind(this));
          break;
        default:
          throw 'Prefetch setting not recognized: ' + this.options.prefetch;
          break;
      }
    },

    loadPreview: function() {
      //to get text from p tag
      var data_to_show = this.$el.closest('p').clone().children().remove().end().text().trim()
      //set new text inside div frame
      this.$el.find('.' + PREFIX + '-frame').text(data_to_show)
      //set bg color..
      this.$el.find('.' + PREFIX + '-frame').css('background-color', '#fff');


    },

    getNamespacedEvent: function(event) {
      return event + '.' + PREFIX + '_' + this.counter;
    },

    destroy: function() {
      this.$el.removeClass(PREFIX + '-anchor');
      this.$el.parent().off(this.getNamespacedEvent('mouseenter'));
      this.$el.off(this.getNamespacedEvent('mouseenter'));
      this.$el.find('.' + PREFIX + '-wrapper').remove();

    }
  };
})(jQuery);


$('a').miniPreview();
body {
  height: 100%;
  margin: 0;
  padding: 0 10% 40px;
  font-size: 2rem;
  line-height: 1.5;
  font-family: 'Roboto Slab', sans-serif;
  text-align: justify;
  color: #59513f;
  background-color: #f5ead4;
}

a {
  color: #537f7c;
}

.mini-preview-anchor {
  display: inline-block;
  position: relative;
  white-space: nowrap;
}

.mini-preview-wrapper {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  position: absolute;
  overflow: hidden;
  z-index: -1;
  opacity: 0;
  margin-top: -4px;
  border: solid 1px #000;
  box-shadow: 4px 4px 6px rgba(0, 0, 0, .3);
  transition: z-index steps(1) .3s, opacity .3s, margin-top .3s;
}

.mini-preview-anchor:hover .mini-preview-wrapper {
  z-index: 2;
  opacity: 1;
  margin-top: 6px;
  transition: opacity .3s, margin-top .3s;
}

.mini-preview-cover {
  background-color: rgba(0, 0, 0, 0);
  /* IE fix */
}

.mini-preview-frame {
  border: none;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body>
  <div class="paragraph">
    <p>
      <a id="anchor_1">See</a> This is text we are showing for first
    </p>
    <p>
      <a id="anchor_2">See</a> This is text we are showing for second
    </p>
  </div>
</body>

</html>

更新 1：

您可以使用某些类来区分外部链接和内部链接，即：只需检查a悬停的标签是否具有特定的类，这取决于更改您的代码以预览 div。

更新代码：

if (this.$el.hasClass("internal")) {
        //to get text from p tag
        var data_to_show = this.$el.closest('p').siblings(".paragraph").clone().text().trim()
        //set new text inside div frame
        this.$el.find('.' + PREFIX + '-frame').text(data_to_show)
        //set bg color..
        this.$el.find('.' + PREFIX + '-frame').css('background-color', '#fff');
} else {       
        console.log("for external code ..")    
}
于 2021-03-19T05:20:34.930 回答