> 网页特效 > 综合特效 > 文章内容

js文字无缝滚动(js文字左右无缝滚动)

http://www.itjxue.com  2023-02-17 18:01  来源:未知  点击次数: 

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封装类有你要的效果,调用起来也很方便,希望可以帮到你。

(责任编辑:IT教学网)

更多

相关综合特效文章

阅读排行

专题教程

推荐综合特效文章

最新更新综合特效