教你用JS实现最新资讯的滚动显示

marslulu · 发表于 2009-12-31 10:59:45

本帖最后由 marslulu 于 2009-12-31 11:22 编辑

看到很多兄弟在寻找调用资讯并让资讯滚动显示的方法，自己经过一晚上的苦苦寻找及测试，实现了这一“雄伟”目标：

首先请你去上面支持网站看首页中的Hot热讯是不是你要的效果，如果不是，就请移步咯；

总体步骤：
1，如何调用SS中的资讯；
2，如何利用js，使调用出的资讯滚动显示；
3，滚动的资讯应该插入到哪里？

下面说细节：
步骤一：调用SS中的资讯
进入SS后台，点击“模块管理”-“创建模块”，建议采用向导模式，需要注意的是：审核等级、精华级别、置顶级别等，要慎重选取，否则到时候可能会调不出资讯（因为发布资讯时这些选项你可能都没有选过），“选择模块风格文件”也建议选择“资讯标题列表”。我的设置可以参下图：

保存后系统会自动给你生成两个代码：”模板内部调用代码“和“JavaScript调用代码”，好了，把JS代码拷贝出来，这就是我们今天所说的重点所在了；

请注意，如果你以后修改这个模型的配置，代码会随之改变的，你需要及时更新滴；

步骤二：测试JS代码
新建一个html文档，用frontpage打开，将JS代码拷贝进去，然后预览，呵呵，看到资讯了吧（如下图），如果没有看到，继续努力哦，肯定是你的模型配置有问题；

步骤三：刚才调用出来的仅仅是资讯列表，让他们滚动显示还需要另外的js代码，如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>心脏中心最新新闻</title>
<style type="text/css">
<!--
/*顶部滚动秀*/
#scrolllayer {float:left;overflow:hidden;height:18px;background:#FFFFFF;padding:0px;width:180px; margin-top:3px;}
#scrollmessage {float:left;text-align:left;width:280px;font-size:12px;font-family: "宋体";}
#scrollmessage ul {list-style:none; padding:0; margin:0;}
#scrollmessage li {line-height:18px;color:#FF0000;}
#scrollmessage li a{color:#1900FF; text-decoration:none;}
-->
</style>
</head>
<body topmargin="0" leftmargin="0">
<div id="scrolllayer" style="width: 280px; height: 18px">
<div id="scrollmessage">
<ul>
<script language="JavaScript" src="http://www.ibabyheart.com/batch.javascript.php?param=AzdUPlA7V2ICPFJyUC9XcQJjVihcelIgVDMEYQdhVG9UZ1orAHdRKFRiBjMNfwI9Xz9SLFA9AC0MblYxCn1QYAM5VDtQOldkAnhSMFBmVzUCPlY3XDlSf1Q9BHAHYFRkVHBacwBtUSlUzZUJlAwV24CI1IpUGdXLgJlVmZcalI4VDcEbAdlVGxUZ1pzAGpRYlR2BiENVAJlXyxSZlBgAGkMJVYkCnlQaQN6VCFQIVdjAj1SY1A1V3UCWVZrXGA%3D"></script></div>
<script type="text/javascript" language="javascript">
<!--
//以下参数请勿修改
try{
var marqueesHeight = 18; //高度
var stopscroll = false;
var scrollElem = document.getElementById("scrolllayer");
with(scrollElem){
style.width = 280;//宽度
style.height = marqueesHeight;
style.overflow = 'hidden';
noWrap = true;
}
scrollElem.onmouseover = new Function('stopscroll = true');
scrollElem.onmouseout = new Function('stopscroll = false');
var preTop = 0;
var currentTop = 0;
var stoptime = 0;
var leftElem = document.getElementById("scrollmessage");
scrollElem.appendChild(leftElem.cloneNode(true));
init_srolltext();
}catch(e) {}
function init_srolltext(){
scrollElem.scrollTop = 0;
setInterval('scrollUp()', 15); //滚动速度
}
function scrollUp(){
if(stopscroll) return;
currentTop += 1;
if(currentTop == 19) { //滚动距离
stoptime += 1;
currentTop -= 1;
if(stoptime == 220) { //停顿时间
currentTop = 0;
stoptime = 0;
}
}else{
preTop = scrollElem.scrollTop;
scrollElem.scrollTop += 1;
if(preTop == scrollElem.scrollTop){
scrollElem.scrollTop = 0;
scrollElem.scrollTop += 1;
}
}
}
//-->
</script>
</body>
</html>

复制代码

请注意这是一段完整的html代码。<script language="JavaScript" src="http://www.ibabyheart.com/batch.javascript.php?param=AzdUPlA7V2ICPFJyUC9XcQJjVihcelIgVDMEYQdhVG9UZ1orAHdRKFRiBjMNfwI9Xz9SLFA9AC0MblYxCn1QYAM5VDtQOldkAnhSMFBmVzUCPlY3XDlSf1Q9BHAHYFRkVHBacwBtUSlUzZUJlAwV24CI1IpUGdXLgJlVmZcalI4VDcEbAdlVGxUZ1pzAGpRYlR2BiENVAJlXyxSZlBgAGkMJVYkCnlQaQN6VCFQIVdjAj1SY1A1V3UCWVZrXGA%3D"></script>部分就是刚才你从SS后台拷贝出来的JS代码，怎么调整滚动栏目宽度、高度、字体大小、背景颜色等，可以在*顶部滚动秀*中调整，请注意调整高度和宽度可能下面也有部分代码需要修改；同时声明，这段js代码不是我做的，是网上找来的；

步骤四：把上面的代码调整好后，保存这个htm文件，并将其置放入你网站的某个位置，我放在了根目录下，如命名为###.htm。

步骤五：接下来的事情就简单了，用iframe命令来调用刚才保存的这个html文件中的内容，代码如下：

<iframe src="http://www.ibabyheart.com/###.htm" width="245" height="24" marginheight="0" marginwidth="0" frameborder="0" border="0" scrolling="no"></iframe>

复制代码

其中http://www.ibabyheart.com/###.htm是文件的地址，调试iframe命令（如宽度，高度，边框等），可以新建一个htm文件，将iframe命令放在里面进行调试；

步骤六：把步骤五中的iframe命令插入到模板中，可利用SS后台中的模板编辑功能，将其插入你需要其显示的位置即可。

整体来说看起来很复杂，其实稍微具备html的基本知识即可搞定，总体来说就是增加了一个htm文件，增加了一行iframe命令，仅此而已。有问题的兄弟在下面跟帖吧，我不大常来，但看到你的疑问，我会尽量回答。

pcload · 发表于 2009-12-31 13:30:47

js调用还怎不好
要是滚动的话
你用li标签调用不是更好
整的太麻烦了

		自动登录	找回密码
密码			立即注册

[教程] 教你用JS实现最新资讯的滚动显示