當前位置:才華齋>計算機>java語言>

如何實現JavaScript的DIV塊來回滾動效果

java語言 閱讀(6.23K)

導語:如何實現JavaScript的DIV塊來回滾動效果呢?下面是小編給大家提供的程式碼實現過程,大家可以參考閱讀,更多詳情請關注應屆畢業生考試網。

如何實現JavaScript的DIV塊來回滾動效果

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

</head>

<body>

<p id="xx" style=" position:relative;left:100px;width:100px;height:50px;border: solid 1px red;">指令碼之家</p>

<script type="text/javascript">

function ls(){

var p=true;//開關,true開,false關

var xx=lementById('xx');

var xxleft = parseInt();

var speed = 20;

var t=setInterval(rollRight,speed);

//向左移動

function rollLeft(){

if(p){

xxleft--;

= xxleft+'px';

if(xxleft <=0 ){

clearInterval(t);

t=setInterval(rollRight,speed);

}

}

}

//向右移動

function rollRight(){

if(p){

xxleft++;

= xxleft+'px';

if(xxleft >= 300){

clearInterval(t);

t=setInterval(rollLeft,speed);

}

}

}

}

ls();

</script>

</body>

</html>