js文字无缝滚动(js文字左右无缝滚动)
js无缝滚动,现要求:滚动条数少于3条,则停止滚动。超过三条,便自动滚动。请大神帮忙解决一下
div id="scroll_div" class="ks_pic"
div style="height:6000000px;"
div id="scroll_begin" style="float:left;"
div class="ks_pic_img"img src='/uploads/1.jpg' border='0' width='126'height='160' /div
div class="ks_pic_img"img src='/uploads/1.jpg' border='0' width='126'height='160' /div
div class="ks_pic_img"img src='/uploads/1.jpg' border='0' width='126'height='160' /div
div class="ks_pic_img"img src='/uploads/1.jpg' border='0' width='126'height='160' /div
/div
div id="scroll_end" style="float:left;" /div/div
/div
script
function ScrollImgLeft(){
var speed=20,
doc=document,
scroll_begin = doc.getElementById("scroll_begin"),
scroll_end = doc.getElementById("scroll_end"),
scroll_div = doc.getElementById("scroll_div");
scroll_end.innerHTML=scroll_begin.innerHTML;
function Marquee(){
if(scroll_end.offsetHeight-scroll_div.scrollTop=0)
scroll_div.scrollTop-=scroll_begin.offsetHeight
else
scroll_div.scrollTop++
}
var MyMar=setInterval(Marquee,speed)
scroll_div.onmouseover=function() {clearInterval(MyMar)}
scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
}
ScrollImgLeft();
/script
html/js 使用marquee标签,怎么可以做到无缝滚动
需要js的配合一下是一个非常好用的一个html代码,可以试试
!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN"?
""
HTML?xmlns=""
HEAD
TITLE一行多列文字循环滚动带停顿-/TITLE
meta?name="keywords"?content="网页特效"?/
meta?name="description"?content=""?/
META?http-equiv=Content-Type?content="text/html;?charset=utf-8"
style?type="text/css"
ul?{height:200px;
padding-right:?0px;
padding-left:?0px;
padding-bottom:?0px;
margin:?0px;
padding-top:?0px
}
#announcement?{
width:300px;
height:200px;
background:url(img/menu_bg.gif)?repeat;
overflow:?hidden;
}
#announcement?div?{
border:?#e6e6e6?1px?solid;
padding:0px?10px?0px?10px;
overflow-y:hidden;
line-height:?24px;
height:100px;
}
#announcement?li?{
font-size:?12px;
float:?left;
list-style-type:?none;
margin-right:?20px;
padding-left:?10px;
background:?url(img/arrow_right.gif)?no-repeat?0px?50%;
white-space:?nowrap
}
#announcement?a?{
text-decoration:?none;
}
#announcement?a:hover?{
text-decoration:underline;
}
/style
/HEAD
BODY
DIV?id="announcement"?onMouseOver="if(!anncount)?{clearTimeout(annst);annst?=?0}"?onMouseOut="if(!annst)?annst?=?setTimeout('announcementScroll()',?anndelay);"
??DIV?id="scrbody"
????ul
???? li
???? a?href="#"?target="_blank"jQuery?类似腾讯网的图片幻灯特效(可自动播放)/a
???? /li
???? li
???? a?href="#/JS"?target="_blank"VB版增强型Windows任务管理器/a
???? /li
???? li
???? a?href="#/JS/texiao"target="_blank"JQuery?Tip多风格链接提示框/a
???? /li
???? li
???? a?href="#/JS/ad"?target="_blank"VC++动态加载、调用smtp.dll发邮件示例/a
???? /li
???? li
???? a?href="#/html+css"?target="_blank"++连连看游戏源码附外挂/a
???? /li
???? li
???? a?href="#/"?target="_blank"基于API的VB?HOOK钩子拦截程序/a
???? /li
???? li
???? a?href="#/"?target="_blank"VB?操作系统的一些常用小技巧集/a
???? /li
???? li
???? a?href="#/js"?target="_blank"xTree?标准的WEB菜单树(树形菜单)/a
???? /li
????/ul
??/DIV
/DIV
script?type="text/javascript"
function?$(id)
{
???return?document.getElementById(id);
}
var?anndelay?=?3000;
var?anncount?=?0;
var?annheight?=?24;
var?annst?=?0;
function?announcementScroll()
{
???if(?!?annst)
???{
??????$('scrbody').innerHTML?+=?'br?style="clear:?both"?/'?+?
$('scrbody').innerHTML;
??????$('scrbody').scrollTop?=?0;
??????if($('scrbody').scrollHeight??annheight?*?3)
??????{
?????????annst?=?setTimeout('announcementScroll()',?anndelay);
??????}
??????else
??????{
?????????$('announcement').onmouseover?=?$('announcement').onmouseout?=?null;
??????}
??????return;
???}
???if(anncount?==?annheight)
???{
??????if($('scrbody').scrollHeight?-?annheight?=?$('scrbody').scrollTop)
??????{
?????????$('scrbody').scrollTop?=?$('scrbody').scrollHeight?/?2?-?annheight;
??????}
??????anncount?=?0;
??????annst?=?setTimeout('announcementScroll()',?anndelay);
???}
???else
???{
??????$('scrbody').scrollTop?++?;
??????anncount?++?;
??????annst?=?setTimeout('announcementScroll()',?10);
???}
}
announcementScroll();
/script
/BODY
/HTML
使用JS如何实现文字无缝滚动
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
meta name="viewport" content="width=device-width, initial-scale=1.0"
meta http-equiv="X-UA-Compatible" content="ie=edge"
titleDocument/title
/head
style
.wrap{width:800px;height:500px;margin:200px auto 0;position: relative;border:1px solid #000;overflow: hidden;}
h1{position: absolute;left:800px;word-break: keep-all;}
/style
body
div class="wrap"
h1这是无缝滚动/h1
h1这是无缝滚动/h1
/div
script
var wenzi=document.querySelectorAll("h1");
var speed1=0;
var speed2=0;
var flag=false;
setInterval(function(){
speed1-=10;
wenzi[0].style.left=800+speed1+"px";
wenzi[1].style.left=800+speed2+"px";
if(wenzi[0].offsetLeft==0){
flag=true;
}
if(flag){
speed2-=10;
}
if(wenzi[0].offsetLeft==0){
speed2=0;
}
if(wenzi[1].offsetLeft==0){
speed1=0;
}
},60)
/script
/body
/html
纯手敲 觉得有用可以点个赞啊
js无缝滚动,有什么错误?
无缝滚动通常采用一个源版块,一个复制版块,两块并排合成一个主体,在一个较小范围的母版块里并排滚动。假设向上滚动那么js每隔几十毫秒设置主体头部减一js判断当版块2的头部减母版块的头部小于等于零时就设置版块主体头部等零,这样就实现了一个循环如果你的判断有误或者错误赋值或者这个主体总长还没有母版块长就会失灵。
js 实现文字多行多列无缝 循环滚动 且带停顿的
恩,可以百度搜索下“MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类)”这个JS封装类有你要的效果,调用起来也很方便,希望可以帮到你。