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处理VBArray的函数使用说明
May 11 Javascript
Mootools 1.2 手风琴(Accordion)教程
Sep 15 Javascript
jQuery toggleClass应用实例(附效果图)
Apr 06 Javascript
浅谈javascript中的闭包
May 13 Javascript
学习JavaScript设计模式之单例模式
Jan 19 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
Dec 27 Javascript
vue.js的安装方法
May 12 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
Sep 20 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
Mar 08 Javascript
实例讲解Vue.js中router传参
Apr 22 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
Aug 16 Javascript
JS实现电商商品展示放大镜特效
Jan 07 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编程注意事项的小结
2013/04/27 PHP
微信小程序 消息推送php服务器验证实例详解
2017/03/30 PHP
PHP数据库操作四:mongodb用法分析
2017/08/16 PHP
PHP ADODB生成HTML表格函数rs2html功能【附错误处理函数用法】
2018/05/29 PHP
yii2 开发api接口时优雅的处理全局异常的方法
2019/05/14 PHP
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
JQuery实现表格中相同单元格合并示例代码
2013/06/26 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
详解vue父子组件间传值(props)
2017/06/29 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
2017/09/14 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
React Native日期时间选择组件的示例代码
2018/04/27 Javascript
Servlet返回的数据js解析2种方法
2019/12/12 Javascript
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
微信小程序实现列表的横向滑动方式
2020/07/15 Javascript
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
疯狂上涨的Python 开发者应从2.x还是3.x着手?
2017/11/16 Python
python3.6编写的单元测试示例
2019/08/17 Python
Python编写一个验证码图片数据标注GUI程序附源码
2019/12/09 Python
python 线性回归分析模型检验标准--拟合优度详解
2020/02/24 Python
CSS3 text shadow字体阴影效果
2016/01/08 HTML / CSS
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
Lands’ End官网:经典的美国生活方式品牌
2016/08/14 全球购物
东芝官网商城:还原日式美学,打造美好生活
2018/12/27 全球购物
犹他州最古老的体育用品公司:Al’s
2020/12/18 全球购物
个人简历的自荐信
2013/10/23 职场文书
国贸专业自荐信范文
2014/03/02 职场文书
决心书标准格式
2014/03/11 职场文书
期中考试复习计划
2015/01/19 职场文书
听证通知书
2015/04/24 职场文书
2016预备党员培训心得体会
2016/01/08 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python
python字符串的一些常见实用操作
2022/04/06 Python