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 相关文章推荐
前端开发必须知道的JS之原型和继承
Jul 06 Javascript
Javascript之旅 对象的原型链之由来
Aug 25 Javascript
json的前台操作和后台操作实现代码
Jan 20 Javascript
js中数组Array的一些常用方法总结
Aug 12 Javascript
node.js中的path.basename方法使用说明
Dec 09 Javascript
谈一谈jQuery核心架构设计
Mar 28 Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 Javascript
微信小程序用户自定义模版用法实例分析
Nov 28 Javascript
简单理解Vue中的nextTick方法
Jan 30 Javascript
AngularJS 监听变量变化的实现方法
Oct 09 Javascript
JavaScript中引用vs复制示例详析
Dec 06 Javascript
java和js实现的洗牌小程序
Sep 30 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 字符串加密函数(在指定时间内加密还原字符串,超时无法还原)
2010/04/28 PHP
PHP XML操作的各种方法解析(比较详细)
2010/06/17 PHP
PHP读取大文件的几种方法介绍
2016/10/27 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
关于javascript 回调函数中变量作用域的讨论
2009/09/11 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
初学js插入节点appendChild insertBefore使用方法
2011/07/04 Javascript
关于JavaScript中的关联数组分析
2013/04/09 Javascript
JQuery 图片滚动轮播示例代码
2014/03/24 Javascript
javascript实现的元素拖动函数宿主为浏览器
2014/07/21 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
详解AngularJS中自定义过滤器
2015/12/28 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
2016/03/05 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
2016/05/26 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
Vue.js基础知识小结
2017/01/13 Javascript
谈谈Vue.js——vue-resource全攻略
2017/01/16 Javascript
360doc网站不登录就无法复制内容的解决方法
2018/01/27 Javascript
深入浅出理解JavaScript高级定时器原理与用法
2018/08/02 Javascript
React 无状态组件(Stateless Component) 与高阶组件
2018/08/14 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
2018/10/25 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
React传值 组件传值 之间的关系详解
2019/08/26 Javascript
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
[51:17]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
Python实现的从右到左字符串替换方法示例
2018/07/06 Python
在Python中表示一个对象的方法
2019/06/25 Python
Python tkinter实现简单加法计算器代码实例
2020/05/13 Python
澳大利亚快时尚鞋类市场:Billini
2018/05/20 全球购物
List, Set, Map是否继承自Collection接口?
2016/05/16 面试题
爱情保证书范文
2014/02/01 职场文书
教师岗位职责
2015/02/03 职场文书
2015年公务员工作总结
2015/04/24 职场文书
消夏晚会主持词
2015/06/30 职场文书
推广普通话主题班会
2015/08/17 职场文书
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python