您的当前位置:首页正文

js焦点文字滚动效果代码分享_javascript技巧

2023-12-05 来源:站点网
导读这篇文章主要为大家详细介绍了Javascript实现信息滚动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了js信息滚动效果的具体代码,供大家参考,具体内容如下向上无缝滚动:<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>向上无缝滚动</title&g
本文实例讲述了js焦点文字滚动效果。分享给大家供大家参考。具体如下:效果描述:今天推荐的这个又是一个原生的js焦点图效果默认自动切换,也可以手动切换javascript代码采用函数式对象编程,也就是javascript编程中的Module模式基本用法很简单,主要特点有三:1、模块化,可重用2、封装了变量和function,和全局的命名空间不接触,不污染全局变量3、只暴露可用public方法,其他私有方法全部隐藏,确保js相互之间不会冲突运行效果图:-------------------查看效果-------------------

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。为大家分享的jQuery下拉美化搜索表单效果代码如下

纯js(不依赖现有框架)焦点文字滚动效果 
  • js焦点图效果
  • js焦点图效果
  • js焦点图效果
  • js焦点图效果
  • js焦点图效果
  • 1
  • 2
  • 3
  • 4
  • 5
  • 间歇性滚动:

    <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>新闻无缝向上无缝滚动</title><style>body { font-size: 12px; line-height: 24px; text-algin: center; /* 页面内容居中 */}* { margin: 0px; padding: 0px; /* 去掉所有标签的marign和padding的值 */}ul { list-style: none; /* 去掉ul标签默认的点样式 */}a img { border: none; /* 超链接下,图片的边框 */}a { color: #333; text-decoration: none; /* 超链接样式 */}a:hover { color: #ff0000;}#mooc { width: 399px; border: 5px solid #ababab; -moz-border-radius: 15px; /* Gecko browsers */ -webkit-border-radius: 15px; /* Webkit browsers */ border-radius: 15px; box-shadow: 2px 2px 10px #ababab; margin: 50px auto 0; text-align: left; /* 让新闻内容靠左 */}/* 头部样式 */ #moocTitle { height: 62px; overflow: hidden; /* 这个一定要加上,内容超出的部分要隐藏,免得撑高头部 */ font-size: 26px; line-height: 62px; padding-left: 30px; background-image: -moz-linear-gradient(top, #f05e6f, #c9394a); /* Firefox */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a)); /* Saf4+, Chrome */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType='0'); /* IE*/ border: 1px solid ##f05e6f; -moz-border-radius: 8px 8px 0 0; /* Gecko browsers */ -webkit-border-radius: 8px 8px 0 0; /* Webkit browsers */ border-radius: 8px 8px 0 0; color: #fff; position: relative;}#moocTitle a { position: absolute; right: 10px; bottom: 10px; display: inline; color: #fff; font-size: 12px; line-height: 24px;}/* 底部样式 */#moocBot { width: 399px; height: 10px; overflow: hidden; /* 这个一定要加上,内容超出的部分要隐藏,免得撑高底部结构 */}/* 中间样式 */#moocBox { height: 144px; width: 335px; margin-left: 25px; margin-top: 10px; overflow: hidden; /* 这个一定要加,超出的内容部分要隐藏,免得撑高中间部分 */}#mooc ul li { height: 24px;}#mooc ul li a { width: 180px; float: left; display: block; overflow: hidden; text-indent: 15px; height: 24px;}#mooc ul li span { float: right; color: #999;}</style></head><body><!-- 慕课网课程公告开始 --><p id="mooc"> <!-- 头部 --><p id="moocTitle">慕课网最新课程<a href="#" target="_self">更多>></a> </p><!-- 头部结束 --> <!-- 中间 --><p id="moocBox"> <ul> <li><a href="#">1.学会html5 绝对的屌丝逆袭(案例)</a><span>2013-09-18</span></li> <li><a href="#">2.tab页面切换效果(案例)</a><span>2013-10-09</span></li> <li><a href="#">3.圆角水晶按钮制作(案例)</a><span>2013-10-21</span></li> <li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li> <li><a href="#">5.分页页码制作(案例)</a><span>2013-11-06</span></li> <li><a href="#">6.导航条菜单的制作(案例)</a><span>2013-11-08</span></li> <li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li> <li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li> <li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li> </ul></p><!-- 中间结束 --> <!-- 底部 --><p id ="moocBot"> </p><!-- 底部结束 --> </p><!-- 慕课网课程公告结束 --> <script type="text/javascript"> var area = document.getElementById('moocBox'); var iliHeight = 24;//单行滚动的高度 var speed = 50;//滚动的速度 var time; var delay= 2000; area.scrollTop=0; area.innerHTML+=area.innerHTML;//克隆一份一样的内容 function startScroll(){ time=setInterval("scrollUp()",speed); area.scrollTop++; } function scrollUp(){ if(area.scrollTop % iliHeight==0){ clearInterval(time); setTimeout(startScroll,delay); }else{ area.scrollTop++; if(area.scrollTop >= area.scrollHeight/2){ area.scrollTop =0; } } } setTimeout(startScroll,delay) </script></body></html>

    利用javascript实现文字滚动

    这篇文章主要为大家详细介绍了Javascript实现信息滚动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    本文实例为大家分享了js信息滚动效果的具体代码,供大家参考,具体内容如下

    向上无缝滚动:

    <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>向上无缝滚动</title><style>body { font-size: 12px; line-height: 24px; text-algin: center; /* 页面内容居中 */}* { margin: 0px; padding: 0px; /* 去掉所有标签的marign和padding的值 */}ul { list-style: none; /* 去掉ul标签默认的点样式 */}a img { border: none; /* 超链接下,图片的边框 */}a { color: #333; text-decoration: none; /* 超链接样式 */}a:hover { color: #ff0000;}#mooc { width: 399px; border: 5px solid #ababab; -moz-border-radius: 15px; /* Gecko browsers */ -webkit-border-radius: 15px; /* Webkit browsers */ border-radius: 15px; box-shadow: 2px 2px 10px #ababab; margin: 50px auto 0; text-align: left; /* 让新闻内容靠左 */}/* 头部样式 */ #moocTitle { height: 62px; overflow: hidden; /* 这个一定要加上,内容超出的部分要隐藏,免得撑高头部 */ font-size: 26px; line-height: 62px; padding-left: 30px; background-image: -moz-linear-gradient(top, #f05e6f, #c9394a); /* Firefox */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a)); /* Saf4+, Chrome */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType='0'); /* IE*/ border: 1px solid ##f05e6f; -moz-border-radius: 8px 8px 0 0; /* Gecko browsers */ -webkit-border-radius: 8px 8px 0 0; /* Webkit browsers */ border-radius: 8px 8px 0 0; color: #fff; position: relative;}#moocTitle a { position: absolute; right: 10px; bottom: 10px; display: inline; color: #fff; font-size: 12px; line-height: 24px;}/* 底部样式 */#moocBot { width: 399px; height: 10px; overflow: hidden; /* 这个一定要加上,内容超出的部分要隐藏,免得撑高底部结构 */}/* 中间样式 */#moocBox { height: 144px; width: 335px; margin-left: 25px; margin-top: 10px; overflow: hidden; /* 这个一定要加,超出的内容部分要隐藏,免得撑高中间部分 */}#mooc ul li { height: 24px;}#mooc ul li a { width: 180px; float: left; display: block; overflow: hidden; text-indent: 15px; height: 24px;}#mooc ul li span { float: right; color: #999;}</style></head><body><!-- 慕课网课程公告开始 --><p id="mooc"> <!-- 头部 --><h3 id="moocTitle">最新课程<a href="#" target="_self">更多>></a> </h3><!-- 头部结束 --> <!-- 中间 --><p id="moocBox"> <ul id="con1"> <li><a href="#">1.学会html5 绝对的屌丝逆袭(案例)</a><span>2013-09-18</span></li> <li><a href="#">2.tab页面切换效果(案例)</a><span>2013-10-09</span></li> <li><a href="#">3.圆角水晶按钮制作(案例)</a><span>2013-10-21</span></li> <li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li> <li><a href="#">5.分页页码制作(案例)</a><span>2013-11-06</span></li> <li><a href="#">6.导航条菜单的制作(案例)</a><span>2013-11-08</span></li> <li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li> <li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li> <li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li> </ul> <ul id="con2"> </ul></p><!-- 中间结束 --> </p><!-- 慕课网课程公告结束 --> <script type="text/javascript"> var area = document.getElementById('moocBox'); var con1 = document.getElementById('con1'); var con2 = document.getElementById('con2'); var speed = 50; area.scrollTop = 0; con2.innerHTML = con1.innerHTML; function scrollUp(){ if(area.scrollTop >= con1.scrollHeight) { area.scrollTop = 0; }else{ area.scrollTop ++; } }var myScroll = setInterval("scrollUp()",speed);area.onmouseover = function(){ clearInterval(myScroll); }area.onmouseout = function(){ myScroll = setInterval("scrollUp()",speed); } </script></body></html>

    间歇性滚动:

    <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>新闻无缝向上无缝滚动</title><style>body { font-size: 12px; line-height: 24px; text-algin: center; /* 页面内容居中 */}* { margin: 0px; padding: 0px; /* 去掉所有标签的marign和padding的值 */}ul { list-style: none; /* 去掉ul标签默认的点样式 */}a img { border: none; /* 超链接下,图片的边框 */}a { color: #333; text-decoration: none; /* 超链接样式 */}a:hover { color: #ff0000;}#mooc { width: 399px; border: 5px solid #ababab; -moz-border-radius: 15px; /* Gecko browsers */ -webkit-border-radius: 15px; /* Webkit browsers */ border-radius: 15px; box-shadow: 2px 2px 10px #ababab; margin: 50px auto 0; text-align: left; /* 让新闻内容靠左 */}/* 头部样式 */ #moocTitle { height: 62px; overflow: hidden; /* 这个一定要加上,内容超出的部分要隐藏,免得撑高头部 */ font-size: 26px; line-height: 62px; padding-left: 30px; background-image: -moz-linear-gradient(top, #f05e6f, #c9394a); /* Firefox */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a)); /* Saf4+, Chrome */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType='0'); /* IE*/ border: 1px solid ##f05e6f; -moz-border-radius: 8px 8px 0 0; /* Gecko browsers */ -webkit-border-radius: 8px 8px 0 0; /* Webkit browsers */ border-radius: 8px 8px 0 0; color: #fff; position: relative;}#moocTitle a { position: absolute; right: 10px; bottom: 10px; display: inline; color: #fff; font-size: 12px; line-height: 24px;}/* 底部样式 */#moocBot { width: 399px; height: 10px; overflow: hidden; /* 这个一定要加上,内容超出的部分要隐藏,免得撑高底部结构 */}/* 中间样式 */#moocBox { height: 144px; width: 335px; margin-left: 25px; margin-top: 10px; overflow: hidden; /* 这个一定要加,超出的内容部分要隐藏,免得撑高中间部分 */}#mooc ul li { height: 24px;}#mooc ul li a { width: 180px; float: left; display: block; overflow: hidden; text-indent: 15px; height: 24px;}#mooc ul li span { float: right; color: #999;}</style></head><body><!-- 慕课网课程公告开始 --><p id="mooc"> <!-- 头部 --><p id="moocTitle">慕课网最新课程<a href="#" target="_self">更多>></a> </p><!-- 头部结束 --> <!-- 中间 --><p id="moocBox"> <ul> <li><a href="#">1.学会html5 绝对的屌丝逆袭(案例)</a><span>2013-09-18</span></li> <li><a href="#">2.tab页面切换效果(案例)</a><span>2013-10-09</span></li> <li><a href="#">3.圆角水晶按钮制作(案例)</a><span>2013-10-21</span></li> <li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li> <li><a href="#">5.分页页码制作(案例)</a><span>2013-11-06</span></li> <li><a href="#">6.导航条菜单的制作(案例)</a><span>2013-11-08</span></li> <li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li> <li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li> <li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li> </ul></p><!-- 中间结束 --> <!-- 底部 --><p id ="moocBot"> </p><!-- 底部结束 --> </p><!-- 慕课网课程公告结束 --> <script type="text/javascript"> var area = document.getElementById('moocBox'); var iliHeight = 24;//单行滚动的高度 var speed = 50;//滚动的速度 var time; var delay= 2000; area.scrollTop=0; area.innerHTML+=area.innerHTML;//克隆一份一样的内容 function startScroll(){ time=setInterval("scrollUp()",speed); area.scrollTop++; } function scrollUp(){ if(area.scrollTop % iliHeight==0){ clearInterval(time); setTimeout(startScroll,delay); }else{ area.scrollTop++; if(area.scrollTop >= area.scrollHeight/2){ area.scrollTop =0; } } } setTimeout(startScroll,delay) </script></body></html>

    实现网页内容水平或垂直滚动的Javascript代码

    主要两个部分,一、是滚动内容部分;二、JS的滚动代码部分,也只有两句话。

    一、传统的滚动代码

    用Javascript实现新闻内容的水平滚动!

    [Ctrl+A

    全选

    注:如需引入外部Js需刷新才能执行]

    传统的滚动代码应用效果比较单一,而且经常还存在浏览器的兼容性问题,比如在FIREFOX上效果就会出现marquee的特效无效的问题。

    二、Javascript实现的滚动效果

    用Javascript实现新闻内容的水平滚动1

    document.write("用Javascript实现新闻内容的水平滚动2");

    //新闻内容

    document.write("用Javascript实现新闻内容的水平滚动3");

    //新闻内容

    //div标签中的宽度width等参数可以自行调节

    function

    newsScroll()

    {

    news.style.pixelLeft=(news.style.pixelLeft-1)%headnew.offsetWidth;//实现不间断滚动

    }

    function

    go()

    {

    timer1=setInterval('newsScroll()',30)

    //更改第二个参数可以改变速度,值越小,速度越快。

    }

    go();

    [Ctrl+A

    全选

    注:如需引入外部Js需刷新才能执行]

    以上就是完整的JS滚动代码,如果想实现垂直滚动,则只需要简单的修改即可,即使用style的pixTop属性即可实现。

    摘自

    天缘博客

    javascript 模拟Marquee文字向左均匀滚动代码

    可以实现匀速、无缝、加链接以及其它的修饰效果,本代码就是实现了这一功能,让文字从右至右平滑滚动,滚动宽度、高度、速度均可以设定。
    Js文字向左运动
    var
    marqueewidth=350
    var
    marqueeheight=22
    var
    speed=5
    var
    marqueecontents='欢迎光临脚本之家
    网页特效栏目,精品特效全收罗!'
    if
    (document.all)
    document.write(''+marqueecontents+'')
    function
    regenerate(){
    window.location.reload()
    }
    function
    regenerate2(){
    if
    (document.layers){
    setTimeout("window.onresize=regenerate",450)
    intializemarquee()
    }
    }
    function
    intializemarquee(){
    document.cmarquee01.document.cmarquee02.document.write(''+marqueecontents+'')
    document.cmarquee01.document.cmarquee02.document.close()
    thelength=document.cmarquee01.document.cmarquee02.document.width
    scrollit()
    }
    function
    scrollit(){
    if
    (document.cmarquee01.document.cmarquee02.left>=thelength*(-1)){
    document.cmarquee01.document.cmarquee02.left-=speed
    setTimeout("scrollit()",100)
    }
    else{
    document.cmarquee01.document.cmarquee02.left=marqueewidth
    scrollit()
    }
    }
    window.onload=regenerate2
    [Ctrl+A
    全选
    注:如需引入外部Js需刷新才能执行]

    javascript 模拟Marquee文字向左均匀滚动代码

    可以实现匀速、无缝、加链接以及其它的修饰效果,本代码就是实现了这一功能,让文字从右至右平滑滚动,滚动宽度、高度、速度均可以设定。
    Js文字向左运动
    var
    marqueewidth=350
    var
    marqueeheight=22
    var
    speed=5
    var
    marqueecontents='欢迎光临脚本之家
    网页特效栏目,精品特效全收罗!'
    if
    (document.all)
    document.write(''+marqueecontents+'')
    function
    regenerate(){
    window.location.reload()
    }
    function
    regenerate2(){
    if
    (document.layers){
    setTimeout("window.onresize=regenerate",450)
    intializemarquee()
    }
    }
    function
    intializemarquee(){
    document.cmarquee01.document.cmarquee02.document.write(''+marqueecontents+'')
    document.cmarquee01.document.cmarquee02.document.close()
    thelength=document.cmarquee01.document.cmarquee02.document.width
    scrollit()
    }
    function
    scrollit(){
    if
    (document.cmarquee01.document.cmarquee02.left>=thelength*(-1)){
    document.cmarquee01.document.cmarquee02.left-=speed
    setTimeout("scrollit()",100)
    }
    else{
    document.cmarquee01.document.cmarquee02.left=marqueewidth
    scrollit()
    }
    }
    window.onload=regenerate2
    [Ctrl+A
    全选
    注:如需引入外部Js需刷新才能执行]

    网页代码:求一个隔段时间可停顿的滚动字幕代码

    JS 滚动字幕文字新法

    我想大家都看过各种各样的滚动(最常用的就是用在新闻的更新上面),一般情况下只要不是图片,都是用HTML本身就有提供一个很不错的滚动标记——marquee来完成的(用JS也可以同样实现这种效果);当然并不是说图片就不能那样做。

    以下为marquee的一些基本的参数:

    该标记语法格式如下:

    <marquee

    aligh=left|center|right|top|bottom

    bgcolor=#n

    direction=left|right|up|down

    behavior=type

    height=n

    hspace=n

    scrollamount=n

    Scrolldelay=n

    width=n

    VSpace=n

    loop=n>内容</marquee>

    下面解释一下各参数的含义:

    align:是设定活动字幕的位置,除了居左、居中、居右三种位置外,又增加靠上(top)和靠下(bottom)两种位置。

    Bgcolor:用于设定活动字幕的背景颜色,可以使用英文的单词也可以是十六进制数的。

    Direction:用于设定活动字幕的滚动方向是向左(left)、向右(right)、向上(up)、向下(down)。

    Behavior:用于设定滚动的方式,主要由三种方式:

    behavior="scroll"表示由一端滚动到另一端;

    behavior="slide":表示由一端快速滑动到另一端,且不再重复;

    behavior="alternate"表示在两端之间来回滚动。

    Height:用于设定滚动字幕的高度。

    Width:则设定滚动字幕的宽度。

    Hspace和vspace:分别用于设定滚动字幕的左右边框和上下边框的宽度。

    Scrollamount:用于设定活动字幕的滚动距离。数值越小,滚动的速度就越快。

    scrolldelay:用于设定滚动两次之间的延迟时间,数值越小,间隔就越小。

    Loop:用于设定滚动的次数,当loop=-1表示一直滚动下去,直到页面更新。其中默认情况是向左滚动无限次,字幕高度是文本高度;滚动范围:水平滚动的宽度是当前位置的宽度;垂直滚动的高度是当前位置的高度。

    现在要介绍的是一种新型的滚动,利用JS的方法来做字幕的滚动:向上,在中间停顿一到两秒(就像经典的这种):

    将以下代码贴到您要显示的位置就可以了。以上已经将网站的这种滚动的做法做了一个大概的介绍。

    具体效果可以看:运行代码框

    <script>

    var marqueeContent=new Array(); //定义一个数组,用来存放显示内容

    marqueeContent[0]='<A href="#" onclick="reinitMarquee()">刷新最新列表</FONT></A>';

    marqueeContent[1]='<a href=http://www.blueidea.com/updatelist.asp target=_blank>站点最新更新六十条</a>';

    marqueeContent[2]='<A href=http://www.blueidea.com/tech/graph/2003/875.asp target=_blank>羽毛效果制作教程</a>';

    marqueeContent[3]='<A href=http://www.blueidea.com/tech/program/2003/831.asp target=_blank>MySQL&ASP</a>';

    marqueeContent[4]='<A href=http://www.blueidea.com/tech/web/2003/874.asp target=_blank>初步了解CSS3</a>';

    marqueeContent[5]='<A href=http://www.blueidea.com/tech/graph/2003/864.asp target=_blank>Fireworks MX 2004执行面版操作</a>';

    marqueeContent[6]='<A href=http://www.blueidea.com/tech/graph/2003/872.asp target=_blank>Fireworks MX 2004等高渐变填充</a>';

    marqueeContent[7]='<A href=http://www.blueidea.com/photo/gallery/2003/873.asp target=_blank>瓶子里的花</a>';

    marqueeContent[8]='<A href=http://www.blueidea.com/tech/graph/2003/871.asp target=_blank>Fireworks MX 实现选项卡式效果</a>';

    marqueeContent[9]='<A href=http://www.blueidea.com/photo/gallery/2003/870.asp target=_blank>情侣:黑白的爱情空气</a>';

    marqueeContent[10]='<A href=http://www.blueidea.com/tech/graph/2003/866.asp target=_blank>制作 MAC 风格的苹果标志</a>';

    marqueeContent[11]='<A href=http://www.blueidea.com/tech/graph/2003/868.asp target=_blank>蛋壳制作及破壳而出的人物合成</a>';

    var marqueeInterval=new Array(); //定义一些常用而且要经常用到的变量

    var marqueeId=0;

    var marqueeDelay=4000;

    var marqueeHeight=16;

    //接下来的是定义一些要使用到的函数

    Array.prototype.random=function() {

    var a=this;

    var l=a.length;

    for(var i=0;i<l;i++) {

    var r=Math.floor(Math.random()*(l-i));

    a=a.slice(0,r).concat(a.slice(r+1)).concat(a[r]);

    }

    return a;

    }

    function initMarquee() {

    marqueeContent=marqueeContent.random();

    var str='';

    for(var i=0;i<Math.min(3,marqueeContent.length);i++) str+=(i>0?' ':'')+marqueeContent[i];

    document.write('<div id=marqueeBox style="overflow:hidden;height:'+marqueeHeight+'px" onmouseover="clearInterval(marqueeInterval[0])" onmouseout="marqueeInterval[0]=setInterval(\'startMarquee()\',marqueeDelay)"><div>'+str+'</div></div>');

    marqueeId+=2;

    if(marqueeContent.length>3)marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay);

    }

    function reinitMarquee() {

    js_scroll_content.src='scroll_content2.js';

    marqueeContent=marqueeContent.random();

    var str='';

    for(var i=0;i<Math.min(3,marqueeContent.length);i++) str+=(i>0?' ':'')+marqueeContent[i];

    marqueeBox.childNodes[(marqueeBox.childNodes.length==1?0:1)].innerHTML=str;

    marqueeId=2;

    }

    function startMarquee() {

    var str='';

    for(var i=0;(i<3)&&(marqueeId+i<marqueeContent.length);i++) {

    str+=(i>0?' ':'')+marqueeContent[marqueeId+i];

    }

    marqueeId+=3;

    if(marqueeId>marqueeContent.length)marqueeId=0;

    if(marqueeBox.childNodes.length==1) {

    var nextLine=document.createElement('DIV');

    nextLine.innerHTML=str;

    marqueeBox.appendChild(nextLine);

    }

    else {

    marqueeBox.childNodes[0].innerHTML=str;

    marqueeBox.appendChild(marqueeBox.childNodes[0]);

    marqueeBox.scrollTop=0;

    }

    clearInterval(marqueeInterval[1]);

    marqueeInterval[1]=setInterval("scrollMarquee()",20);

    }

    function scrollMarquee() {

    marqueeBox.scrollTop++;

    if(marqueeBox.scrollTop%marqueeHeight==(marqueeHeight-1)){

    clearInterval(marqueeInterval[1]);

    }

    }

    initMarquee();

    </script>

    参考资料:http://www.blueidea.com/tech/program/2003/876.asp

    js 实现如何文字横向滚动

    用:<MARQUEE>滚动文字</MARQUEE>可以实现你要的效果,

    参数
    direction 表示滚动的方向,值可以是left,right,up,down,默认为left
    behavior 表示滚动的方式,值可以是scroll(连续滚动)slide(滑动一次)
    alternate(来回滚动) loop 表示循环的次数,值是正整数,默认为无限循环
    scrollamount 表示运动速度,值是正整数,默认为6
    scrolldelay 表示停顿时间,值是正整数,默认为0,单位是毫秒
    valign 表示元素的垂直对齐方式,值可以是top,middle,bottom,默认为middle
    align 表示元素的水平对齐方式,值可以是left,center,right,默认为left
    bgcolor 表示运动区域的背景色,值是16进制的RGB颜色,默认为白色
    height、width 表示运动区域的高度和宽度,值是正整数(单位是像素)或百分数,默认width=100% height为标签内元素的高度
    hspace、vspace 表示元素到区域边界的水平距离和垂直距离,值是正整数,单位是像素。 onmouseover=this.stop() onmouseout=this.start() 表示当鼠标移上区域的时候滚动停止,当鼠标移开的时候又继续滚动。

    js 实现如何文字横向滚动

    用:<MARQUEE>滚动文字</MARQUEE>可以实现你要的效果,

    参数
    direction 表示滚动的方向,值可以是left,right,up,down,默认为left
    behavior 表示滚动的方式,值可以是scroll(连续滚动)slide(滑动一次)
    alternate(来回滚动) loop 表示循环的次数,值是正整数,默认为无限循环
    scrollamount 表示运动速度,值是正整数,默认为6
    scrolldelay 表示停顿时间,值是正整数,默认为0,单位是毫秒
    valign 表示元素的垂直对齐方式,值可以是top,middle,bottom,默认为middle
    align 表示元素的水平对齐方式,值可以是left,center,right,默认为left
    bgcolor 表示运动区域的背景色,值是16进制的RGB颜色,默认为白色
    height、width 表示运动区域的高度和宽度,值是正整数(单位是像素)或百分数,默认width=100% height为标签内元素的高度
    hspace、vspace 表示元素到区域边界的水平距离和垂直距离,值是正整数,单位是像素。 onmouseover=this.stop() onmouseout=this.start() 表示当鼠标移上区域的时候滚动停止,当鼠标移开的时候又继续滚动。

    JS/JAVASCRIPT 选中文本框内的文字 让滚动条滚动到选中文字的位置

    function func(){
    var textarea = document.getElementById("textarea");
    //首先移动光标到所选文字位置,滚动条自动滚动
    MoveCursortoPos('textarea' , 30 );
    //再选中文字
    textarea.setSelectionRange(30,32);//选中文本框内的文字
    //textarea.scrollTop = textarea.scrollHeight;//滚动到底部

    //想要修改成只滚动到 选中文字 的位置应该怎么写?
    }
    //设置光标位置
    function MoveCursortoPos(id,pos){//定位光标到某个位置
    var obj = document.getElementById(id); //获得元素
    pos = pos ?pos :obj.value.length;
    if (obj.createTextRange) {//IE浏览器 IE浏览器中有TextRange 对body,textarea,button有效
    var range = obj.createTextRange(); //创建textRange
    range.moveStart("character", pos); //移动开始点,以字符为单位
    range.collapse(true);//没有移动结束点直接 折叠到一个点
    range.select();//选择这个点
    } else {//非IE浏览器
    obj.setSelectionRange(obj.value.length, pos);
    }
    obj.focus();
    }

    JS/JAVASCRIPT 选中文本框内的文字 让滚动条滚动到选中文字的位置

    function func(){
    var textarea = document.getElementById("textarea");
    //首先移动光标到所选文字位置,滚动条自动滚动
    MoveCursortoPos('textarea' , 30 );
    //再选中文字
    textarea.setSelectionRange(30,32);//选中文本框内的文字
    //textarea.scrollTop = textarea.scrollHeight;//滚动到底部

    //想要修改成只滚动到 选中文字 的位置应该怎么写?
    }
    //设置光标位置
    function MoveCursortoPos(id,pos){//定位光标到某个位置
    var obj = document.getElementById(id); //获得元素
    pos = pos ?pos :obj.value.length;
    if (obj.createTextRange) {//IE浏览器 IE浏览器中有TextRange 对body,textarea,button有效
    var range = obj.createTextRange(); //创建textRange
    range.moveStart("character", pos); //移动开始点,以字符为单位
    range.collapse(true);//没有移动结束点直接 折叠到一个点
    range.select();//选择这个点
    } else {//非IE浏览器
    obj.setSelectionRange(obj.value.length, pos);
    }
    obj.focus();
    }

    js文字由左向右无间断滚动效果

    <script type="text/javascript">

    var speed=30;

    demo2.innerHTML=demo1.innerHTML;

    function Marquee(){

    if(demo2.offsetWidth-demo.scrollLeft<=0)

    demo.scrollLeft-=demo1.offsetWidth;

    else{

    demo.scrollLeft++;

    }

    }

    var MyMar=setInterval(Marquee,speed);

    demo.onmouseover=function() {clearInterval(MyMar)}

    demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

    </script>

    demo的css一定要设定width和overflow:hidden

    <div id="demo">

    <table border="0" cellspacing="0" cellpadding="0">

    <tr>

    <td>

    <div id="demo1">

    <table width="1000" height="172" border="0" cellpadding="0" cellspacing="0">

    <tr>

    <td>

    文字放这里

    </td>

    </tr>

    </table>

    </div>

    </td>

    <td>

    <div id="demo2"></div>

    </td>

    </tr>

    </table>

    </div>

    原理demo2复制demo1然后连成一行,demo1滚动完滚动demo2因为内容一样所以看不出来,demo2滚动完滚动demo1

    js实现文字滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style type="text/css">
    <!--
    .Marquee{ height:60px; overflow:hidden;}
    .Marquee div{ border:1px solid #DDD3FE; background:#EEECF4; height:58px;}

    -->
    </style>
    </head>

    <body>
    <div id="Marquee" class="Marquee">
    <div style="width: 160px; height: 58px">间断-1-caiying2007</div>
    <div style="width: 160px; height: 58px">间断-2-caiying2007</div>
    <div style="width: 160px; height: 58px">间断-3-caiying2007</div>
    </div>
    <div id="Marquee1" class="Marquee">
    <div style="width: 160px; height: 58px">间断-1-caiying2007</div>
    <div style="width: 160px; height: 58px">间断-2-caiying2007</div>
    <div style="width: 160px; height: 58px">间断-3-caiying2007</div>
    </div>
    <script>
    function up(x){
    var Mar = document.getElementById(x);
    var child_div=Mar.getElementsByTagName("div")
    var picH = 60;//移动高度
    var scrollstep=3;//移动步幅,越大越快
    var scrolltime=20;//移动频度(毫秒)越大越慢
    var stoptime=3000;//间断时间(毫秒)
    var tmpH = 0;
    Mar.innerHTML += Mar.innerHTML;
    function start(){
    if(tmpH < picH){
    tmpH += scrollstep;
    if(tmpH > picH )tmpH = picH ;
    Mar.scrollTop = tmpH;
    setTimeout(start,scrolltime);
    }else{
    tmpH = 0;
    Mar.appendChild(child_div[0]);
    Mar.scrollTop = 0;
    setTimeout(start,stoptime);
    }
    }
    setTimeout(start,stoptime);
    }
    up("Marquee")
    up("Marquee1")
    </script>

    </body>
    </html>

    js实现文字滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style type="text/css">
    <!--
    .Marquee{ height:60px; overflow:hidden;}
    .Marquee div{ border:1px solid #DDD3FE; background:#EEECF4; height:58px;}

    -->
    </style>
    </head>

    <body>
    <div id="Marquee" class="Marquee">
    <div style="width: 160px; height: 58px">间断-1-caiying2007</div>
    <div style="width: 160px; height: 58px">间断-2-caiying2007</div>
    <div style="width: 160px; height: 58px">间断-3-caiying2007</div>
    </div>
    <div id="Marquee1" class="Marquee">
    <div style="width: 160px; height: 58px">间断-1-caiying2007</div>
    <div style="width: 160px; height: 58px">间断-2-caiying2007</div>
    <div style="width: 160px; height: 58px">间断-3-caiying2007</div>
    </div>
    <script>
    function up(x){
    var Mar = document.getElementById(x);
    var child_div=Mar.getElementsByTagName("div")
    var picH = 60;//移动高度
    var scrollstep=3;//移动步幅,越大越快
    var scrolltime=20;//移动频度(毫秒)越大越慢
    var stoptime=3000;//间断时间(毫秒)
    var tmpH = 0;
    Mar.innerHTML += Mar.innerHTML;
    function start(){
    if(tmpH < picH){
    tmpH += scrollstep;
    if(tmpH > picH )tmpH = picH ;
    Mar.scrollTop = tmpH;
    setTimeout(start,scrolltime);
    }else{
    tmpH = 0;
    Mar.appendChild(child_div[0]);
    Mar.scrollTop = 0;
    setTimeout(start,stoptime);
    }
    }
    setTimeout(start,stoptime);
    }
    up("Marquee")
    up("Marquee1")
    </script>

    </body>
    </html>

    javascript中如何处理焦点事件

    焦点作为javascript中的一个重要功能,基本上和页面交互都离不开焦点。但却少有人对焦点管理系统地做总结归纳。本文就javascript中的焦点管理作详细介绍

    1、焦点元素

    默认情况下,只有表单元素可以获得焦点。因为只有表单元素可以交互

    <input type="text" value="223">

    让非表单元素获得焦点也是有办法的,先将tabIndex属性设置为-1,再调用focus()方法

    <div id="test" style="height:30px;width:100px;background:lightgreen">div</div>
    <button id="btn">div元素获得焦点</button>
    <script>
    btn.onclick = function(){
        test.tabIndex = -1;
        test.focus();    
    }
    test.onfocus = function(){
        this.style.background = 'pink';
    }
    </script>

    2、activeElement

    document.activeElement属性用于管理DOM焦点,保存着当前获得焦点的元素

    注:该属性IE浏览器不支持

    <div id="test" style="height:30px;width:100px;background:lightgreen">div</div>
    <button id="btn">div元素获得焦点</button>
    <script>
    console.log(document.activeElement);//<body>
    btn.onclick = function(){
        console.log(document.activeElement);//<button>
        test.tabIndex = -1;
        test.focus();    
        console.log(document.activeElement);//<div>
    }
    </script>

    3、获得焦点

    元素获得焦点的方式有4种,包括页面加载、用户输入(按tab键)、focus()方法和autofocus属性

    【1】页面加载

    默认情况下,文档刚刚加载完成时,document.activeElement中保存的是body元素的引用。文档加载期间,document.activeElement的值为null

    【2】用户输入(按tab键)

    用户通常可以使用tab键移动焦点,使用空格键激活焦点。比如,如果焦点在一个链接上,此时按一下空格键,就会跳转到该链接

    说到tab键,就不能不提到tabindex属性。tabindex属性用来指定当前HTML元素节点是否被tab键遍历,以及遍历的优先级

    1、如果tabindex=-1,tab键跳过当前元素

    2、如果tabindex=0,表示tab键将遍历当前元素。如果一个元素没有设置tabindex,默认值就是0

    3、如果tabindex大于0,表示tab键优先遍历。值越大,就表示优先级越小

    【3】focus()

    focus()方法用于将浏览器的焦点设置到表单字段,即激活表单字段,使其可以响应键盘事件

    注:前面介绍过,若非表单元素,设置为tabIndex为-1,也可以获取焦点

    【4】autofocus

    HTML5表单字段新增了autofocus属性,只要设置这个属性,不用javascript就能自动把焦点移动到相应字段 

    [注意]该属性只能用于表单元素,普通元素即使设置tabIndex="-1"也不生效

    【5】hasFocus()

    document.hasFocus()方法返回一个布尔值,表示当前文档之中是否有元素被激活或获得焦点。通过检测文档是否获得了焦点,可以知道是不是正在与页面交互

    4、失去焦点

    如果使用javascript使元素失去焦点,那么就要使用blur()方法

    blur()方法的作用是从元素中移走焦点。在调用blur()方法时,并不会把焦点转移到某个特定的元素上;仅仅是将焦点从调用这个方法的元素上面移走而已

    5、焦点事件

    焦点事件会在页面获得或失去焦点时触发。利用这些事件并与document.hasFocus()方法及 document.activeElement属性配合,可以知晓用户在页面上的行踪

    【1】焦点事件共包括下面4个

    blur

    blur事件在元素失去焦点时触发。这个事件不会冒泡

    focus

    focus事件在元素获得焦点时触发。这个事件不会冒泡

    focusin

    focusin事件在元素获得焦点时触发。这个事件与focus事件等价,但它冒泡

    focusout

    focusour事件在元素失去焦点时触发。这个事件与blur事件等价,但它冒泡

    [注意] 关于focusin和focusout事件,除了IE浏览器支持DOM0级事件处理程序,其他浏览器都只支持DOM2级事件处理程序

    javascript中如何处理焦点事件

    焦点作为javascript中的一个重要功能,基本上和页面交互都离不开焦点。但却少有人对焦点管理系统地做总结归纳。本文就javascript中的焦点管理作详细介绍

    1、焦点元素

    默认情况下,只有表单元素可以获得焦点。因为只有表单元素可以交互

    <input type="text" value="223">

    让非表单元素获得焦点也是有办法的,先将tabIndex属性设置为-1,再调用focus()方法

    <div id="test" style="height:30px;width:100px;background:lightgreen">div</div>
    <button id="btn">div元素获得焦点</button>
    <script>
    btn.onclick = function(){
        test.tabIndex = -1;
        test.focus();    
    }
    test.onfocus = function(){
        this.style.background = 'pink';
    }
    </script>

    2、activeElement

    document.activeElement属性用于管理DOM焦点,保存着当前获得焦点的元素

    注:该属性IE浏览器不支持

    <div id="test" style="height:30px;width:100px;background:lightgreen">div</div>
    <button id="btn">div元素获得焦点</button>
    <script>
    console.log(document.activeElement);//<body>
    btn.onclick = function(){
        console.log(document.activeElement);//<button>
        test.tabIndex = -1;
        test.focus();    
        console.log(document.activeElement);//<div>
    }
    </script>

    3、获得焦点

    元素获得焦点的方式有4种,包括页面加载、用户输入(按tab键)、focus()方法和autofocus属性

    【1】页面加载

    默认情况下,文档刚刚加载完成时,document.activeElement中保存的是body元素的引用。文档加载期间,document.activeElement的值为null

    【2】用户输入(按tab键)

    用户通常可以使用tab键移动焦点,使用空格键激活焦点。比如,如果焦点在一个链接上,此时按一下空格键,就会跳转到该链接

    说到tab键,就不能不提到tabindex属性。tabindex属性用来指定当前HTML元素节点是否被tab键遍历,以及遍历的优先级

    1、如果tabindex=-1,tab键跳过当前元素

    2、如果tabindex=0,表示tab键将遍历当前元素。如果一个元素没有设置tabindex,默认值就是0

    3、如果tabindex大于0,表示tab键优先遍历。值越大,就表示优先级越小

    【3】focus()

    focus()方法用于将浏览器的焦点设置到表单字段,即激活表单字段,使其可以响应键盘事件

    注:前面介绍过,若非表单元素,设置为tabIndex为-1,也可以获取焦点

    【4】autofocus

    HTML5表单字段新增了autofocus属性,只要设置这个属性,不用javascript就能自动把焦点移动到相应字段 

    [注意]该属性只能用于表单元素,普通元素即使设置tabIndex="-1"也不生效

    【5】hasFocus()

    document.hasFocus()方法返回一个布尔值,表示当前文档之中是否有元素被激活或获得焦点。通过检测文档是否获得了焦点,可以知道是不是正在与页面交互

    4、失去焦点

    如果使用javascript使元素失去焦点,那么就要使用blur()方法

    blur()方法的作用是从元素中移走焦点。在调用blur()方法时,并不会把焦点转移到某个特定的元素上;仅仅是将焦点从调用这个方法的元素上面移走而已

    5、焦点事件

    焦点事件会在页面获得或失去焦点时触发。利用这些事件并与document.hasFocus()方法及 document.activeElement属性配合,可以知晓用户在页面上的行踪

    【1】焦点事件共包括下面4个

    blur

    blur事件在元素失去焦点时触发。这个事件不会冒泡

    focus

    focus事件在元素获得焦点时触发。这个事件不会冒泡

    focusin

    focusin事件在元素获得焦点时触发。这个事件与focus事件等价,但它冒泡

    focusout

    focusour事件在元素失去焦点时触发。这个事件与blur事件等价,但它冒泡

    [注意] 关于focusin和focusout事件,除了IE浏览器支持DOM0级事件处理程序,其他浏览器都只支持DOM2级事件处理程序

    js如何实现数字滚动效果

    jquery实现立体式数字滚动条增加效果,代码分为两部分,一部分位html结构另一部分属于js代码段,需要的朋友参考下吧!

    1、html结构
    <div class="numberRun1"></div>
    2、js
    <script type="text/javascript" src="js/digital_over.js" ></script>//引用 //这是自定义函数(需要在页面中进行调用) <script> //数字滚动 function digitalScroll(obj,n){ var numRun = $(obj).numberAnimate({num:n, speed:2000, symbol:","}); var nums = n; setInterval(function(){ numRun.resetData(nums); },3000); var numWidth= $(obj).width(); $(obj).find('.mt-number-animate').css('width',numWidth); $(obj).css('width','100%'); $(obj).find('.mt-number-animate').css('margin','0 auto'); } window.indexdigitalScroll=function(){ digitalScroll($('.numberRun1'),1160518); } </script> <!--这是在页面中调用的方法--> <script> $(function(){ indexdigitalScroll(); }); </script>
    3、图片案例

    js如何实现数字滚动效果

    jquery实现立体式数字滚动条增加效果,代码分为两部分,一部分位html结构另一部分属于js代码段,需要的朋友参考下吧!

    1、html结构
    <div class="numberRun1"></div>
    2、js
    <script type="text/javascript" src="js/digital_over.js" ></script>//引用 //这是自定义函数(需要在页面中进行调用) <script> //数字滚动 function digitalScroll(obj,n){ var numRun = $(obj).numberAnimate({num:n, speed:2000, symbol:","}); var nums = n; setInterval(function(){ numRun.resetData(nums); },3000); var numWidth= $(obj).width(); $(obj).find('.mt-number-animate').css('width',numWidth); $(obj).css('width','100%'); $(obj).find('.mt-number-animate').css('margin','0 auto'); } window.indexdigitalScroll=function(){ digitalScroll($('.numberRun1'),1160518); } </script> <!--这是在页面中调用的方法--> <script> $(function(){ indexdigitalScroll(); }); </script>
    3、图片案例

    站点网还为您提供以下相关内容希望对您有帮助:

    利用javascript实现文字滚动

    marqueesHeight=222;stopscroll=false;document.write('');preTop=0; currentTop=0;function init(){ with(marquees){ //这段移进来。//style.width=0; //注释掉这一句。style.height=marqueesHeight;style.over...

    用JavaScript实现上下文字滚动特效

    具体实现方法如下:[code]script language=JavaScriptvar messages=new Array()messages[0]="font color=#8000FF欢迎光临赛迪网电脑应用频道!/font/a"messages[1]="font color=#FB2500这里有织网梦工厂/font/a"messages[2...

    javascript 模拟Marquee文字向左均匀滚动代码

    可以实现匀速、无缝、加链接以及其它的修饰效果,本代码就是实现了这一功能,让文字从右至右平滑滚动,滚动宽度、高度、速度均可以设定。Js文字向左运动 var marqueewidth=350 var marqueeheight=22 var speed=5 var marquee...

    js如何实现数字滚动效果

    jquery实现立体式数字滚动条增加效果,代码分为两部分,一部分位html结构另一部分属于js代码段,需要的朋友参考下吧!1、html结构 2、js //引用 //这是自定义函数(需要在页面中进行调用) //数字滚动 functio...

    网页代码:求一个隔段时间可停顿的滚动字幕代码

    现在要介绍的是一种新型的滚动,利用JS的方法来做字幕的滚动:向上,在中间停顿一到两秒(就像经典的这种):将以下代码贴到您要显示的位置就可以了。以上已经将网站的这种滚动的做法做了一个大概的介绍。具体效果可以看:...

    HTML标签marquee实现多种滚动效果

    页面的自动滚动效果,可由javascript来实现,但是今天无意中发现了一个html标签 - marquee/marquee可以实现多种滚动效果,无需js控制。使用marquee标记不仅可以移动文字,也可以移动图片,表格等.语法:marquee.../marquee; 说明...

    js 实现如何文字横向滚动

    用:&lt;MARQUEE&gt;滚动文字&lt;/MARQUEE&gt;可以实现你要的效果,参数 direction 表示滚动的方向,值可以是left,right,up,down,默认为left behavior 表示滚动的方式,值可以是scroll(连续滚动)slide(滑动一次)alternate(来回滚动)...

    JS/JAVASCRIPT 选中文本框内的文字 让滚动条滚动到选中文字的位置_百 ...

    //首先移动光标到所选文字位置,滚动条自动滚动 MoveCursortoPos('textarea' , 30 );//再选中文字 textarea.setSelectionRange(30,32);//选中文本框内的文字 //textarea.scrollTop = textarea.scrollHeight;//滚动到...

    在DIV里怎么让文字实现上下滚动的效果

    1、首先打开电脑上的记事本。2、在记事本中写入如下代码:&lt;marquee onMouseOver=this.stop() onMouseOut=this.start() scrollamount=1 scrolldelay=7 direction=up width=270 height=77&gt;。3、上面的代码是实现每行文字,1、...

    javascript中使用ScrollText.js时,如何使滚动文字可以动态变化?_百度...

    你的意思就是让文字滚动吧,应该把你要滚动的div加在&lt;marquee direction="up" scrollamount="3" height="100" hspace="2"&gt;&lt;/marquee&gt;中 我把你代码中body中的内容修改一下: &lt;marquee direction="up" scrollamount...

    本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

    精彩推荐

    更多阅读

    Top