凤凰网 "内容推荐" 那个向上滚动的效果怎样做.

http://www.ifeng.com/

新闻滚板!JS函数把内容写到newscommend上
<script language="javascript" type="text/javascript">
scrollnews();
var scroll1 = new ScrollText("newscommend","pre","next",true,2500,false);
</script>HTML源代码
<div id="commend"><h4>内容推荐</h4>
    <div class="scrollNews" style="position:relative;"><h3 id="newscommend"></h3> <div style="position:absolute;left:595px;top:3px;"><a id="pre" style="cursor:pointer;"><img src="http://img.ifeng.com/tres/pub_res/logo/none.gif" width="25" height="8" /></a></div>
<div style="position:absolute;left:595px;top:15px;"><a id="next" style="cursor:pointer;"><img src="http://img.ifeng.com/tres/pub_res/logo/none.gif" width="25" height="8" /></a></div>
</div>
  </div>scrollnews:
function scrollnews(){
var htext = document.getElementsByTagName("h1");
var text_holder = document.getElementById("newscommend");
var p = ["博报","财经","论坛","军事","时尚","汽车","城市","文化","历史","传媒","读书","佛教","体育","娱乐"];
var purl = ["http://blog.ifeng.com","http://finance.ifeng.com","http://bbs.ifeng.com","http://news.ifeng.com/mil","http://fashion.ifeng.com","http://auto.ifeng.com","http://city.ifeng.com/","http://culture.ifeng.com/","http://news.ifeng.com/history","http://media.ifeng.com/","http://book.ifeng.com","http://fo.ifeng.com/","http://news.ifeng.com/sports/","http://ent.ifeng.com"];
var oFrag = document.createDocumentFragment();
oFrag.innerHTML="";
for(var i=0;i<htext.length;i++){
oFrag.innerHTML+="<strong>[<a href="+purl[i]+" target=_blank>"+p[i]+"</a>]</strong> "+htext[i].innerHTML+"  ";
if((i>0 && i%2==1) || (i==htext.length-1 && i%2==0)){
oFrag.innerHTML+="<br/>";
}
}
text_holder.innerHTML=oFrag.innerHTML;
}ScrollText:
function ScrollText(content,btnPrevious,btnNext,autoStart,timeout,isSmoothScroll)
{
    this.Speed = 10;
    this.Timeout = timeout;
this.stopscroll =false;//是否停止滚动的标志位
this.isSmoothScroll= isSmoothScroll;//是否平滑连续滚动
    this.LineHeight = 20;//默认高度。可以在外部根据需要设置
    this.NextButton = this.$(btnNext);
    this.PreviousButton = this.$(btnPrevious);
    this.ScrollContent = this.$(content);
    this.ScrollContent.innerHTML += this.ScrollContent.innerHTML;//为了平滑滚动再加一遍 if(this.PreviousButton) {
this.PreviousButton.onclick = this.GetFunction(this,"Previous");
this.PreviousButton.onmouseover = this.GetFunction(this,"MouseOver");
this.PreviousButton.onmouseout = this.GetFunction(this,"MouseOut");
}
if(this.NextButton){
this.NextButton.onclick = this.GetFunction(this,"Next");
this.NextButton.onmouseover = this.GetFunction(this,"MouseOver");
this.NextButton.onmouseout = this.GetFunction(this,"MouseOut");
    }
    this.ScrollContent.onmouseover = this.GetFunction(this,"MouseOver");
    this.ScrollContent.onmouseout = this.GetFunction(this,"MouseOut");    if(autoStart)
    {
        this.Start();
    }
}

我这有个小模版，你看看
<html>
<head>
<style type="text/css">

</style>
<head>
<body><div id="layer1" style="overflow-y:hidden;width:50;">
<div id="layer2"><table width="130" height="70" border="0" align="center" cellpadding="0" cellspacing="0" class="test"><tr><td width="150" height="70" valign="top" bgcolor="#FFFFFF" class="nav1style style46"><center>第(1)条</center><a href="#" title="关于＜＜电气工程自动化＞＞研究生班授课的通知" class="none_underline"><font color=#ff0000>关于＜＜电气工程自动化＞＞研究生班授课的通知 2006-3-9</font></a><br><br>
<center>第(2)条</center><a href="#" title="关于企业管理研究生班授课的通知" class="none_underline"><font color=#ff0000>关于企业管理研究生班授课的通知 2006-3-8</font></a><br><br></td></tr></table>
</div>
<div id="layer3"></div><script language="javascript">var layerHeight = 100; // 定义滚动区域的高度.var iFrame = 1; // 定义每帧移动的象素.var iFrequency = 50; // 定义帧频率.var timer; // 定义时间句柄.if(document.getElementById("layer2").offsetHeight >= layerHeight)document.getElementById("layer1").style.height = layerHeight;elsedocument.getElementById("layer1").style.height = document.getElementById("layer2").offsetHeight;document.getElementById("layer3").innerHTML = document.getElementById("layer2").innerHTML;
function move(){if(document.getElementById("layer1").scrollTop >= document.getElementById("layer2").offsetHeight){document.getElementById("layer1").scrollTop -= (document.getElementById("layer2").offsetHeight - iFrame);}else {document.getElementById("layer1").scrollTop += iFrame;}}
timer = setInterval("move()",iFrequency);document.getElementById("layer1").onmouseover=function() {clearInterval(timer);}document.getElementById("layer1").onmouseout=function() {timer=setInterval("move()",iFrequency);}
</script></body>
</html>

<div id="marquees">
<a href="javascript:">1,你可曾有过无数的梦想，</a><br>
<br>
<a href="javascript:">2,却在时光的流逝里幻灭 </a><br>
<br>
<a href="javascript:">3,你可曾对未来期待憧憬，</a><br>
<br>
<a href="javascript:">4,却在成长的岁月中迷失</a><br>
<br>
</div>
<script language="JavaScript">marqueesHeight=20;
stopscroll=false;with(marquees){
style.width=0;
style.height=marqueesHeight;
style.overflowX="visible";
style.overflowY="hidden";
noWrap=true;
onmouseover=new Function("stopscroll=true");
onmouseout=new Function("stopscroll=false");
}
document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');preTop=0; currentTop=0; function init(){
templayer.innerHTML="";
while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
}
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
setInterval("scrollUp()",20);//越大越慢
}
document.body.onload=init;function scrollUp(){
if(stopscroll==true) return;
preTop=marquees.scrollTop;
marquees.scrollTop+=1;
if(preTop==marquees.scrollTop){
marquees.scrollTop=templayer.offsetHeight-marqueesHeight;
marquees.scrollTop+=1;
}
}
</script>

调试易

凤凰网 "内容推荐" 那个向上滚动的效果怎样做.

解决方案 »