快捷導(dǎo)航

JS實(shí)現(xiàn)的DIV塊來(lái)回滾動(dòng)效果示例

更新時(shí)間：2017年02月07日 11:44:33 作者：風(fēng)起從容

這篇文章主要介紹了JS實(shí)現(xiàn)的DIV塊來(lái)回滾動(dòng)效果,結(jié)合實(shí)例形式分析了JS通過(guò)時(shí)間函數(shù)定時(shí)觸發(fā)動(dòng)態(tài)改變頁(yè)面元素樣式的相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)的DIV塊來(lái)回滾動(dòng)效果。分享給大家供大家參考，具體如下：

<!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;//開(kāi)關(guān),true開(kāi),false關(guān)
    var xx=document.getElementById('xx');
    var xxleft = parseInt(xx.style.left);
    var speed = 20;
    var t=setInterval(rollRight,speed);
    //向左移動(dòng)
    function rollLeft(){
      if(p){
        xxleft--;
        xx.style.left = xxleft+'px';
        if(xxleft <=0 ){
          clearInterval(t);
          t=setInterval(rollRight,speed);
        }
      }
    }
    //向右移動(dòng)
    function rollRight(){
      if(p){
        xxleft++;
        xx.style.left = xxleft+'px';
        if(xxleft >= 300){
          clearInterval(t);
          t=setInterval(rollLeft,speed);
        }
      }
    }
  }
  ls();
</script>
</body>
</html>

運(yùn)行效果圖如下：

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

Taro集成Redux快速上手的方法示例
這篇文章主要介紹了Taro集成Redux快速上手的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-06-06
OpenLayers實(shí)現(xiàn)點(diǎn)要素圖層的聚合顯示的方法
在很多情況下，點(diǎn)要素圖層中的要素?cái)?shù)量可能會(huì)成百上千，如果一個(gè)點(diǎn)要素圖層中的點(diǎn)數(shù)量很多，我們就會(huì)采取圖層聚合的方式對(duì)其進(jìn)行處理，本文就來(lái)介紹一下，感興趣的可以了解一下
2021-09-09
JS刪除數(shù)組元素的函數(shù)介紹
有時(shí)候我們需要數(shù)組元素的值，那么就可以參考下面的方法，文中提到了不少這方面的資料，數(shù)組去重功能等
2013-03-03
JS匿名函數(shù)實(shí)例分析
這篇文章主要介紹了JS匿名函數(shù),結(jié)合實(shí)例形式分析了javascript匿名函數(shù)的定義、參數(shù)、返回值等相關(guān)使用方法,需要的朋友可以參考下
2016-11-11
JavaScript如何刪除對(duì)象的某個(gè)屬性詳析
這篇文章主要給大家介紹了關(guān)于JavaScript如何刪除對(duì)象的某個(gè)屬性的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-05-05
淺說(shuō)js變量
JavaScript 是弱類型, 變量可存儲(chǔ)任意類型, 并且運(yùn)行期間類型可變
2011-05-05
JavaScript和ActionScript的交互實(shí)現(xiàn)代碼
JavaScript和ActionScript的交互實(shí)現(xiàn)代碼，需要js與flash交互的朋友可以學(xué)習(xí)下。
2010-08-08
js結(jié)合正則實(shí)現(xiàn)國(guó)內(nèi)手機(jī)號(hào)段校驗(yàn)
這篇文章主要介紹了js結(jié)合正則實(shí)現(xiàn)國(guó)內(nèi)手機(jī)號(hào)段校驗(yàn)的方法以及使用js和jQuery實(shí)現(xiàn)的簡(jiǎn)單校驗(yàn)手機(jī)號(hào)的示例，非常簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。
2015-06-06
JS非空驗(yàn)證及郵箱驗(yàn)證的實(shí)例
下面小編就為大家?guī)?lái)一篇JS非空驗(yàn)證及郵箱驗(yàn)證的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
javascript表單驗(yàn)證使用示例(javascript驗(yàn)證郵箱)
JavaScript可用來(lái)在數(shù)據(jù)被送往服務(wù)器前對(duì)HTML表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證
2014-01-01