java语言 百分网手机站

如何实现JavaScript的DIV块来回滚动效果

时间:2020-10-23 10:59:29 java语言 我要投稿

如何实现JavaScript的DIV块来回滚动效果

  导语:如何实现JavaScript的DIV块来回滚动效果呢?下面是小编给大家提供的代码实现过程,大家可以参考阅读,更多详情请关注应届毕业生考试网。

  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  <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=document.getElementById('xx');

  var xxleft = parseInt(xx.style.left);

  var speed = 20;

  var t=setInterval(rollRight,speed);

  //向左移动

  function rollLeft(){

  if(p){

  xxleft--;

  xx.style.left = xxleft+'px';

  if(xxleft <=0 ){

  clearInterval(t);

  t=setInterval(rollRight,speed);

  }

  }

  }

  //向右移动

  function rollRight(){

  if(p){

  xxleft++;

  xx.style.left = xxleft+'px';

  if(xxleft >= 300){

  clearInterval(t);

  t=setInterval(rollLeft,speed);

  }

  }

  }

  }

  ls();

  </script>

  </body>

  </html>

【如何实现JavaScript的DIV块来回滚动效果】相关文章:

1.教你如何在Dreamweaver移动或对齐AP Div

2.java实现gif动画效果代码参考

3.php如何实现快速排序

4.如何用PHP实现找回密码

5.php如何实现验证码

6.如何实现C语言画图教程

7.WindowsXP模块如何实现系统恢复

8.Java中如何实现显示动态的时间

9.PHP弱类型变量是如何实现的