4

我正在尝试向我的 Twitter 小部件添加自动滚动效果。

我采用了 Twitter 提供的代码，将其添加到 HTML 页面，然后添加了一些 Jquery 插件代码（称为Caroufredsel）来处理此操作。

我已经解决了函数调用后代码加载的问题，方法是将函数启动从 Document.ready 更改为：

<script>    
$(window).bind("load", function() {    
$(".h-feed").carouFredSel({
        items: 2,
        direction: "up",
        scroll : {
        items: 1,
        easing: "elastic",
        duration: 1000,             
        pauseOnHover: true
        }               
    }); 
});       
</script>

正如上面的代码所见，我试图找到一个带有“h-feed”类的列表元素，这是 Twitter 小部件自动生成的 (ol) 元素。我面临的问题是，当GetElementByClass()调用该函数时，它在 HTMLcontainer 中返回 null，表示未找到任何元素！

有人可以帮我解决这个问题吗？我的完整代码如下供参考（抱歉格式错误，但第一部分是 Twitter 提供的小部件代码）：

<a class="twitter-timeline" href="https://twitter.com/NomadMadi" data-widget-id="384617889120010240">Tweets by @NomadMadi</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jquery.carouFredSel.js"></script>
4

2 回答 2

1

您最好的选择是构建您自己版本的 twitter 小部件。您将获得更多控制权，并且您不会遇到其他人提到的 iframe 问题，或者必须努力弄清楚 twitter 代码何时到达并运行。

另一种选择可能是在服务器端获取 twitter 提要，在那里对其进行模板化，然后您的轮播代码可以漂亮而整洁：客户端的工作越少意味着性能越好。

无论哪种方式，您想要的 API 调用都是 https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name= NomadMadi&count=10

文档在这里https://dev.twitter.com/docs/api/1.1/get/statuses/user_timeline

附带说明一下，twitter 的功能正在发生很大变化，当客户要求将 twitter 提要作为嵌入元素呈现在他们自己的网站中时，我通常是相当消极的。在我看来，Twitter 的原生应用程序体验最好，因为它们会跟上卡片、扩展对话等新功能的步伐。Twitter 是一个平台，而不仅仅是 160 个字符串的集合。你尝试建立自己的 twitter 代表的那一刻，就是你开始与之抗争的那一刻。

因此，撇开技术挑战不谈，从设计的角度来看，我建议您根本不要尝试自定义提要，只需链接到相关时间线的 twitter 页面，然后让人们使用他们自己喜欢的 twitter 客户端关注您。当然，我对你的设计没有任何真实的背景，所以这个建议可能离题很远。

于 2013-10-27T19:17:04.060 回答
1

即使您在提要完成加载后调用您的函数，您也无法选择或操作.h-feed，因为此元素是<iframe>从其他域内部加载的。这是由于一组称为同源策略的安全限制。

因此，不可能在小部件内自动滚动元素，因为它们绝对不可访问。

Twitter 提供了一些自定义选项，包括隐藏滚动条和操作小部件尺寸等，但恐怕无能为力。

于 2013-10-22T00:59:10.893 回答