知识 分享 互助 懒人建站

    懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

    懒人建站提供网页素材下载、网站模板
    知识 分享 互助!

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

    作者:佳明妈 来源:myFocus 2011-05-11 人气:
    仿腾讯和新浪微博的文本向下滚动JS特效代码,这段JS特效模仿了腾讯和新浪微博首页的向下滑动的特效。采用了myFocus脚本库。js代码文件共8k。

    仿腾讯和新浪微博的文本向下滚动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>

     

     

     

     

     

    ↓ 查看全文

    仿腾讯|新浪微博的文本向下滚动JS特效代码由懒人建站收集整理,您可以自由传播,请主动带上本文链接

    懒人建站就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

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