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=utf-8" />
<title>间断滚动_www.jb51.net_我们</title>
<style>
#Marquee{ height:60px; overflow:hidden;}
#Marquee div{ border:1px solid #DDD3FE; background:#EEECF4; height:58px;}
</style>
</head>
<body>
<div id="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>
var Mar = document.getElementById("Marquee");
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);
    }
}
onload=function(){setTimeout(start,stoptime)};
</script></body>
</html>

赞 (0)

相关推荐

  • js+div实现文字滚动和图片切换效果代码

    js+div实现文字滚动和图片切换效果代码

    本文实例讲述了js+div实现文字滚动和图片切换效果代码.分享给大家供大家参考.具体如下: 这里演示js+div文字滚动和图片切换代码,为了演示方便,去掉了图片调用,用数字代替了,用时候再加上就可以了,本效果实现了两种效果,Div切换,TAB切换,和文字滚动,鼠标移上后文字停止滚动,两种功能可任意剥离出来,这不影响代码使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-txt-pic-scroll-cha-style-codes

  • javascript跟随鼠标的文字带滚动效果

    比较简单常用的跟随鼠标文字滚动效果 跟随鼠标的文字带滚动效果 var scroller_msg='欢迎进入我的站点' var dismissafter=0 var initialvisible=0 if (document.all) document.write(''+scroller_msg+'') function followcursor(){ //move cursor function for IE if (initialvisible==0){ curscroll.style.vis

  • js 上下文字滚动效果

    js实现的文字向上滚动效果,适合文字公告等. test #textHeight{line-height:25px; height:25px; overflow:hidden; width:150px; font-size:12px; border:solid 1px #666;} function ScrollText(content){ this.Delay=10; this.Amount=1; this.Direction="up"; this.Timeout=1000; this

  • javascript 单行文字向上跑马灯滚动显示

    代码如下: =sh/2) o.style.marginTop=0; }else{ clearInterval(t); setTimeout(start,delay); } } setTimeout(start,delay); } // --> 我们 服务器常用软件 百度 浏览器 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • js实现的文字横向无间断滚动

    我一开始想到的标签是<marquee>,因为它可以实现横向滚动.经理说它的起始位置从最右边出来的,能不能将它改成从中间出来,或者从最左边出来也行.查了相关资料,才知道<marquee>无法指定起始位置.后来在网上找到一段代码,它是用图片来实现的,我将图片改成文字之后,顺利地实现了我所想要的功能.代码如下: #gongao{width:1000px;height:30px;overflow:hidden;line-height:30px;font-size:13px;font-fam

  • JS实现文字向下滚动完整实例

    本文实例讲述了JS实现文字向下滚动的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>京东.淘宝晒单</title> <style> @charset "

  • JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解

    JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解

    本文实例讲述了JavaScript实现的原生态兼容IE6可调可控滚动文字功能.分享给大家供大家参考,具体如下: 虽然HTML里面本身就有marquee标签,用来设置滚动文字(marquee标签在附录[HTML比较冷门标签与属性]里会有具体介绍)这个标签到了IE8就开始不支持,在IE6中可以设置的东西也很少,所以这东西还是用javascript来写为好.这个小组件也是比较常见的,但是网上的代码质量还是为了很多无关紧要的小特效而增加了许多无谓的代码.其实这东西,你只要弄得能自己向右向左滚,到了屏幕边

  • 浅析js 文字滚动效果

    这种效果在今后的web发展中是不是常用或者是否依然被设计师们所青睐,从技术层面看并不是最重要的,了解它的实现原理,对自身前端技术的提高,会有很大的帮助,世间万物,万变不离其宗,掌握了它的运行规律,你才不会被其花花外表所迷惑,甚至你可以在掌握其规律的前提下,运行相关技术,创造出新的效果来.下面看看它的实现过程: 1.html 复制代码 代码如下: <div class="box" id="marqueebox0"> <ul> <li st

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

    可以实现匀速.无缝.加链接以及其它的修饰效果,本代码就是实现了这一功能,让文字从右至右平滑滚动,滚动宽度.高度.速度均可以设定. Js文字向左运动 var marqueewidth=350 var marqueeheight=22 var speed=5 var marqueecontents='欢迎光临我们 网页特效栏目,精品特效全收罗!' if (document.all) document.write(''+marqueecontents+'') function regenerate()

  • JS实现单行文字不间断向上滚动的方法

    本文实例讲述了JS实现单行文字不间断向上滚动的方法.分享给大家供大家参考.具体分析如下: 前几天帮一个朋友写了一个单行文字不间断向上滚动的JS效果,现在分享给需要的weber.先看HTML和CSS代码: CSS: 复制代码 代码如下: .wrap{padding:10px;border:1px #ccc solid; width:500px;margin:20px auto;} .roll-wrap{height:130px;overflow:hidden;} 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> <title>这是一个动态Java

  • js实现文字滚动效果

    js实现文字滚动效果

    首先先看一下大致效果图,因为是动态的,在页面无法显示出来. 具体的实现代码如下: 1.首先是css代码: <style type="text/css"> body,ul,li,a,p,div{padding:0px; margin:0px; font-size:14px;} ul,li{list-style:none;} a{ text-decoration:none; color:#333;} #demo{ overflow:hidden; /*溢出的部分不显示*/ wi

随机推荐