仿腾讯|新浪微博的文本向下滚动JS特效代码

仿腾讯和新浪微博的文本向下滚动JS特效代码，这段JS特效模仿了腾讯和新浪微博首页的向下滑动的特效。js代码文件共8k。采用了myFocus脚本库。

在head区域引用

<script src="js/weibo.js" type="text/javascript"></script>
<script src="js/tqq.js" type="text/javascript"></script>
<script type="text/javascript">
myFocus.set({
    id:'tqq',
    pattern:'mF_sd_tqq',
    time:3
});
</script>

注意   id:'tqq', 和HTML容器的ID对应。

样式表文件可自行修改成你需要的：

<style>
#tqq { WIDTH: 500px;border:#CCCCCC solid 1px;OVERFLOW: hidden;POSITION: relative; HEIGHT: 288px}
#tqq UL {WIDTH:95%; display:inline;LINE-HEIGHT: 22px; margin-left:10px;POSITION: absolute;}
#tqq UL LI {FLOAT: left; PADDING-BOTTOM: 14px; WIDTH: 100%; PADDING-TOP: 14px; BORDER-BOTTOM: #d8d8d8 1px dashed}
#tqq UL LI .img {BORDER: #d2d2d2 1px solid; FLOAT: left;WIDTH: 50px; PADDING-TOP: 1px;}
#tqq UL LI .msg {FLOAT: right; WIDTH:413px}
#tqq UL LI .msg P {FONT-SIZE: 14px}
#tqq UL LI .msg .from {FONT-SIZE: 12px; COLOR: #999}
</style>

HTML示例代码：

<div id="tqq" class="mF_sd_tqq">
  <ul class="msgs">
    <li>
      <div class="img"><img src="images/2.gif" /></div>
      <div class="msg">
        <p><strong><a href="http://www.51xuediannao.com/">懒人建站</a></strong>懒人建站为您提供-基于<a href="http://www.51xuediannao.com/jquery/">jquery特效</a>，jquery弹出层效果，js特效代码大全，JS广告代码，导航菜单代码，下拉菜单代码和jquery焦点图片代码。</p>
        <p class="from">来自<span>iPhone</span></p>
      </div>
    </li>
    <li>
      <div class="img"><img src="images/1.gif" /></div>
      <div class="msg">
        <p><strong><a href="http://www.51xuediannao.com/jquery/">jquery 图片特效</a></strong>：懒人建站为您提供-jquery 图片特效，jquery 菜单特效，jquery图片切换特效，jquery常用特效大全网站。</p>
        <p class="from">来自<span>网页</span></p>

      </div>
    </li>
    <li>
      <div class="img"><img src="images/2.gif" /></div>
      <div class="msg">
        <p><strong>懒人建站</strong>懒人建站为您提供-基于jquery特效，jquery弹出层效果，js特效代码大全，JS广告代码，导航菜单代码，下拉菜单代码和jquery焦点图片代码。</p>
        <p class="from">来自<span>QQ</span></p>
      </div>
    </li>
    <li>
      <div class="img"><img src="images/1.gif" /></div>
      <div class="msg">
        <p><strong><a href="http://www.51xuediannao.com/jquery/">jquery 图片特效</a></strong>：懒人建站为您提供-jquery 图片特效，jquery 菜单特效，jquery图片切换特效，jquery常用特效大全网站。</p>
        <p class="from">来自<span>网页</span></p>
      </div>
    </li>
    <li>
      <div class="img"><img src="images/2.gif" /></div>
      <div class="msg">
        <p><strong>懒人建站</strong>懒人建站为您提供-基于jquery特效，jquery弹出层效果，js特效代码大全，JS广告代码，导航菜单代码，下拉菜单代码和jquery焦点图片代码。</p>
        <p class="from">来自<span>QQ</span></p>
      </div>
    </li>
  </ul>
</div>