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 相关文章推荐
sliderToggle在写jquery的计时器setTimeouter中不生效
May 26 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
Aug 30 Javascript
jQuery中element选择器用法实例
Dec 29 Javascript
js实现同一页面多个运动效果的方法
Apr 10 Javascript
js自定义回调函数
Dec 13 Javascript
js 求时间差的实现代码
Apr 26 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
May 17 Javascript
jQuery表单验证插件解析(推荐)
Jul 21 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
Sep 23 Javascript
BootStrap daterangepicker 双日历控件
Jun 02 Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 Javascript
node.js中fs文件系统模块的使用方法实例详解
Feb 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
You might like
也谈截取首页新闻 - 范例
2006/10/09 PHP
php打印一个边长为N的实心和空心菱型的方法
2015/03/02 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
WordPress中用于创建以及获取侧边栏的PHP函数讲解
2015/12/29 PHP
在WordPress中实现发送http请求的相关函数解析
2015/12/29 PHP
PHP5.3连接Oracle客户端及PDO_OCI模块的安装方法
2016/05/13 PHP
js操作ajax返回的json的注意问题!
2010/02/23 Javascript
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
javascript重写alert方法的实例代码
2013/03/29 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
javascript实现五星评价代码(源码下载)
2015/08/11 Javascript
js实现div模拟模态对话框展现URL内容
2016/05/27 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
2016/08/02 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
详解vue-cli 脚手架项目-package.json
2017/07/04 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
2017/08/15 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
2019/01/17 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
JavaScript中数组去重的5种方法
2020/07/04 Javascript
python自然语言编码转换模块codecs介绍
2015/04/08 Python
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
Python中不同进制的语法及转换方法分析
2016/07/27 Python
Python编程实现双击更新所有已安装python模块的方法
2017/06/05 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
Python log模块logging记录打印用法解析
2020/01/20 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
HTML5 微格式和相关的属性名称
2010/02/10 HTML / CSS
“四风”问题整改措施和努力方向
2014/09/20 职场文书
先进个人推荐材料
2014/12/29 职场文书
项目验收申请报告
2015/05/15 职场文书
车间安全生产管理制度
2015/08/06 职场文书
队名及霸气口号大全
2015/12/25 职场文书
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫