我有一些小问题,我有一个插件可以获取我的推特提要,效果很好!但是我希望它滚动浏览
用于 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();
在插件中?它永远不会被更新,所以如果需要的话,不要介意它直接在代码中
提前谢谢各位