位置：首页>> 网络编程>> JavaScript>> 一个向上滚动代码

一个向上滚动代码

作者：fanxiaojie　来源：韦伯花园的魔法师　发布时间：2010-02-10 12:29:00　

标签：滚动,向上,代码

这个翻滚代码没有使用什么marquee或者其它位移方法，而是每隔一秒把列表最顶端的那个li删掉，把这个li里面的内容插入到最底端新生成的li里，不断地重复执行从而使文字看起来是在翻滚。

源码演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>推荐信息</title><style type="text/css"></style><base target="_blank" /><style>.rei{width:224px;float:left;height:118px;overflow:hidden;margin:0 4px 6px 4px;padding-bottom:4px;border-bottom:dashed 1px #666;}b{font-weight:200;color:#800000;}</style></head><body><div style="width:100％;" id="main"><ul class="rei"><li><a href="/auto/sell_view.asp?id=107">[转让] 夏利TJ7101 轿车 1.7</a></li><li><a href="/auto/sell_view.asp?id=110">[转让] 桑塔纳 轿车 4.4</a></li><li><a href="/auto/sell_view.asp?id=111">[转让] 皮卡 轿车 ７０００</a></li><li><a href="/auto/sell_view.asp?id=112">[转让] 面包车 面包车 １．２</a></li><li><a href="/auto/sell_view.asp?id=113">[转让] 厢式车 货车 ９．６</a></li><li><a href="/auto/sell_view.asp?id=108">[求购] 面包车 面包车 1.3万元</a></li><li><a href="/auto/sell_view.asp?id=120">[求购] 面包车 面包车 13000/15000</a></li><li><a href="/auto/sell_view.asp?id=121">[求购] 面包车 面包车 10000</a></li><li><a href="/auto/sell_view.asp?id=122">[求购] 面包车 面包车 10000</a></li><li><a href="/auto/sell_view.asp?id=133">[求购] 摩托车 摩托车 3500元</a></li></ul><ul class="rei"><li><a href="http://www.fc0575.com/house_view.asp?id=6264">[出租]城北时代广场带 1室1厅 2200元</a></li><li><a href="http://www.fc0575.com/house_view.asp?id=6263">[求租]市中心人民路一 1室0厅 250元</a></li><li><a href="http://www.fc0575.com/house_view.asp?id=6262">[求租]市中心大通电影 2室1厅 800元</a></li><li><a href="http://www.fc0575.com/house_view.asp?id=6261">[出售]市中心步行街虞 3室1厅 42元</a></li><li><a href="http://www.fc0575.com/house_view.asp?id=6260">[出租]市中心新建路园 1室1厅 1300元</a></li><li><a href="http://www.fc0575.com/house_view.asp?id=6259">[出租]市中心新建路园 1室1厅 1300元</a></li><li><a href="http://www.fc0575.com/house_view.asp?id=6258">[出租]市中心新建路园 1室1厅 1300元</a></li><li><a href="http://www.fc0575.com/house_view.asp?id=6257">[出租]城北后村家园 4室2厅 100元</a></li><li><a href="http://www.fc0575.com/house_view.asp?id=6256">[出租]市中心绍兴佳丽 3室1厅 600元</a></li><li><a href="http://www.fc0575.com/house_view.asp?id=6255">[出售]市中心新建路4 2室1厅 34元</a></li></ul><ul class="rei"><li><a href="/jiazheng/" class="red">[需求]</a><a href="/jiazheng/article_view.asp?id=391" title="找家庭保姆">一般家务 找家庭保姆</a></li><li><a href="/jiazheng/" class="red">[需求]</a><a href="/jiazheng/article_view.asp?id=390" title="诚招婴幼看护员一名">婴幼看护 诚招婴幼看护员一名</a></li><li><a href="/jiazheng/" class="red">[需求]</a><a href="/jiazheng/article_view.asp?id=389" title="钟点工,">钟点工 钟点工,</a></li><li><a href="/jiazheng/" class="red">[需求]</a><a href="/jiazheng/article_view.asp?id=388" title="需要工作">一般家务 需要工作</a></li><li><a href="/jiazheng/" class="red">[需求]</a><a href="/jiazheng/article_view.asp?id=387" title="找一名阿姨">一般家务 找一名阿姨</a></li><li><a href="/jiazheng/" class="red">[需求]</a><a href="/jiazheng/article_view.asp?id=386" title="找工作">一般家务 找工作</a></li><li><a href="/jiazheng/" class="red">[供应]</a><a href="/jiazheng/article_view.asp?id=385" title="结婚——相爱百年婚庆">一般家务 结婚——相爱百年婚庆</a></li><li><a href="/jiazheng/" class="red">[需求]</a><a href="/jiazheng/article_view.asp?id=384" title="找家庭保姆">一般家务 找家庭保姆</a></li><li><a href="/jiazheng/" class="red">[供应]</a><a href="/jiazheng/article_view.asp?id=383" title="招工">一般家务 招工</a></li><li><a href="/jiazheng/" class="red">[供应]</a><a href="/jiazheng/article_view.asp?id=382" title="求取">一般家务 求取</a></li></ul></div></body><script language="javascript">var main=window.document.getElementById("main")var n=0function srcolling(rei){var firstli=rei.firstChild;var lie=firstli.innerHTML;//window.alert(lie);rei.removeChild(firstli);var newli=document.createElement('li');newli.innerHTML=lie;rei.appendChild(newli);n++;if(n==3)n=0;window.setTimeout("srcolling(main.childNodes[n])",1000)}window.setTimeout("srcolling(main.childNodes[0])",1000);</script></html>

投稿

一个向上滚动代码

猜你喜欢