js 实现如何文字横向滚动

JavaScript022

js 实现如何文字横向滚动,第1张

用：<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() 表示当鼠标移上区域的时候滚动停止，当鼠标移开的时候又继续滚动。

<!DOCTYPE HTML>

<html>

<head>

<meta charset=UTF-8 />

<title>Nothing</title>

<style type="text/css">

</style>

<script>

var create = function (x, y, text)

    {

    var marquee = document.createElement ('marquee')

    marquee.style.position = 'absolute'

    marquee.style.left = x + 'px'

    marquee.style.top = y + 'px'

    marquee.innerText = text

    document.body.appendChild (marquee)

    }

    

    window.onload = function ()

    {

    create (100, 100, "Look boddy, U got work harder and put yourself to the JavaScript, once U learn the heart of the JavaScript, I can guarantee U win.")

    }

</script>

</head>

<body>

</body>

</html>

<!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/htmlcharset=gb2312" />

<title>无标题文档</title>

<style type="text/css">

<!--

.Marquee{ height:60pxoverflow:hidden}

.Marquee div{ border:1px solid #DDD3FEbackground:#EEECF4height:58px}

-->

</style>

</head>

<body>

<div id="Marquee" class="Marquee">

<div style="width: 160pxheight: 58px">间断-1-caiying2007</div>

<div style="width: 160pxheight: 58px">间断-2-caiying2007</div>

<div style="width: 160pxheight: 58px">间断-3-caiying2007</div>

</div>

<div id="Marquee1" class="Marquee">

<div style="width: 160pxheight: 58px">间断-1-caiying2007</div>

<div style="width: 160pxheight: 58px">间断-2-caiying2007</div>

<div style="width: 160pxheight: 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>