java 变换滚动文字_JS实现简单的文字无缝上下滚动功能示例

本文实例讲述了JS实现简单的文字无缝上下滚动功能。分享给大家供大家参考，具体如下：

文字列表无缝滚动代码

margin:0px;

padding:0px;

border:0px;

}

body{font-size:12px}

#demo{

overflow:hidden;

height:80px;

width:280px;

margin:90px auto;

position:relative;

}

#demo1{

height:auto;

text-align:left;

}

#demo2{

height:auto;

text-align:left;

}

#demo1 li{

list-style-type:none;

height:22px;

text-align:left;

text-indent:15px;

}

#demo2 li{

list-style-type:none;

height:22px;

text-align:left;

text-indent:15px;

}

var speed=40

// 向上滚动

var demo=document.getElementById("demo");

var demo2=document.getElementById("demo2");

var demo1=document.getElementById("demo1");

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo.scrollTop>=demo1.offsetHeight){

demo.scrollTop=0;

}

else{

demo.scrollTop=demo.scrollTop+1;

}

var MyMar=setInterval(Marquee,speed)

demo.οnmοuseοver=function(){clearInterval(MyMar)}

demo.οnmοuseοut=function(){MyMar=setInterval(Marquee,speed)}

//向下滚动

// demo2.innerHTML=demo1.innerHTML

// demo.scrollTop=demo.scrollHeight

// function Marquee2(){

// if(demo1.offsetTop-demo.scrollTop>=0)

// demo.scrollTop+=demo2.offsetHeight

// else{

// demo.scrollTop--

// }

// var MyMar2=setInterval(Marquee2,speed)

// demo.οnmοuseοver=function() {clearInterval(MyMar2)}

// demo.οnmοuseοut=function() {MyMar2=setInterval(Marquee2,speed)}

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

java 变换滚动文字_JS实现简单的文字无缝上下滚动功能示例相关推荐

Java英汉翻译程序_java实现简单的英文文本单词翻译器功能示例
本文实例讲述了java实现简单的英文文本单词翻译器功能.分享给大家供大家参考,具体如下: 直接上代码: package fanyi; import java.io.bufferedreader; im ...
java编写翻译字典数据库_java实现简单的英文文本单词翻译器功能示例
本文实例讲述了java实现简单的英文文本单词翻译器功能.分享给大家供大家参考,具体如下: 直接上代码: package fanyi; import java.io.BufferedReader; im ...
java实现单词_java实现简单的英文文本单词翻译器功能示例
导读热词本文实例讲述了java实现简单的英文文本单词翻译器功能.分享给大家供大家参考,具体如下: 直接上代码: package fanyi; import java.io.BufferedReade ...
简单的jQuery无缝向上滚动效果
简介这是一个基于 jQuery 的简单的向上滚动效果插件,代码很少,功能也比较单一,可用于文字或图片滚动,鼠标移动到上面会暂停滚动.功能虽然单一,不过一般情况下也够用了,而且还很小巧. 兼容兼容所 ...
中奖人js滚动效果_js使用transition效果实现无缝滚动
作者:李大雷出自:SegmentFault 思否原文:segmentfault.com/a/1190000023945464 前言无缝轮播一直是面试的热门题目,而大部分答案都是复制第一张到最后. ...
java获取excle表格对象_Java使用excel工具类导出对象功能示例
本文实例讲述了Java使用excel工具类导出对象功能.分享给大家供大家参考,具体如下: package com.gcloud.common; import org.apache.poi.ss.use ...
java实现文件加密与解密_Java实现文件的加密解密功能示例
本文实例讲述了Java实现文件的加密解密功能分享给大家供大家参考,具体如下: package com.copy.encrypt; import java.io.File; import java.io ...
java正则找出数字_Java使用正则表达式实现找出数字功能示例
本文实例讲述了Java使用正则表达式实现找出数字功能.分享给大家供大家参考,具体如下: 1.问题: String str = "fjd789klsd908434jk#$$%%^3848854 ...
java显示多个地区时钟_Java实现的动态数字时钟功能示例【显示世界时间】
本文实例讲述了java实现的动态数字时钟功能.分享给大家供大家参考,具体如下: 构建: 1. clock继承 jframe 为运行页面 2. clocktext 测试类创建 clock 对象运行效 ...

java 变换滚动文字_JS实现简单的文字无缝上下滚动功能示例

java 变换滚动文字_JS实现简单的文字无缝上下滚动功能示例相关推荐

最新文章

热门文章