以下经过测试纵横B2B完美支持可行的滚动代码,不需要在BODY中插入java脚本。
有利于搜索优化;
支持W3C标准;
支持图片、FLASH、文字滚动。
滚动速度可修改
多行演示:http://demo.xyecom.com/code/roll/1 单行演示:http://demo.xyecom.com/code/roll/2-----------------------------------------------------------------------------------------------------------------------------------------
代码教程简单3步走!(以单行为例):1.首先提出JAVA脚本,另存为.js文件,然后在需要的页面调用。如roll.jsfunction 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>中可以是图片或者动画。可以利用标签调用任何信息,如商业信息、广告。
友情提示:利用这个代码,可以轻松作出类似阿里巴巴、慧聪等常用的滚动通栏窄告。