时间:2021-05-25
html里的marqueen也能实现内容的滚动,但滚动是间断的,在滚动一个周期中,会有一段空白出现。如果滚动的区域比较大,空间的出现,会让页面看起来很不美观。运用JavaScript可以使这一问题得到改观,实现无间断的滚动。
上下循环滚动代码:
复制代码 代码如下:
<div id="demo" onmouseover="clearInterval(inter)" onmouseout="inter=setInterval(qswhMarquee,30)" style="overflow:hidden; height:60px">
<div id="demo1">
111111111111111<br>
222222222222222<br>
333333333333333<br>
444444444444444<br>
555555555555555
</div>
<div id="demo2"></div>
</div>
<script>
var t=getid("demo"),t1=getid("demo1"),t2=getid("demo2"),sh=getid("show");
var inter;
t2.innerHTML=t1.innerHTML;
function qswhMarquee(){
if(t2.offsetTop<=t.scrollTop)
t.scrollTop-=t1.offsetHeight;
else
t.scrollTop++;
}
inter=setInterval(qswhMarquee,30);
function getid(id){
return document.getElementById(id);
}
</script>
文字左右循环滚动代码:
复制代码 代码如下:
<style type="text/css" media="all">
.d1{
margin:10px auto;
width:200px;
background-color:#CCCCCC;
height:20px;
overflow:hidden;
white-space:nowrap;
}
.d2{
margin:0px auto;
background-color:#FF9933;
}
.div2{
width:auto;
height:20px;
font-size:12px;
}
</style>
<script language="javascript" type="text/javascript">
var s,s2,s3,s4,timer,i=0;
function init(){
s=getid("div1");
s2=getid("div2");
s3=getid("div3");
s4=getid("div4");
s4.innerHTML=s3.innerHTML;
s2.style.width=s.offsetWidth+"px";
s2.style.height=s.offsetHeight+"px";
timer=setInterval(mar,30)
}
function mar(){
//s2.innerHTML=s.scrollLeft;
if(s3.offsetWidth<=s.scrollLeft){
s.scrollLeft-=s3.offsetWidth;
}else{s.scrollLeft++;}
}
function getid(id){
return document.getElementById(id);
}
window.onload=init;
</script>
<div class="d1" id="div1">
<span class="div2" id="div3"> 余志国网站设计工作室提供专业的外贸网站建站服务。</span>
<span id="div4" class="div2"></span>
</div>
<div class="d2" id="div2"></div>
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
IOS跑马灯效果,实现文字水平无间断滚动,示例代码如下:ViewController.h#import@interfaceViewController:UIVi
marquee.htc复制代码代码如下://描述:无间断滚动字幕//版本:2.0//作者:宝玉(WebUC.NET)//最新更新:2004-10-26//备:v
无缝循环marquee滚动JS代码实现,兼容IE,FireFox,Chrome,供大家参考,具体内容如下首先是CSS和HTML如下:#marquee_zxd{b
div+css+javascript实现无缝滚动,marquee无缝滚动,无缝滚动,兼容firefox用marquee实现首尾相连循环滚动效果(仅IE):复制代
**兼容IE,Firefox遵循W3C标准写法的图片无缝滚动代码(支持左移/右移功能)(本示例为上下两行图片进行双行滚动)**实现思路:一个设定宽度并且隐藏超出