编程 Javascript

JS实现的DIV块来回滚动效果示例

Posted in Javascript onFebruary 07, 2017

本文实例讲述了JS实现的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>
<div id="xx" style=" position:relative;left:100px;width:100px;height:50px;border: solid 1px red;">三水点靠木</div>
<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>

运行效果图如下：

JS实现的DIV块来回滚动效果示例

希望本文所述对大家JavaScript程序设计有所帮助。

JS实现的DIV块来回滚动效果示例

- Author -

风起从容

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery ajax cache缓存问题

Jul 01 Javascript

Linux下使用jq友好的打印JSON技巧分享

Nov 18 Javascript

JavaScript中的parse()方法使用简介

Jun 12 Javascript

jQuery实现横向带缓冲的水平运动效果(附demo源码下载)

Jan 29 Javascript

超详细的JS弹出窗口代码大全

Apr 18 Javascript

AngularJS中$watch和$timeout的使用示例

Sep 20 Javascript

scroll事件实现监控滚动条并分页显示(zepto.js)

Dec 18 Javascript

JavaScript 数组去重并统计重复元素出现的次数实例

Dec 14 Javascript

vue项目中实现的微信分享功能示例

Jan 21 Javascript

layui对工具条进行选择性的显示方法

Sep 19 Javascript

nuxt静态部署打包相对路径操作

Nov 06 Javascript

vue项目中js-cookie的使用存储token操作

Nov 13 Javascript

javascript验证香港身份证的格式或真实性

Feb 07 #Javascript

JS实现JSON.stringify的实例代码讲解

Feb 07 #Javascript

jQuery简单获取DIV和A标签元素位置的方法

Feb 07 #Javascript

JS日程管理插件FullCalendar简单实例

Feb 07 #Javascript

纯js三维数组实现三级联动效果

Feb 07 #Javascript

在点击div中的p时，如何阻止事件冒泡

Feb 07 #Javascript

bootstrap vue.js实现tab效果

Feb 07 #Javascript