java语言

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

时间:2023-03-24 17:10:55 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块来回滚动效果】相关文章:

如何使用javascript实现瀑布流及效果加载12-09

JavaScript简单实现放大镜效果代码12-09

JavaScript如何实现JSON.stringify12-09

网页设计技巧:视差滚动效果11-17

如何检查JavaScript变量的类型11-30

CSS如何实现中英文双语菜单效果代码12-04

教你如何在Dreamweaver移动或对齐AP Div11-09

css实现的tab切换效果实例03-29

如何实现硬盘对拷10-28

JavaScript的应用03-30