<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>间断滚动</title>
<style>
#Marquee{ height:20px; overflow:hidden;}
#Marquee div{ border:1px solid #DDD3FE; background:#EEECF4; height:18px;}
</style>
</head>
<body>
<div id="Marquee">
<div style="width: 260px; height: 18px">
xxxxxxxxxx
</div>

<div style="width: 260px; height: 18px">

yyyyyyyyyy
</div>

</div>
<script>
var Mar = document.getElementById("Marquee");
var child_div=Mar.getElementsByTagName("div")
var picH = 20;//移动高度
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>

javascript 单行向上滚动文字的更多相关文章

  1. 文字列表无缝向上滚动JavaScript代码

    <!DOCTYPE html> <html> <head> <meta charset=utf-> <title>文字列表无缝向上滚动Jav ...

  2. jquery插件之文字间歇自动向上滚动

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的文字间歇向上滚动特效,当鼠标移动到文字上时,向上滚动会停 ...

  3. jquery插件之文字无缝向上滚动

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的无缝向上滚动特效,当鼠标移动到文字上时,向上滚动会停止, ...

  4. jquery 文字向上滚动+CSS伪类before和after的应用

    汇总常用技巧——CSS伪类before和after的应用 先上效果图,建议遵循有图有真相的原则,可以上图的地方,还望不要嫌麻烦,毕竟有图的话 可以让读者少花些时间! <!DOCTYPE html ...

  5. JavaScript判断鼠标滑轮是向下还是向上滚动

    我们常用的就是鼠标,鼠标中键一般都用于滑动网页,但是网页中很多很炫的效果,使用鼠标滑轮操作更好. 当然对于手机就没有这个设备了,所以就不用考虑手机端的实现方法,手机端有触摸滑动事件. 使用JavaSc ...

  6. js文字向上滚动代码

    js文字向上滚动代码 <style>.pczt_pingfen_jhxs_news1{ width:397px;  background:#edfafd; padding-top:2px; ...

  7. android - TextView单行显示...或者文字左右滚动(走马灯效果)

    条件 TextView单行显示,文字左右滚动(走马灯效果)实现条件: 实现单行设置固定宽度或者设置权重都行 代码 TextView滚动必须写下面几个属性 android:singleLine=&quo ...

  8. 原生js实现文字无缝向上滚动效果

    在网上查找到了一个实现文字无缝向上滚动效果的源码,结果发现运行有问题,于是就稍加改动,实现了js无缝向上滚动的效果. <script> window.onload = roll(50); ...

  9. vue文字间歇无缝向上滚动

    公司的管理系统中有"文字间歇无缝向上滚动"的需求,现在这种需求基本在项目开发中已经消失了,没什么新颖的,但架不住公司高层喜欢这种玩意儿,所以,作为开发人员,即使你有一百个不乐意,谁 ...

随机推荐

  1. sqlplus 连接数据库报错SP2-0642: SQL*Plus internal error state 2130, context 0:0:0

    sqlplus 连接数据库报错SP2-0642: SQL*Plus internal error state 2130, context 0:0:0 问题描述: 使用sqlplus客户端登录数据库,报 ...

  2. UIImage的使用

    UIImage是IOS中层级比较高的一个用来加载和绘制图像的一个类,更底层的类还有CGImage,以及IOS5.0以后新增加的CIImage.今天我们主要聊一聊UIImage的三个属性: imageO ...

  3. 【转】解决Cannot change version of project facet Dynamic web module to 2.5

    http://blog.csdn.net/steveguoshao/article/details/38414145 我们用Eclipse创建Maven结构的web项目的时候选择了Artifact I ...

  4. powershell创建并加载配置文件

    $pshome :powershell的主目录 $profile :显示 Windows PowerShell 配置文件的路径 test-path $profile :确定是否已经在系统上创建了 Wi ...

  5. C学习笔记之预处理指令

          一.什么是预处理指令            预处理指令是告诉编译器在编译之前预先处理的一些指令,有宏定义,文件包括,条件编译. 预处理指令一般以 # 号开头,能够出如今文件的不论什么地方, ...

  6. css 常见兼容性问题及解决方案

    css 兼容问题一直是困扰前端开发人员的大难题,提到兼容性立马想到了万恶的ie6,说多了都是泪,还是整理一些常见的兼容性问题以及解决的方案吧. 一. 浮动元素双边距. ①条件:ie6下,如果给元素设置 ...

  7. insert into ... on duplicate key update 与 replace 区别

    on duplicate key update:针对主健与唯一健,当插入值中的主健值与表中的主健值,若相同的主健值,就更新on duplicate key update 后面的指定的字段值,若没有相同 ...

  8. 特殊的forward_list操作

    为了理解forward_list为什么有特殊版本的添加和删除操作,考虑当我们从一个单向链表中删除一个元素时会发生什么.当添加或删除一个元素时,删除或添加的元素之前的那个元素的后继会发生变化.为了添加或 ...

  9. linux shell read command-Getting User Input Via Keyboard--ref

    ref:http://bash.cyberciti.biz/guide/Getting_User_Input_Via_Keyboard You can accept input from the ke ...

  10. 嵌入式Linux-GNU Make 使用手册（中译版）

    GNU Make 使用手册(中译版) 翻译:于凤昌 译者注:本人在阅读Linux源代码过程中发现如果要全面了解Linux的结构.理解Linux的编程总体设计及思想必须首先全部读通Linux源代码中各级 ...