return container.scrollTop; } function createElement(tagName, styles, props) { var tag = document.createElement(tagName); if (styles) { for (var prop in styles) {
if (prop == "cssFloat" && isIE) { tag.style.styleFloat = styles[prop]; continue; } tag.style[prop] = styles[prop]; } } if (props) { for (var prop in props) { tag.style[prop] = props[prop]; } } return tag; } function setOpacity(target, rate) {
function showMessage(button) { button.disabled = true; var user = document.getElementById("userName"); var content = document.getElementById("content"); addMessage(user.value, content.value, button); }
var scrollT;
var pause = false;
var ScrollBox = document.getElementById(panl1);
if(document.getElementById(panl2).offsetHeight <= height) return;
var _tmp = ScrollBox.innerHTML.replace(panl2,"panl2")
ScrollBox.innerHTML += _tmp;
ScrollBox.onmouseover = function(){pause = true}
ScrollBox.onmouseout = function(){pause = false}
ScrollBox.scrollTop = 0;
function start(){
scrollT = setInterval(scrolling,speed);
if(!pause) ScrollBox.scrollTop += 2;
}
function scrolling(){
if(ScrollBox.scrollTop % height != 0){
ScrollBox.scrollTop += 2;
if(ScrollBox.scrollTop >= ScrollBox.scrollHeight/2) ScrollBox.scrollTop = 0;
}
else{
clearInterval(scrollT);
setTimeout(start,delay);
}
}
setTimeout(start,delay);
}这是向上的，你改改就ok
我有。。你可以设置上下滚动的效果
直接查看代码复制粘贴就可以了!
<HTML xmlns="http://www.w3.org/1999/xhtml">
<head>
<TITLE>文字上下滚动</TITLE>
<META http-equiv=Content-Type content="text/html;charset=utf-8">
<STYLE type=text/css media=screen>
*{margin:0;padding:0;font-size:12px;}
a{color:#333;text-decoration:none}
a:hover{color:#901d22;text-decoration:underline}
.clear{clear:both;font-size:0;line-height:0;height:0}
SPAN.darkred{font-size:14px;color:#933}
#search{border:1px solid #ccc;margin:0 auto;width:950px;margin-bottom:8px;height:29px}
#commend{width:720px;color:#fff}
#commend a{color:#333}
.scrollNews{padding-TOP:4px;position:relative}
#newscommend{padding-RIGHT:2px;font-weight:normal;overflow:hidden;width:602px;line-height:20px;height:20px}
.scrollNews div{LEFT:507px;position:absolute;}
.scrollNews a{CURSOR:pointer}
.scrollNews IMG{width:25px;height:8px;background:#000;}
</STYLE>
</head>
<body>
<div id="new_list" style="display:none;">
<h6><a href="#">宋山木的“温柔强奸论”能成立吗？</a></h6>
<h6><a href="#">坐在中国最拥挤的火车上</a></h6>
<h6><a href="#">前卫美女拍比基尼婚纱照</a></h6>
<h6><a href="#">中南海保镖这么练出来的</a></h6>
<h6><a href="#">围观景区冬日人体彩绘秀</a></h6>
<h6><a href="#">贷款修路有尽 为何缴费还贷不止？</a></h6>
<h6><a href="#">中国“元”级柴电潜艇堪称深海歼20</a></h6>
<h6><a href="#">辛酸中的感动：为那些骑摩返们</a></h6>
<h6><a href="#">高房价 让多少未婚女孩当了小三？</a></h6>
<h6><a href="#">兽兽内衣模特大赛照！真有料</a></h6>
</div>
<div id=search>
<div id=commend>
<div class=scrollNews>
<H3 id=newscommend></H3>
<div style="TOP:3px"><a id="pre"><IMG src=""></a></div>
<div style="TOP:15px"><a id="next"><IMG src=""></a></div>
</div>
</div>
</div>
<SCRIPT type="text/javascript">
function scrollnews(){
var htext=document.getElementById("new_list").getElementsByTagName("h6");
var text_holder=document.getElementById("newscommend");
var oFrag=document.createDocumentFragment();
oFrag.innerHTML="";
for(var i=0;i<htext.length;i++){
oFrag.innerHTML+=htext[i].innerHTML+" ";
if((i>0&&i%2==1)||(i==htext.length-1&&i%2==0)){
oFrag.innerHTML+="<br/>";
}
}
text_holder.innerHTML=oFrag.innerHTML;
} 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();
}
}
ScrollText.prototype={
$:function (element){
return document.getElementById(element);
},
Previous:function (){
this.stopscroll=true;
this.Scroll("up");
},
Next:function (){
this.stopscroll=true;
this.Scroll("down");
},
Start:function (){
if(this.isSmoothScroll){
this.AutoScrollTimer=setInterval(this.GetFunction(this,"SmoothScroll"),this.Timeout);
} else{
this.AutoScrollTimer=setInterval(this.GetFunction(this,"AutoScroll"),this.Timeout);
}
},
Stop:function (){
clearTimeout(this.AutoScrollTimer);
this.DelayTimerStop=0;
},
MouseOver:function (){
this.stopscroll=true;
},
MouseOut:function (){
this.stopscroll=false;
},
AutoScroll:function (){
if(this.stopscroll){
return;
}
this.ScrollContent.scrollTop++;
if(parseInt(this.ScrollContent.scrollTop)%this.LineHeight!=0){
this.ScrollTimer=setTimeout(this.GetFunction(this,"AutoScroll"),this.Speed);
} else{
if(parseInt(this.ScrollContent.scrollTop)>=parseInt(this.ScrollContent.scrollHeight)/2){
this.ScrollContent.scrollTop=0;
}
clearTimeout(this.ScrollTimer);
}
},
SmoothScroll:function (){
if(this.stopscroll){
return;
}
this.ScrollContent.scrollTop++;
if(parseInt(this.ScrollContent.scrollTop)>=parseInt(this.ScrollContent.scrollHeight)/2){
this.ScrollContent.scrollTop=0;
}
},
Scroll:function (direction){
if(direction=="up"){
this.ScrollContent.scrollTop--;
} else{
this.ScrollContent.scrollTop++;
}
if(parseInt(this.ScrollContent.scrollTop)>=parseInt(this.ScrollContent.scrollHeight)/2){
this.ScrollContent.scrollTop=0;
} else if(parseInt(this.ScrollContent.scrollTop)<=0){
this.ScrollContent.scrollTop=parseInt(this.ScrollContent.scrollHeight)/2;
} if(parseInt(this.ScrollContent.scrollTop)%this.LineHeight!=0){
this.ScrollTimer=setTimeout(this.GetFunction(this,"Scroll",direction),this.Speed);
}
},
GetFunction:function (variable,method,param){
return function (){
variable[method](param);
}
}
}
</SCRIPT>
<SCRIPT type="text/javascript">
scrollnews();
var scroll1=new ScrollText("newscommend","pre","next",true,2500,false);
</SCRIPT>
</body>
</HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<style type="text/css">
body {
font-size:14px;
}
#container {
overflow:hidden;
margin: 0 auto;
width: 400px;
height: 400px;
border-style:solid;
border-width:1px;
}
span {
border-style:solid;
border-width:1px;
}
</style>
<script type="text/javascript"> window.onload = function() {
}
var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
function addMessage(userName, content, button) {
var container = document.getElementById("container");
var messageDiv = createElement("div", {
width:"398px",
height:"auto",
cssFloat:"left"
});
var leftDiv = createElement("div", {
width:"60px",
cssFloat:"left"
});
var rightDiv = createElement("div", {
width:"338px",
cssFloat:"left"
}); var pictureDiv = createElement("div", {
cssFloat:"left",
borderColor:"#BCD",
width:"40px",
marginLeft:"4px",
marginTop:"4px",
height:"40px",
lineHeight:"40px",
textAlign:"center",
borderStyle:"solid",
borderWidth:"1px"
});
pictureDiv.innerHTML = "头像";
leftDiv.appendChild(pictureDiv);
var userDiv = createElement("div", {
wordBreak:"break-all",
wordWrap:"break-word",
marginTop:"4px",
marginBottom:"4px",
fontSize: "12px"
});
userDiv.innerHTML = userName;
var contentDiv = createElement("div", {
wordBreak:"break-all",
wordWrap:"break-word",
marginTop:"4px",
marginBottom:"4px",
fontSize: "14px"
});
contentDiv.innerHTML = content;
var timerDiv = createElement("div", {
height:"10px",
fontSize:"12px",
marginBottom: "10px"
});
timerDiv.innerHTML = "30秒前";
rightDiv.appendChild(userDiv);
rightDiv.appendChild(contentDiv);
rightDiv.appendChild(timerDiv);
messageDiv.appendChild(leftDiv);
messageDiv.appendChild(rightDiv);
var rate = 0;
setOpacity(messageDiv, rate);
if (container.firstChild) {
container.insertBefore(messageDiv, container.firstChild);
container.scrollTop = messageDiv.offsetHeight;
} else {
container.appendChild(messageDiv);
} var moveTimer = setInterval(function() {
container.scrollTop -= 1;
if (container.scrollTop <= 0) {
container.scrollTop = 0;
clearInterval(moveTimer);
var opacityTimer = setInterval(function() { rate += .05;
if (rate >= 1) {
rate = 1;
clearInterval(opacityTimer);
button.disabled = false;
}
setOpacity(messageDiv, rate);
}, 40);
}
}, 20);
return container.scrollTop;
} function createElement(tagName, styles, props) {
var tag = document.createElement(tagName);
if (styles) {
for (var prop in styles) {
if (prop == "cssFloat" && isIE) {
tag.style.styleFloat = styles[prop];
continue;
}
tag.style[prop] = styles[prop];
}
}
if (props) {
for (var prop in props) {
tag.style[prop] = props[prop];
}
}
return tag;
} function setOpacity(target, rate) {
if (isIE) {
target.style.filter = "alpha(opacity=" + (rate * 100) + ")";
} else {
target.style.opacity = rate;
}
}
function showMessage(button) {
button.disabled = true;
var user = document.getElementById("userName");
var content = document.getElementById("content");
addMessage(user.value, content.value, button);
}
</script>
</head>
<body>
<div>UserName:<input type="text" id="userName" style="width:216px;"/></div>
<div>Message: <textarea id="content" style="resize:none;" rows="3" cols="29"></textarea></div>
<div><input type="button" value="Post Message" onclick="showMessage(this);"/></div>
<div id="container">
<div style="height:500px;"></div>
</div>
</body>
</html>模拟了一个，你试着玩玩看，应该效果是一模一样的。支持全浏览器，已经在IE6和Chrome8上实验