网站调用新浪微博内容(的问题是解决图片覆盖到文字之上，文字如何可以点击或选中)

　　网站调用新浪微博内容(的问题是解决图片覆盖到文字之上，文字如何可以点击或选中)

　　新浪微博还没有登录。新浪微博首页有一个“大家都在说话”模块，动态滚动最新的微博帖子。

　　需求方面，该功能需要实时调用最新的微博数据。仅就前端开发而言，其需求可以拆分如下：

　　1 内容继续滚动；

　　2 新微博先下推下一条微博，再淡入；

　　3 鼠标经过内容时暂停滚动；

　　4 容器底部的渐变在背景色下消失。

　　以上4个需求中，需求1-3是通过js技术实现的，需求4是通过css技术实现的。下面我们一一说下要求。

　　需求一和需求二：内容连续滚动的需求有点类似于上一篇文章《小模块：公告滚动与暂停》介绍的功能。在那篇文章中，这个函数使用了CSS Position定位来控制整个ul列表的移动*敏*感*词*。结合需求2，我们可以写的更简单一些，让最后一个li元素有规律地插入第一个li元素的上方，然后使用animate方法改变li的高度和透明度。setTimeout 方法仍然用于无暂停滚动。在没有新数据加载的情况下，实现有限内容循环滚动。

　　需求3：当鼠标经过并暂停时，可以在鼠标悬停时将属性的值添加到元素中。这里使用name属性来判断这个值是否存在，如果存在则不执行代码。

　　需求4：可以通过在内容上叠加渐变的png24图片来实现。IE6 不能很好地支持 png24。如果需要考虑性能，请在此容器中添加带有 display:none 的 IE6hack。下一个问题是解决图片叠加在文字上时文字如何被点击或选中的问题。这时候就需要一个特殊的css属性“pointer-events”。该属性的值设置为none后，鼠标可以通过选择绝对定位在文字上的图片下方的文字。

　　集成代码如下：

　　HTML

　　复制代码代码如下：

　　CSS

　　复制代码代码如下：

　　.messagewrap{overflow:hidden;position:relative;width:500px;height:300px}

　　li{高度：50px;}

　　.bottomcover{width:500px;height:45px;position:absolute;bottom:0;left:0;

　　指针事件：无；背景：url（halftransp.png-600) 左下无重复；

　　/*透明图片从背景颜色向上渐变*/ _display:none;/*降级为IE6体验*/)

　　JS

　　复制代码代码如下：

　　以上是基于jquery的内容循环滚动模块的详细内容（模仿新浪微博未登录首页滚动微博显示），更多详情请关注其他相关html中文网站文章！