js 如何实现文字内容上下移动

JavaScript017

js 如何实现文字内容上下移动,第1张

用document.getElementById(div1)获取到该div，然后操作它就行了，如果是文本上下移动完全可以使用marquee标签。

引用JS：

www.cyin.cn/js/front/supermarquee.js

HTML代码：

<div class="zuixinxuqiu" style="height: 197pxwidth: 678pxoverflow: hiddenposition: relative">

<ul>

<dl class="clearfix">

<dt class="coladdress">

成都市</dt>

</dl>

<dl class="clearfix">

<dt class="coladdress">

成都市</dt>

</dl>

<dl class="clearfix">

<dt class="coladdress">

成都市</dt>

</dl>

<dl class="clearfix">

<dt class="coladdress">

成都市</dt>

</dl>

<dl class="clearfix">

<dt class="coladdress">

成都市</dt>

</dl>

</ul>

</div>

执行JS：

$(".zuixinxuqiu").kxbdSuperMarquee({

isEqual: false,

distance: 33,

time: 5,

direction: 'up'

})

<!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>