搜 索

用html自带的跑马灯marquee标签或js做到文字或图片无缝滚动

编辑:QTOOL.NET日期:2019-03-02448

今天分享使用html中自带的marquee标签或者js代码实现简单的图片与文字不同方向的无缝滚动效果
首先我们先了解以下marquee的相关属性.
<marquee></marquee>普通滚动 
<marquee behavior=slide>xxx</marquee>滑动 
<marquee direction=up>xxx</marquee>向上滚动 
<marquee direction=down>xxx</marquee>向下滚动 
<marquee direction=right></marquee>向右滚动 
<marquee direction=’left’></marquee>向左滚动 
<marquee behavior=scroll>xxx</marquee>预设滚动 
<marquee behavior=alternate>xxx</marquee>来回滚动  
<marquee loop=3>xxx</marquee>滚动次数 
<marquee width=200>xxx</marquee>设定宽度 
<marquee height=500>xxx</marquee>设定高度 
<marquee bgcolor=FFFFF>xxx</marquee>设定背景颜色 
<marquee scrolldelay=200>xxx</marquee>设定滚动时间
<marquee scrollamount=50>xxx</marquee>设定滚动速度
<marquee onmouseover="this.start()">xxx</marquee>鼠标离开时开始滚动
<marquee onmouseover="this.stop()">xxx</marquee>鼠标经过上面时停止滚动
在了解了marquee的相关属性后我们就可以新建一个html页面,然后将以下代码复制粘贴到html的body中去
<MARQUEE behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="5" width="130"><SPAN unselectable="on">这里是要滚动的内容</SPAN></MARQUEE>
<br /><br />marquee实现简单的无缝滚动效果<br /><br />
<div id="scrollobj" style="white-space:nowrap;overflow:hidden;width:500px;"><span>文字填充内容示例</span></div>
<script language="javascript" type="text/javascript">
<!--
function scroll(obj) {
var ohj = (obj.scrollLeft)++;
//当滚动到达右边顶端的时候
if (obj.scrollLeft==ohj) obj.innerHTML += obj.innerHTML;
//当滚动条滚动了内容宽度的时候,滚动条重新回到最左端继续滚动
if (obj.scrollLeft>=obj.firstChild.offsetWidth) obj.scrollLeft=0;
}
setInterval("scroll(document.getElementById('scrollobj'))",20);
//-->
</script>
文字无缝滚动代码截图
然后保存这个页面,通过鼠标双击即可在浏览器中观看无缝滚动的显示效果。
如果我们只想要用js,怎样才能做到呢?
我们可以先了解一下js中的几个属性:
scrollTop:设置与获取对象最顶端与窗口最顶端的距离
scrollHeight: 获取滚动的高度
scrollWidth:获取滚动的宽度
scrollLeft:指定对象左边与窗口最左边的距离
innerHTML:可设置与获取指定的div对象中的html内容
offsetTop:获取对象相对于页面或由offsetTop属性计算顶端位置
offsetHeight:获取对象相对于页面或offsetParent属性指定的高度
offsetWidth:获取对象相对于页面或由父坐标offsetParent属性宽度
offsetLeft:获取对象相对于页面或offsetParent属性计算左侧位置
<style type="text/css">
<!--
#ceshi {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#ceshi img {
border: 3px solid #F2F2F2;
}
#inceshi {
float: left;
width: 800%;
}
#ceshi1 {
float: left;
}
#ceshi2 {
float: left;
}
-->
</style>
向左滚动
<div id="ceshi">
<div id="inceshi">
<div id="ceshi1">
<a href="#"><img src="图片地址" border="0" /></a>
<a href="#"><img src="图片地址" border="0" /></a>
<a href="#"><img src="图片地址" border="0" /></a>
<a href="#"><img src="图片地址" border="0" /></a>
<a href="#"><img src="图片地址" border="0" /></a>
<a href="#"><img src="图片地址" border="0" /></a>
</div>
<div id="ceshi2"></div>
</div>
</div>
<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("ceshi");
var tab1=document.getElementById("ceshi1");
var tab2=document.getElementById("ceshi2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>
如果我们想要的不是左右滚动,而是上下无缝滚动呢?
<div id="ceshi" style="overflow:hidden;height:132px;width:500px; border:1px solid #dde5bc; overflow:hidden;">
 <div id=ceshi1> 
  <a href="#">上下滚动内容测试填充……</a><br>
  <a href="#">这是一段长长的语句XXXXXXX……</a><br>
  <a href="#">上下滚动内容测试填充………</a><br>
  <a href="#">这是一段长长的语句XXXXXXX……</a><br>
  <a href="#">上下滚动内容测试填充……</a><br>
  <a href="#">这是一段长长的语句XXXXXXX……</a><br>
  <a href="#">上下滚动内容测试填充……</a><br>
  <a href="#">这是一段长长的语句XXXXXXX……</a><br>
 </div>
 <div id=ceshi2></div>
</div>
<script>
var speed=40
var ceshi=document.getElementById("ceshi");
var ceshi2=document.getElementById("ceshi2");
var ceshi1=document.getElementById("ceshi1");
ceshi2.innerHTML=ceshi1.innerHTML
function Marquee(){
 if(ceshi2.offsetTop-ceshi.scrollTop<=0)
  ceshi.scrollTop-=ceshi1.offsetHeight
 else{
  ceshi.scrollTop++
 }
}
var MyMar=setInterval(Marquee,speed)
ceshi.onmouseover=function() {clearInterval(MyMar)}
ceshi.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
以上就是分享的一些js实现的无缝滚动代码,可以根据需求自由修改为无缝滚动的文字或者产品图片效果,当然相对于第一种用无缝滚动代码可能在一些浏览器中存在一些兼容问题,还是推荐使用下面两个js实现的无缝滚动代码.

TAG标签:js无缝滚动
此文章由QTOOL.NET编辑
最新文章

热门标签