-1

我有一些小问题,我有一个插件可以获取我的推特提要,效果很好!但是我希望它滚动浏览

  • 结果,它在主容器#twitterFeed 上设置 vTickert CSS,但没有做任何其他事情,我假设可能需要在脚本中手动加载所有内容后调用它?

    用于 twitter fetch 的 JS 插件/我也在这里添加了 vticker

    var twitterFetcher = function() {
        function v(a) {
            return a.replace(/<b[^>]*>(.*?)<\/b>/gi, function(a, f) {
                return f
            }).replace(/class=".*?"|data-query-source=".*?"|dir=".*?"|rel=".*?"/gi, "")
        }
    
        function l(a, c) {
            for (var f = [], g = new RegExp("(^| )" + c + "( |$)"), b = a.getElementsByTagName("*"), h = 0, e = b.length; h < e; h++) g.test(b[h].className) && f.push(b[h]);
            return f
        }
        var w = "",
            k = 20,
            x = !0,
            m = [],
            q = !1,
            n = !0,
            p = !0,
            r = null,
            s = !0,
            y = !0,
            t = null,
            z = !0;
        return {
            fetch: function(a) {
                void 0 === a.maxTweets && (a.maxTweets = 20);
                void 0 === a.enableLinks && (a.enableLinks = !0);
                void 0 === a.showUser && (a.showUser = !0);
                void 0 === a.showTime && (a.showTime = !0);
                void 0 === a.dateFunction && (a.dateFunction = "default");
                void 0 === a.showRetweet && (a.showRetweet = !0);
                void 0 === a.customCallback && (a.customCallback = null);
                void 0 === a.showInteraction && (a.showInteraction = !0);
                if (q) m.push(a);
                else {
                    q = !0;
                    w = a.domId;
                    k = a.maxTweets;
                    x = a.enableLinks;
                    p = a.showUser;
                    n = a.showTime;
                    y = a.showRetweet;
                    r = a.dateFunction;
                    t = a.customCallback;
                    z = a.showInteraction;
                    var c = document.createElement("script");
                    c.type = "text/javascript";
                    c.src = "//cdn.syndication.twimg.com/widgets/timelines/" + a.id + "?&lang=en&callback=twitterFetcher.callback&suppress_response_codes=true&rnd=" + Math.random();
                    document.getElementsByTagName("head")[0].appendChild(c)
                }
            },
            callback: function(a) {
                var c = document.createElement("div");
                c.innerHTML = a.body;
                "undefined" === typeof c.getElementsByClassName && (s = !1);
                a = [];
                var f = [],
                    g = [],
                    b = [],
                    h = [],
                    e = 0;
                if (s)
                    for (c = c.getElementsByClassName("tweet"); e < c.length;) {
                        0 < c[e].getElementsByClassName("retweet-credit").length ? b.push(!0) : b.push(!1);
                        if (!b[e] || b[e] && y) a.push(c[e].getElementsByClassName("e-entry-title")[0]), h.push(c[e].getAttribute("data-tweet-id")), f.push(c[e].getElementsByClassName("p-author")[0]), g.push(c[e].getElementsByClassName("dt-updated")[0]);
                        e++
                    } else
                        for (c = l(c, "tweet"); e < c.length;) a.push(l(c[e], "e-entry-title")[0]), h.push(c[e].getAttribute("data-tweet-id")), f.push(l(c[e], "p-author")[0]), g.push(l(c[e], "dt-updated")[0]), 0 < l(c[e], "retweet-credit").length ? b.push(!0) : b.push(!1), e++;
                a.length > k && (a.splice(k, a.length - k), f.splice(k,
                    f.length - k), g.splice(k, g.length - k), b.splice(k, b.length - k));
                c = [];
                e = a.length;
                for (b = 0; b < e;) {
                    if ("string" !== typeof r) {
                        var d = new Date(g[b].getAttribute("datetime").replace(/-/g, "/").replace("T", " ").split("+")[0]),
                            d = r(d);
                        g[b].setAttribute("aria-label", d);
                        if (a[b].innerText)
                            if (s) g[b].innerText = d;
                            else {
                                var u = document.createElement("p"),
                                    A = document.createTextNode(d);
                                u.appendChild(A);
                                u.setAttribute("aria-label", d);
                                g[b] = u
                            } else g[b].textContent = d
                    }
                    d = "";
                    x ? (p && (d += '<div class="user">' + v(f[b].innerHTML) + "</div>"), d +=
                        '<p class="tweet">' + v(a[b].innerHTML) + "</p>", n && (d += '<p class="timePosted">' + g[b].getAttribute("aria-label") + "</p>")) : a[b].innerText ? (p && (d += '<p class="user">' + f[b].innerText + "</p>"), d += '<p class="tweet">' + a[b].innerText + "</p>", n && (d += '<p class="timePosted">' + g[b].innerText + "</p>")) : (p && (d += '<p class="user">' + f[b].textContent + "</p>"), d += '<p class="tweet">' + a[b].textContent + "</p>", n && (d += '<p class="timePosted">' + g[b].textContent + "</p>"));
                    z && (d += '<p class="interact"><a href="https://twitter.com/intent/tweet?in_reply_to=' +
                        h[b] + '" class="twitter_reply_icon">Reply</a><a href="https://twitter.com/intent/retweet?tweet_id=' + h[b] + '" class="twitter_retweet_icon">Retweet</a><a href="https://twitter.com/intent/favorite?tweet_id=' + h[b] + '" class="twitter_fav_icon">Favorite</a></p>');
                    c.push(d);
                    b++
                }
                if (null == t) {
                    a = c.length;
                    f = 0;
                    g = document.getElementById(w);
                    for (h = "<ul>"; f < a;) h += "<li>" + c[f] + "</li>", f++;
                    g.innerHTML = h + "</ul>"
                } else t(c);
                q = !1;
                0 < m.length && (twitterFetcher.fetch(m[0]), m.splice(0, 1))
            }
        }
    }();
    
    /*
      Vertical News Ticker 1.15
    
      Original by: Tadas Juozapaitis ( kasp3rito [eta] gmail (dot) com )
                   http://www.jugbit.com/jquery-vticker-vertical-news-ticker/
    
      Forked/Modified by: Richard Hollis @richhollis - richhollis.co.uk
    */
    
    (function($){
    
      var defaults = {
        speed: 700,
        pause: 4000,
        showItems: 2,
        mousePause: true,
        height: 189,
        animate: true,
        margin: 0,
        padding: 0,
        startPaused: false
      };
    
      var internal = { 
    
        moveUp: function(state, attribs) {    
          internal.animate(state, attribs, 'up');
        },
    
        moveDown: function(state, attribs){
          internal.animate(state, attribs, 'down');
        },
    
        animate: function(state, attribs, dir) {
          var height = state.itemHeight;
          var options = state.options;
          var el = state.element;
          var obj = el.children('ul');
          var selector = (dir === 'up') ? 'li:first' : 'li:last';
    
          el.trigger("vticker.beforeTick");
    
          var clone = obj.children(selector).clone(true);
    
          if(options.height > 0) height = obj.children('li:first').height();
          height += (options.margin) + (options.padding*2); // adjust for margins & padding
    
          if(dir==='down') obj.css('top', '-' + height + 'px').prepend(clone);
    
          if(attribs && attribs.animate) {
            if(state.animating) return;
            state.animating = true;
            var opts = (dir === 'up') ? {top: '-=' + height + 'px'} : {top: 0};
            obj.animate(opts, options.speed, function() {
                $(obj).children(selector).remove();
                $(obj).css('top', '0px');
                state.animating = false;
                el.trigger("vticker.afterTick");
              });
          } else {
            obj.children(selector).remove();
            obj.css('top', '0px');
            el.trigger("vticker.afterTick");
          }
          if(dir==='up') clone.appendTo(obj);
        },
    
        nextUsePause: function() {
          var state = $(this).data('state');
          var options = state.options;
          if(state.isPaused || state.itemCount < 2) return;
          methods.next.call( this, {animate:options.animate} );
        },
    
        startInterval: function() {
          var state = $(this).data('state');
          var options = state.options;
          var initThis = this;
          state.intervalId = setInterval(function(){ 
            internal.nextUsePause.call( initThis );
          }, options.pause);
        },
    
        stopInterval: function() {
          var state = $(this).data('state');
          if(!state) return;
          if(state.intervalId) clearInterval(state.intervalId);
          state.intervalId = undefined;
        },
    
        restartInterval: function() {
          internal.stopInterval.call(this);
          internal.startInterval.call(this);
        }
      };
    
      var methods = {
    
        init: function(options) {
          // if init called second time then stop first, then re-init
          methods.stop.call(this);
          // init
          var defaultsClone = jQuery.extend({}, defaults);
          var options = $.extend(defaultsClone, options);
          var el = $(this);
          var state = { 
            itemCount: el.children('ul').children('li').length,
            itemHeight: 0,
            itemMargin: 0,
            element: el,
            animating: false,
            options: options,
            isPaused: (options.startPaused) ? true : false,
            pausedByCode: false
          };
          $(this).data('state', state);
    
          el.css({overflow: 'hidden', position: 'relative'})
            .children('ul').css({position: 'absolute', margin: 0, padding: 0})
            .children('li').css({margin: options.margin, padding: options.padding});
    
          if(isNaN(options.height) || options.height === 0)
          {
            el.children('ul').children('li').each(function(){
              var current = $(this);
              if(current.height() > state.itemHeight)
                state.itemHeight = current.height();
            });
            // set the same height on all child elements
            el.children('ul').children('li').each(function(){
              var current = $(this);
              current.height(state.itemHeight);
            });
            // set element to total height
            var box = (options.margin) + (options.padding * 2);
            el.height(((state.itemHeight + box) * options.showItems) + options.margin);
          }
          else
          {
            // set the preferred height
            el.height(options.height);
          }
    
          var initThis = this;
          if(!options.startPaused) {
            internal.startInterval.call( initThis );
          }
    
          if(options.mousePause)
          {
            el.bind("mouseenter", function () {
              //if the automatic scroll is paused, don't change that.
              if (state.isPaused === true) return; 
              state.pausedByCode = true; 
              // stop interval
              internal.stopInterval.call( initThis );
              methods.pause.call( initThis, true );
            }).bind("mouseleave", function () {
              //if the automatic scroll is paused, don't change that.
              if (state.isPaused === true && !state.pausedByCode) return;
              state.pausedByCode = false; 
              methods.pause.call(initThis, false);
              // restart interval
              internal.startInterval.call( initThis );
            });
          }
        },
    
        pause: function(pauseState) {
          var state = $(this).data('state');
          if(!state) return undefined;
          if(state.itemCount < 2) return false;
          state.isPaused = pauseState;
          var el = state.element;
          if(pauseState) {
            $(this).addClass('paused');
            el.trigger("vticker.pause");
          }
          else {
            $(this).removeClass('paused');
            el.trigger("vticker.resume");
          }
        },
    
        next: function(attribs) { 
          var state = $(this).data('state');
          if(!state) return undefined;
          if(state.animating || state.itemCount < 2) return false;
          internal.restartInterval.call( this );
          internal.moveUp(state, attribs); 
        },
    
        prev: function(attribs) {
          var state = $(this).data('state');
          if(!state) return undefined;
          if(state.animating || state.itemCount < 2) return false;
          internal.restartInterval.call( this );
          internal.moveDown(state, attribs); 
        },
    
        stop: function() {
          var state = $(this).data('state');
          if(!state) return undefined;
          internal.stopInterval.call( this );
        },
    
        remove: function() {
          var state = $(this).data('state');
          if(!state) return undefined;
          internal.stopInterval.call( this );
          var el = state.element;
          el.unbind();
          el.remove();
        }
      };
    
      $.fn.vTicker = function( method ) {
        if ( methods[method] ) {
          return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
          return methods.init.apply( this, arguments );
        } else {
          $.error( 'Method ' +  method + ' does not exist on jQuery.vTicker' );
        }    
      };
    })(jQuery);
    

    JS 我用来调用一切

    // Setup twitter feed
    function dateFormatter(date) {
      return date.toString().split(' ')[1] + ' ' + date.getFullYear() % 100;
    }
    var twitterConfig = {
      "id": '489803450398433282',
      "domId": 'twitterFeed',
      "maxTweets": 6,
      "enableLinks": true,
      "dateFunction": dateFormatter
    };
    twitterFetcher.fetch(twitterConfig);
    
    $(document).ready(function() {
        $('#twitterFeed').vTicker();
    });
    

    也许我需要手动添加并调用

    $('#twitterFeed').vTicker();
    

    在插件中?它永远不会被更新,所以如果需要的话,不要介意它直接在代码中

    提前谢谢各位

  • 4

    1 回答 1

    0

    解决了,解决方法如下:

    // Setup twitter feed
    function dateFormatter(date) {
      return date.toString().split(' ')[1] + ' ' + date.getFullYear() % 100;
    }
    var twitterConfig = {
      "id": '489803450398433282',
      "domId": 'twitterFeed',
      "maxTweets": 6,
      "enableLinks": true,
      "dateFunction": dateFormatter,
      "customCallback": handleTweets,
    };
    
    function handleTweets(tweets){
        var x = tweets.length;
        var n = 0;
        var element = document.getElementById('twitterFeed');
        var html = '<ul>';
        while(n < x) {
          html += '<li>' + tweets[n] + '</li>';
          n++;
        }
        html += '</ul>';
        element.innerHTML = html;
        $('#twitterFeed').vTicker();
    }
    
    twitterFetcher.fetch(twitterConfig);
    
    于 2014-08-26T11:27:32.703 回答