脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS DIV块来回滚动

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

 更新时间：2017年02月07日 11:44:33   作者：风起从容  
这篇文章主要介绍了JS实现的DIV块来回滚动效果,结合实例形式分析了JS通过时间函数定时触发动态改变页面元素样式的相关操作技巧,需要的朋友可以参考下

本文实例讲述了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>

运行效果图如下：

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript运动效果与技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

您可能感兴趣的文章:

相关文章

  • Taro集成Redux快速上手的方法示例

    Taro集成Redux快速上手的方法示例

    这篇文章主要介绍了Taro集成Redux快速上手的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • OpenLayers实现点要素图层的聚合显示的方法

    OpenLayers实现点要素图层的聚合显示的方法

    在很多情况下，点要素图层中的要素数量可能会成百上千，如果一个点要素图层中的点数量很多，我们就会采取图层聚合的方式对其进行处理，本文就来介绍一下，感兴趣的可以了解一下
    2021-09-09
  • JS删除数组元素的函数介绍

    JS删除数组元素的函数介绍

    有时候我们需要数组元素的值，那么就可以参考下面的方法，文中提到了不少这方面的资料，数组去重功能等
    2013-03-03
  • JS匿名函数实例分析

    JS匿名函数实例分析

    这篇文章主要介绍了JS匿名函数,结合实例形式分析了javascript匿名函数的定义、参数、返回值等相关使用方法,需要的朋友可以参考下
    2016-11-11
  • JavaScript如何删除对象的某个属性详析

    JavaScript如何删除对象的某个属性详析

    这篇文章主要给大家介绍了关于JavaScript如何删除对象的某个属性的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • 浅说js变量

    浅说js变量

    JavaScript 是弱类型, 变量可存储任意类型, 并且运行期间类型可变
    2011-05-05
  • JavaScript和ActionScript的交互实现代码

    JavaScript和ActionScript的交互实现代码

    JavaScript和ActionScript的交互实现代码，需要js与flash交互的朋友可以学习下。
    2010-08-08
  • js结合正则实现国内手机号段校验

    js结合正则实现国内手机号段校验

    这篇文章主要介绍了js结合正则实现国内手机号段校验的方法以及使用js和jQuery实现的简单校验手机号的示例，非常简单实用，有需要的小伙伴可以参考下。
    2015-06-06
  • JS非空验证及邮箱验证的实例

    JS非空验证及邮箱验证的实例

    下面小编就为大家带来一篇JS非空验证及邮箱验证的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • javascript表单验证使用示例(javascript验证邮箱)

    javascript表单验证使用示例(javascript验证邮箱)

    JavaScript可用来在数据被送往服务器前对HTML表单中的这些输入数据进行验证
    2014-01-01

最新评论