DIV+CSS 文字向上滚动
2012-05-18 10:59
337 查看
<div id="marquees">
<a href="#">你可曾有过无数的梦想,</a><br>
<br>
<a href="#">却在时光的流逝里幻灭 </a><br>
<br>
<a href="#">你可曾对未来期待憧憬,</a><br>
<br>
<a href="#">却在成长的岁月中迷失</a><br>
<br>
</div>
</div>
<script language="JavaScript">
marqueesHeight=200;
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()",10);
}
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>
<a href="#">你可曾有过无数的梦想,</a><br>
<br>
<a href="#">却在时光的流逝里幻灭 </a><br>
<br>
<a href="#">你可曾对未来期待憧憬,</a><br>
<br>
<a href="#">却在成长的岁月中迷失</a><br>
<br>
</div>
</div>
<script language="JavaScript">
marqueesHeight=200;
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()",10);
}
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>
相关文章推荐
- Jquery结合div+css实现文字间断停顿向上滚动效果
- 文字纵向滚动应用实例(DIV + CSS、鼠标拖动)
- JS+CSS代码简洁的无间断文字向上滚动切换效果
- 文字不间断向上滚动--javascript+div+ul+li
- 无缝向上滚动文字代码(Js+div),可用在公告栏
- 文字横向滚动应用实例(DIV + CSS、鼠标拖动)
- div内容文字上下滚动
- css+div如何解决文字溢出
- DIV+CSS的文字居中问题
- jquery实现文字向上滚动
- DIV+CSS如何让文字垂直居中?
- jQuery实现单行文字间歇向上滚动源代码
- js向上滚动文字问题的解决
- div+css 固定宽度且居中 文字左对齐
- 文字的向上滚动
- CSS用DIV做不规则形状的环绕文字
- JQuery左右按钮控制图片 文字向上滚动自定义插件
- div+css实现表头固定内容滚动表格
- 纯css,div隐藏滚动条,保留鼠标滚动效果。
- HTML中用div标签包含Marquee实现文字走马灯滚动效果