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程序设计有所帮助。

Javascript 相关文章推荐
jQuery实现可收缩展开的级联菜单实例代码
Nov 27 Javascript
详解JavaScript中循环控制语句的用法
Jun 03 Javascript
浅析Node.js的Stream模块中的Readable对象
Jul 29 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
Oct 20 Javascript
探究JavaScript函数式编程的乐趣
Dec 14 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 Javascript
javascript-解决mongoose数据查询的异步操作
Dec 22 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
May 05 Javascript
element-ui 上传图片后清空图片显示的实例
Sep 04 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
Mar 20 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
You might like
php 在字符串指定位置插入新字符的简单实现
2016/06/28 PHP
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
2009/05/25 Javascript
javascript Object与Function使用
2010/01/11 Javascript
jQuery getJSON 处理json数据的代码
2010/07/26 Javascript
EasyUI中的tree用法介绍
2011/11/01 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
js弹出确认是否删除对话框
2014/03/27 Javascript
TypeScript 中接口详解
2015/06/19 Javascript
jquery利用拖拽方式在图片上添加热链接
2015/11/24 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
基于JavaScript实现TAB标签效果
2016/01/12 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
2016/01/30 Javascript
JS关闭窗口时产生的事件及用法示例
2016/08/20 Javascript
javascript简单进制转换实现方法
2016/11/24 Javascript
浅析BootStrap中Modal(模态框)使用心得
2016/12/24 Javascript
JavaScript实现星级评分
2017/01/12 Javascript
Vue.use源码分析
2017/04/22 Javascript
js读取本地文件的实例
2017/12/22 Javascript
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
详解jquery和vue对比
2019/04/16 jQuery
vue.js实现二级菜单效果
2019/10/19 Javascript
vue输入节流,避免实时请求接口的实例代码
2019/10/30 Javascript
js实现图片实时时钟
2020/01/15 Javascript
js实现简单的秒表
2020/01/16 Javascript
解决vue的router组件component在import时不能使用变量问题
2020/07/26 Javascript
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
Django admin.py 在修改/添加表单界面显示额外字段的方法
2019/08/22 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
Python+OpenCV图像处理——图像二值化的实现
2020/10/24 Python
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
建筑实习自我鉴定
2013/10/18 职场文书
自愿解除劳动合同协议书
2014/09/11 职场文书
出纳年终工作总结2014
2014/12/05 职场文书
2016年暑期见闻作文
2015/11/25 职场文书
nginx配置限速限流基于内置模块
2022/05/02 Servers