求javascript实现的自下而上的滚动文字效果
求javascript实现的自下而上的滚动文字效果,要有高度和宽度设置,当鼠标停在文字上的时候文字停止,要循环滚动的,最好有有关设置注释.谢谢....
求javascript实现的自下而上的滚动文字效果,要有高度和宽度设置,当鼠标停在文字上的时候文字停止,要循环滚动的,最好有有关设置注释.谢谢.
展开
3个回答
展开全部
最简单的滚动就是marquee,不过它效果不太好看,没有加速和停留的过程。
下面这段就是我常用的,效果很好,是从淘宝上取下的,经过我修改了一点点。
<style type="text/css">
#IssueList {
margin:0px 0px;
padding: 0;
list-style: none;
height: 20px;
width:100px;
overflow:hidden;
background-color:#336699;
color:#FFFFFF;
}
#IssueList li {
font-size:13px;
line-height: 20px;
}
</style>
<!--这个ul里面放要滚动的内容,由动态服务器端语言很好实现-->
<ul id="IssueList">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<script type="text/javascript">
(function(ul, delay, speed, lineHeight) {
var slideBox = (typeof ul == 'string')?document.getElementById(ul):ul;
var delay = delay||1000;
var speed=speed||20;
var lineHeight = lineHeight||20;
var tid = null, pause = false;
var start = function() {
tid=setInterval(slide, speed);
}
var slide = function() {
if (pause) return;
slideBox.scrollTop += 2;
if (slideBox.scrollTop % lineHeight == 0) {
clearInterval(tid);
slideBox.appendChild(slideBox.getElementsByTagName('li')[0]);
slideBox.scrollTop = 0;
setTimeout(start, delay);
}
}
slideBox.onmouseover=function(){pause=true;}
slideBox.onmouseout=function(){pause=false;}
setTimeout(start, 2000);
})('IssueList', 1000, 2, 20);//停留时间,相对速度(越小越快),每次滚动多少,最好和Li的Line-height一致。
</script>
下面这段就是我常用的,效果很好,是从淘宝上取下的,经过我修改了一点点。
<style type="text/css">
#IssueList {
margin:0px 0px;
padding: 0;
list-style: none;
height: 20px;
width:100px;
overflow:hidden;
background-color:#336699;
color:#FFFFFF;
}
#IssueList li {
font-size:13px;
line-height: 20px;
}
</style>
<!--这个ul里面放要滚动的内容,由动态服务器端语言很好实现-->
<ul id="IssueList">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<script type="text/javascript">
(function(ul, delay, speed, lineHeight) {
var slideBox = (typeof ul == 'string')?document.getElementById(ul):ul;
var delay = delay||1000;
var speed=speed||20;
var lineHeight = lineHeight||20;
var tid = null, pause = false;
var start = function() {
tid=setInterval(slide, speed);
}
var slide = function() {
if (pause) return;
slideBox.scrollTop += 2;
if (slideBox.scrollTop % lineHeight == 0) {
clearInterval(tid);
slideBox.appendChild(slideBox.getElementsByTagName('li')[0]);
slideBox.scrollTop = 0;
setTimeout(start, delay);
}
}
slideBox.onmouseover=function(){pause=true;}
slideBox.onmouseout=function(){pause=false;}
setTimeout(start, 2000);
})('IssueList', 1000, 2, 20);//停留时间,相对速度(越小越快),每次滚动多少,最好和Li的Line-height一致。
</script>
展开全部
<div id="marqueey" >
滚动内容
</div>
<script language="JavaScript">
marqueeyHeight=185; //滚动高度控制
stopscroll=false;
with(marqueey){
style.width=0;
style.height=marqueeyHeight;
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<marqueeyHeight){
templayer.innerHTML+=marqueey.innerHTML;
}
marqueey.innerHTML=templayer.innerHTML+templayer.innerHTML;
setInterval("scrollUp()",80); //滚动速度控制,越大越慢
}
document.body.onload=init;
function scrollUp(){
if(stopscroll==true) return;
preTop=marqueey.scrollTop;
marqueey.scrollTop+=1;
if(preTop==marqueey.scrollTop){
marqueey.scrollTop=templayer.offsetHeight-marqueeyHeight;
marqueey.scrollTop+=1;
}
}
</script>
滚动内容
</div>
<script language="JavaScript">
marqueeyHeight=185; //滚动高度控制
stopscroll=false;
with(marqueey){
style.width=0;
style.height=marqueeyHeight;
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<marqueeyHeight){
templayer.innerHTML+=marqueey.innerHTML;
}
marqueey.innerHTML=templayer.innerHTML+templayer.innerHTML;
setInterval("scrollUp()",80); //滚动速度控制,越大越慢
}
document.body.onload=init;
function scrollUp(){
if(stopscroll==true) return;
preTop=marqueey.scrollTop;
marqueey.scrollTop+=1;
if(preTop==marqueey.scrollTop){
marqueey.scrollTop=templayer.offsetHeight-marqueeyHeight;
marqueey.scrollTop+=1;
}
}
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
marquee
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询