滚动的HTML代码公告,当内容滚动完后会现一段时间的空白,如何将这段时间的空白取掉,让文字连续滚动
<pstyle="margin-top:0;margin-bottom:0"><marqueescrollAmount=2width=175height=160direc...
<p style="margin-top: 0; margin-bottom: 0"><marquee scrollAmount=2 width=175 height=160 direction=up>
当钟声响彻夜空的时候,我们迎来了一个充满希望的2012年
<p></marquee></p> 展开
当钟声响彻夜空的时候,我们迎来了一个充满希望的2012年
<p></marquee></p> 展开
展开全部
你用的marquee 只是HTML标签里的跑马灯效果标签,该标签使用简单,对于显示效果要求不高的网站使用还不错。但对于要求效果高的地方就完全不能胜任了,他最大的问题就是你提出来的这个问题,一段内容显示完后会有一段空白。
所以现在制作网站一般都不用marquee了,而是用JS来控制进行无缝滚动。下面是我给你写的代码。(注意该代码要想正使用,必须得内容文字高度大于外框高度时才能有效,就像我下面的代码,你可以直接贴上试试,这不是我写的代码有问题,这是所有这类代码都是这样,如果你能看懂原理就用我多说了)。
<div id="demo" style="width:175px;height:160;border:1px solid red;overflow:hidden;">
<div id="demo1">
当钟声响彻夜空的时候,我们迎来了一个充满希望的2012年<br>
我们迎来了一个充满希望的2012年<br>
我们迎来了一个充满希望的2012年<br>
我们迎来了一个充满希望的2012年
</div>
<div id="demo2"></div>
</div>
<script type="text/javascript">
<!--
function $(Str){return document.getElementById(Str);}
var speed=30;
var demo=$("demo");
var demo1=$("demo1");
var demo2=$("demo2");
demo2.innerHTML=demo1.innerHTML;
function Marquee1(){
if(demo2.offsetTop-demo.scrollTop<=0){
demo.scrollTop-=demo1.offsetHeight;
}
else{
demo.scrollTop++
}
}
var MyMar1=setInterval(Marquee1,speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
demo.onmouseover=function() {clearInterval(MyMar1)}
//鼠标移开时重设定时器
demo.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
//-->
</script>
所以现在制作网站一般都不用marquee了,而是用JS来控制进行无缝滚动。下面是我给你写的代码。(注意该代码要想正使用,必须得内容文字高度大于外框高度时才能有效,就像我下面的代码,你可以直接贴上试试,这不是我写的代码有问题,这是所有这类代码都是这样,如果你能看懂原理就用我多说了)。
<div id="demo" style="width:175px;height:160;border:1px solid red;overflow:hidden;">
<div id="demo1">
当钟声响彻夜空的时候,我们迎来了一个充满希望的2012年<br>
我们迎来了一个充满希望的2012年<br>
我们迎来了一个充满希望的2012年<br>
我们迎来了一个充满希望的2012年
</div>
<div id="demo2"></div>
</div>
<script type="text/javascript">
<!--
function $(Str){return document.getElementById(Str);}
var speed=30;
var demo=$("demo");
var demo1=$("demo1");
var demo2=$("demo2");
demo2.innerHTML=demo1.innerHTML;
function Marquee1(){
if(demo2.offsetTop-demo.scrollTop<=0){
demo.scrollTop-=demo1.offsetHeight;
}
else{
demo.scrollTop++
}
}
var MyMar1=setInterval(Marquee1,speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
demo.onmouseover=function() {clearInterval(MyMar1)}
//鼠标移开时重设定时器
demo.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
//-->
</script>
展开全部
你说的这种方法marquee难以实现;
之前写了一个纵向无缝滚动 的例子;
let $server = document.getElementById('tab');
let $serverState = document.getElementById('serverState');
let $serverclone = document.getElementById('closerver');
let _height = $("#serverState").height();
let offset = 0;
let $offsetHeight;
if(_height < $("#tab").height()) {
$serverState.style.marginBottom = $("#tab").height() - _height + "px";
$offsetHeight = $("#tab").height()
} else {
$serverState.style.marginBottom = 0;
$offsetHeight = $serverState.offsetHeight
}
$serverclone.innerHTML = $serverState.innerHTML;
serverIndex = setInterval(function() {
if(offset >= $offsetHeight) {
offset = 0;
} else {
$serverState.style.marginTop = -offset + "px";
offset += 1;
}
}, 50);
<div id="tab">
<ul id="serverState" >
<li>xxx</li>
</ul>
<ul id="closerver" style="">
</ul>
</div>
给你借鉴一下
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询