纵横易商官方论坛

首页 » ≡ XYECS!B2B 交流≡ » 界面模版制作 » 纵横B2B完美支持有利SEO、W3C标准的滚动代码。
易道 - 2008-8-28 11:26:00
以下经过测试纵横B2B完美支持可行的滚动代码,不需要在BODY中插入java脚本。


    有利于搜索优化;
    支持W3C标准;
    支持图片、FLASH、文字滚动。
    滚动速度可修改



    多行演示:http://demo.xyecom.com/code/roll/1
    单行演示:http://demo.xyecom.com/code/roll/2


-----------------------------------------------------------------------------------------------------------------------------------------代码教程简单3步走!(以单行为例):

1.首先提出JAVA脚本,另存为.js文件,然后在需要的页面调用。如roll.js

function AutoScroll(obj){
        $(obj).find("ul:first").animate({
                marginTop:"-25px"
        },500,function(){
                $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
        });
}
$(document).ready(function(){
setInterval('AutoScroll("#scrollDiv")',1000)
});

  //注:setInterval('AutoScroll("#scrollDiv")',1000)  1000就是速度毫秒,如果想减慢就增加。
 


2.提出CSS样式,另存为.css文件,然后在需要的页面调用。如roll.css

ul,li{margin:0;padding:0}
#scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv li{height:25px;padding-left:10px;}


#scrollDIV 就是滚动的区域了,可以改长宽、边框颜色等等。

3.页面中插入代码,并建立标签调用。

<div id="scrollDiv">
  <ul>
    <li>这是公告标题的第一行</li>
    <li>这是公告标题的第二行</li>
    <li>这是公告标题的第三行</li>
    <li>这是公告标题的第四行</li>
    <li>这是公告标题的第五行</li>
    <li>这是公告标题的第六行</li>
    <li>这是公告标题的第七行</li>
    <li>这是公告标题的第八行</li>
  </ul>
</div>


这里的 <li></li>中可以是图片或者动画。可以利用标签调用任何信息,如商业信息、广告。
  友情提示:利用这个代码,可以轻松作出类似阿里巴巴、慧聪等常用的滚动通栏窄告。
xz87328932 - 2008-8-28 11:30:00
:default13: :default13: :default13: :default13: :default13:


找好久了
damon006 - 2008-8-28 11:37:00
学习了
谢谢!~~:default1:
pophu - 2008-8-28 19:36:00
赞一个!!
xztest - 2008-10-21 10:06:00
搞不明白,为什么我的不能用
管理员 - 2008-10-22 12:19:00
代码已经重新上传了,请下载。
守株不待兔 - 2008-12-16 15:28:00
没看明白是用在啥地方的。
1
查看完整版本: 纵横B2B完美支持有利SEO、W3C标准的滚动代码。