高分求解. js 文字滚动难题

chenxhcc 2009-04-14 10:53:37
<div id="latest_site_news" class="colbox">
<h3><!-- {if $site_news.info.page_count gt 1} --><em class="more"><a href="{url src=index.php?app=article&act=site_news}">{$lang.more}</a></em><!-- {/if} -->{$lang.site_news}</h3>
<div id="news_scroll_bar" style="overflow:hidden; height:180px;">
<div id="news_scroll_items" class="colboxcontent">
<ul>
<!-- {foreach from=$site_news.data item=article} -->
<li><a href="{url src=index.php?app=article&act=site_news&id=$article.article_id}">{$article.title|escape}</a></li>
<!-- {/foreach} -->
</ul>
</div>
<div id="news_scroll_replaces" class="colbtm"></div>
</div>
</div>
<script language="javascript">
var news_scroll_bar = document.getElementById("news_scroll_bar");
var news_scroll_items = document.getElementById("news_scroll_items");
var news_scroll_replaces = document.getElementById("news_scroll_replaces");
var speed = 70;//滚动速度
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
var rows = 100;//每行高度
}

var stim = 10; //停留时间倍数 * speed
var stop = 10; //初始化值，不管

news_scroll_replaces.innerHTML=news_scroll_items.innerHTML
function Marquees(){

if(news_scroll_replaces.offsetTop-news_scroll_bar.scrollTop<=0)
news_scroll_bar.scrollTop-=news_scroll_items.offsetHeight
else{
news_scroll_bar.scrollTop++
}
}
var MyMars=setInterval(Marquees,speed)
news_scroll_bar.onmouseover=function() {clearInterval(MyMars)}
news_scroll_bar.onmouseout=function() {MyMars=setInterval(Marquees,speed)}
</script>


目前这段代码,走一走就停了. 而且速度有点慢. 求高人帮忙解决下.


<div id="latest_site_news" class="colbox">
<h3><!-- {if $site_news.info.page_count gt 1} --><em class="more"><a href="{url src=index.php?app=article&act=site_news}">{$lang.more}</a></em><!-- {/if} -->{$lang.site_news}</h3>
<div id="news_scroll_bar" style="overflow:hidden; height:180px;">
<div id="news_scroll_items" class="colboxcontent">
<ul>
<!-- {foreach from=$site_news.data item=article} -->
<li><a href="{url src=index.php?app=article&act=site_news&id=$article.article_id}">{$article.title|escape}</a></li>
<!-- {/foreach} -->
</ul>
</div>
<div id="news_scroll_replaces" class="colbtm"></div>
</div>
</div>


这是以前的代码.这段代码是不从下向上滚动的效果了. 想让他滚动,所以就加了些. 最上面的那段代码是修改过的.但不成功. 问题就是滚动滚动就停了.速度也有点.

麻烦高手帮助.
...全文
260 29 打赏 收藏 转发到动态 举报
写回复
用AI写文章
29 条回复
切换为时间正序
请发表友善的回复…
发表回复
lf127 2009-04-20
  • 打赏
  • 举报
 回复
试试这个
<div style="border=1px solid gray;"><MARQUEE HEIGHT=170 DIRECTION=UP BEHAVIOR=SCROLL SCROLLAMOUNT=10 SCROLLDELAY=200 onMouseOver="this.stop()" onMouseOut="this.start()">
·2007年9月无忧指数IT图解<BR>
·3G售前技术工程师<BR>
·3G软件工程师<BR>

</MARQUEE>
</div>




<div style="width:95%;"><MARQUEE WIDTH=100% DIRECTION=LEFT BEHAVIOR=SCROLL SCROLLAMOUNT=10 SCROLLDELAY=200 onMouseOver="this.stop()" onMouseOut="this.start()">
汽车销售公司 武汉昆天华有限公司 深圳市爱迪电子科技有限公司 伊沙美尔
</MARQUEE>
</div>
caiying2009 2009-04-14
  • 打赏
  • 举报
 回复
目前这段代码,走一走就停了.

<ul> </ul>中（解析后）的内容需要足够多--大约<ul>的实际高度>180px

而且速度有点慢.
var speed = 70;//滚动速度
--try: var speed = 20;//滚动速度


<style>

*{margin:0;line-height:24px;}

</style>



<div id="latest_site_news" class="colbox"> 

  <h3> <!-- {if $site_news.info.page_count gt 1} --> <em class="more"> <a href="{url src=index.php?app=article&act=site_news}">{$lang.more} </a> </em> <!-- {/if} -->{$lang.site_news} </h3> 

  

<div id="news_scroll_bar" style="overflow:hidden; height:180px;"> 

  <div id="news_scroll_items" class="colboxcontent"> 

  <ul> 

      <!-- {foreach from=$site_news.data item=article} --> 

      <li> 1<a href="{url src=index.php?app=article&act=site_news&id=$article.article_id}">{$article.title|escape} </a> </li> 

      <li> 2<a href="{url src=index.php?app=article&act=site_news&id=$article.article_id}">{$article.title|escape} </a> </li> 

      <li> 3<a href="{url src=index.php?app=article&act=site_news&id=$article.article_id}">{$article.title|escape} </a> </li> 

      <li> 4<a href="{url src=index.php?app=article&act=site_news&id=$article.article_id}">{$article.title|escape} </a> </li> 

      <li> 5<a href="{url src=index.php?app=article&act=site_news&id=$article.article_id}">{$article.title|escape} </a> </li> 

      <li> 6<a href="{url src=index.php?app=article&act=site_news&id=$article.article_id}">{$article.title|escape} </a> </li> 

      <li> 7<a href="{url src=index.php?app=article&act=site_news&id=$article.article_id}">{$article.title|escape} </a> </li> 

      <li> 8<a href="{url src=index.php?app=article&act=site_news&id=$article.article_id}">{$article.title|escape} </a> </li> 

      <!-- {/foreach} --> 

    </ul> 

  </div> 

  <div id="news_scroll_replaces" class="colbtm"> </div> 

  </div> 

</div> 



<script language="javascript"> 

var news_scroll_bar = document.getElementById("news_scroll_bar"); 

var news_scroll_items = document.getElementById("news_scroll_items"); 

var news_scroll_replaces = document.getElementById("news_scroll_replaces"); 

var speed  = 20;//滚动速度 



alert(news_scroll_items.offsetHeight)

news_scroll_replaces.innerHTML=news_scroll_items.innerHTML 

function Marquees(){



if(news_scroll_replaces.offsetTop-news_scroll_bar.scrollTop <=0) 

news_scroll_bar.scrollTop-=news_scroll_items.offsetHeight +20

else{ 

news_scroll_bar.scrollTop++ 

} 

} 

var MyMars=setInterval(Marquees,speed) 

news_scroll_bar.onmouseover=function() {clearInterval(MyMars)} 

news_scroll_bar.onmouseout=function() {MyMars=setInterval(Marquees,speed)} 

</script>




baidu1900 2009-04-14
  • 打赏
  • 举报
 回复
为什么不用marquee标签呢,何必要用javascript去做
chenxhcc 2009-04-14
  • 打赏
  • 举报
 回复
帮我加个,我复制,呵呵~
chenxhcc 2009-04-14
  • 打赏
  • 举报
 回复
直接在<div id="latest_site_news" class="colbox"> </div> 这个里面加吗?
chenxhcc 2009-04-14
  • 打赏
  • 举报
 回复
呵呵~ 跑起来了.不错. 就是第一圈和第二圈的距离有点宽, 不然的话就完美了.呵~ 哈~
caiying2009 2009-04-14
  • 打赏
  • 举报
 回复
[Quote=引用 21 楼 chenxhcc 的回复:]
第一圈滚动和第二圈之间距离有点宽. 有点不自然的样子,呵~
[/Quote]

#19
<div id="latest_site_news" class="colbox"> </div>
及其里面的样式再调整一下更好
(例如:padding/margin/line-height等)
chenxhcc 2009-04-14
  • 打赏
  • 举报
 回复
没有.我去换啊
chenxhcc 2009-04-14
  • 打赏
  • 举报
 回复
恩~ 效果不错.但我以为可怎么往里添加新内容呀?
caiying2009 2009-04-14
  • 打赏
  • 举报
 回复
[Quote=引用 20 楼 chenxhcc 的回复:]
我传上去了.你看下, 循环滚动了. 但后台添加文章,不会出现在滚动列表里. 不知道怎么回事?
[/Quote]
<ul>
<li><a href="index.php?app=article&act=site_news&id=6">测试滚动效果 </a> </li>
<li><a href="index.php?app=article&act=site_news&id=7">协议免费开店协议免费开店协议免费开店协议免费开店协议协议免费开店协议 </a> </li>
<li><a href="index.php?app=article&act=site_news&id=8">网站简介 网站简介 网站简介 网站简介 网站简介 网站简介 网站简介 </a> </li>
<li><a href="index.php?app=article&act=site_news&id=9">sdffffffffffffffffffffffffffffffffffffffffffffffff </a> </li>
<li><a href="index.php?app=article&act=site_news&id=10">dfdfffffffffffffffffffffffffffffffffffffffffffffffff </a> </li>
<li><a href="index.php?app=article&act=site_news&id=11">测试测试测试测试测试测试测试测试测试测试测试测试测试测试 </a> </li>
<li><a href="index.php?app=article&act=site_news&id=12">公告公告公告公告公告公告公告公告公告公告公告 </a> </li>

</ul>
换成:
<ul>
<!-- {foreach from=$site_news.data item=article} -->
<li> <a href="{url src=index.php?app=article&act=site_news&id=$article.article_id}">{$article.title|escape} </a> </li>
<!-- {/foreach} -->
</ul>
了吗?
chenxhcc 2009-04-14
  • 打赏
  • 举报
 回复
第一圈滚动和第二圈之间距离有点宽. 有点不自然的样子,呵~
chenxhcc 2009-04-14
  • 打赏
  • 举报
 回复
我传上去了.你看下, 循环滚动了. 但后台添加文章,不会出现在滚动列表里. 不知道怎么回事?
caiying2009 2009-04-14
  • 打赏
  • 举报
 回复
看到了,跑起来了^_^
<div id="latest_site_news" class="colbox"> </div>
及其里面的样式再调整一下更好
caiying2009 2009-04-14
  • 打赏
  • 举报
 回复
try:


							<td id="region7" class="columnb"><style>

*{margin:0;line-height:24px;}

</style>

<div id="latest_site_news" class="colbox"> 

  <h3> 站内快讯 </h3> 

  

<div id="news_scroll_bar" style="overflow:hidden; height:180px;"> 

  <div id="news_scroll_items" class="colboxcontent"> 

  <ul> 

            <li><a href="index.php?app=article&act=site_news&id=6">测试滚动效果 </a> </li> 

             <li><a href="index.php?app=article&act=site_news&id=7">协议免费开店协议免费开店协议免费开店协议免费开店协议协议免费开店协议 </a> </li> 

             <li><a href="index.php?app=article&act=site_news&id=8">网站简介 网站简介 网站简介 网站简介 网站简介 网站简介 网站简介 </a> </li> 

             <li><a href="index.php?app=article&act=site_news&id=9">sdffffffffffffffffffffffffffffffffffffffffffffffff </a> </li> 

             <li><a href="index.php?app=article&act=site_news&id=10">dfdfffffffffffffffffffffffffffffffffffffffffffffffff </a> </li> 

             <li><a href="index.php?app=article&act=site_news&id=11">测试测试测试测试测试测试测试测试测试测试测试测试测试测试 </a> </li> 

             <li><a href="index.php?app=article&act=site_news&id=12">公告公告公告公告公告公告公告公告公告公告公告 </a> </li> 

        

    </ul> 

  </div> 

  <div id="news_scroll_replaces" class="colboxcontent"> </div> 

  </div> 

</div> 

<script language="javascript"> 

var news_scroll_bar = document.getElementById("news_scroll_bar"); 

var news_scroll_items = document.getElementById("news_scroll_items"); 

var news_scroll_replaces = document.getElementById("news_scroll_replaces"); 

var speed  = 20;//??ٶ?

//alert(news_scroll_items.offsetHeight)

news_scroll_replaces.innerHTML=news_scroll_items.innerHTML 

function Marquees(){

if(news_scroll_replaces.offsetTop-news_scroll_bar.scrollTop <=0) 

news_scroll_bar.scrollTop-=news_scroll_items.offsetHeight +20

else{ 

news_scroll_bar.scrollTop++ 

} 

} 

var MyMars=setInterval(Marquees,speed) 

news_scroll_bar.onmouseover=function() {clearInterval(MyMars)} 

news_scroll_bar.onmouseout=function() {MyMars=setInterval(Marquees,speed)} 

</script></td>
chenxhcc 2009-04-14
  • 打赏
  • 举报
 回复
把<div id="news_scroll_replaces" class="colbtm"> </div>

改成: <div id="news_scroll_replaces" class="colboxcontent"> </div> 吗?
chenxhcc 2009-04-14
  • 打赏
  • 举报
 回复
打开报错,不知道是怎么回事. 显示什么windows 什么0 确定.
chenxhcc 2009-04-14
  • 打赏
  • 举报
 回复
给我个全代码呗.我直接一复制就行了.哈哈哈.省得搞错.
caiying2009 2009-04-14
  • 打赏
  • 举报
 回复
#10
抱歉
不是
<div id="news_scroll_replaces" class="2_colbtm"> </div> (我测试时改的,忘改回来了)

应为
<div id="news_scroll_replaces" class="colbtm"> </div>
chenxhcc 2009-04-14
  • 打赏
  • 举报
 回复


上面那段代码中没有找到<div id="news_scroll_replaces" class="2_colbtm"> </div>

这些代码.呵~ 在那呢?
chenxhcc 2009-04-14
  • 打赏
  • 举报
 回复
caiying2009

有没有其它的联系方式呢? 呵~ 咱们交个朋友呗.哈.
加载更多回复（8）
WEB开发文档2 总结
http://blog.donews.com/lvjiyong/archive/2006/06/29/931071.aspx 怎样将后台生成的在内存中的图象显示到客户端 Microsoft IE WebControls下载地址 如何在DATAGRID中使用JAVASCRIPT脚本控制 DataGrid中连接到...
产品技术和管理
为啥纯粹为消费者传递体验的活动可以价格不菲，几为暴利？——谈客户体验作为客户价值提升之源 不论产品还是服务，如果能够为消费者传递有益的体验，其价值就可以在一般的产品服务之上得以体现；...
编程新手导论（转载）
第二部分 导论，这一部分主要是关于编程的导论，(要懂得一点思想具备一点常识)《设计，编码，，与软工》（编程与思想）这一章解释了三种思想，原语，抽象，组合，，和软件开发的二个重要过程，，软件工程的相关概念...
剖析虚幻渲染体系（14）- 延展篇：现代渲染引擎演变史Part 4（结果期）
剖析虚幻渲染体系
编程新手导论
第二部分 导论，这一部分主要是关于编程的导论， (要懂得一点思想具备一点常识)《设计，编码，，与软工》（编程与思想）这一章解释了三种思想，原语，抽象，组合，，和软件开发的二个重要过程，，软件工程的相关...
JavaScript

87,920

社区成员

224,618

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章