亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

javascript拖拽應(yīng)用實(shí)例

 更新時(shí)間：2016年03月25日 14:12:43   作者：凌云之翼  
這篇文章主要為大家詳細(xì)介紹了javascript拖拽應(yīng)用實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

之前文章中也講了一下拖拽的基本思想，理論是有了，那實(shí)踐呢，可以運(yùn)用到什么地方呢？下面就給大家?guī)?lái)一個(gè)用拖拽思想寫(xiě)的一個(gè)小實(shí)例，供大家參考，大致效果看下圖：

就是這樣一個(gè)簡(jiǎn)單的一個(gè)拖拽條，你可以把它理解為滾動(dòng)條，也可以理解為表單中的數(shù)量選擇控件，也可以理解為進(jìn)度條，等等，反正你可以改成很多你想要的效果，廢話(huà)不多說(shuō)，我們來(lái)看看這個(gè)是怎么做的吧！

想了想，感覺(jué)原理就不用說(shuō)了吧，我在拖拽效果中就已經(jīng)說(shuō)的很清楚了，不清楚的同學(xué)可以出門(mén)左轉(zhuǎn)，查看 javascript小實(shí)例，PC網(wǎng)頁(yè)里的拖拽 ，我就直接貼代碼了：

css：

<style>
#drag_wrap{
  width:220px;
  height:10px;
  position:relative;
  margin:100px auto;
}
.dis_bg{
  width:200px;
  height:10px;
  border-radius:10px;
  background:#ccc;
  margin-left:10px;
}
#drag_bg{
  width:0;
  height:10px;
  border-radius:10px;
  background:#0CF;
}
#drag_box{
  width:20px;
  height:20px;
  border-radius:10px;
  background:#F30;
  position:absolute;
  top:-5px;
  left:0;
  cursor:move;
}
#drag_box span{
  width:40px;
  height:20px;
  text-align:center;
  line-height:20px;
  border:1px solid #ccc;
  position:absolute;
  top:-25px;
  left:-10px;
  color:#333;
  background:#fff;
}
#drag_wrap1{
  width:10px;
  height:220px;
  position:relative;
  margin:100px auto;
}
.dis_bg1{
  width:10px;
  height:200px;
  border-radius:10px;
  background:#ccc;
  position:absolute;
  top:10px;
}
#drag_bg1{
  width:10px;
  height:0;
  border-radius:10px;
  background:#0CF;
}
#drag_bg1{
  width:10px;
  height:0;
  border-radius:10px;
  background:#0CF;
}
#drag_box1{
  width:20px;
  height:20px;
  border-radius:10px;
  background:#F30;
  position:absolute;
  top:-5px;
  left:-5px;
  cursor:move;
}
#drag_box1 span{
  width:40px;
  height:20px;
  text-align:center;
  line-height:20px;
  border:1px solid #ccc;
  position:absolute;
  top:0;
  left:25px;
  color:#333;
  background:#fff;
}
</style>

html：

<div id="drag_wrap">
    <div class="dis_bg">
      <div id="drag_bg"></div>
    </div>
    <div id="drag_box"><span>0</span></div>
     
  </div>
  <div id="drag_wrap1">
    <div class="dis_bg1">
      <div id="drag_bg1"></div>
    </div>
    <div id="drag_box1"><span>0</span></div>
  </div>

JavaScript：

window.onload = function(){
 
    drag("drag_box","drag_wrap","drag_bg","left");
    drag("drag_box1","drag_wrap1","drag_bg1","top");
     
    function drag(obj,parentNode,bgObj,attr,endFn){
      var obj = document.getElementById(obj);
      var parentNode = document.getElementById(parentNode);
      var bgObj = document.getElementById(bgObj);
      var oNum = obj.getElementsByTagName('span')[0];
      obj.onmousedown = function(ev){
        var ev = ev || event;
         
        //非標(biāo)準(zhǔn)設(shè)置全局捕獲(IE)
        if(obj.setCapture){
          obj.setCapture()  
        };
 
        var disX = ev.clientX - this.offsetLeft,
          disY = ev.clientY - this.offsetTop;
        var oWidth = obj.offsetWidth,
          oHeight = obj.offsetHeight;
        var pWidth = parentNode.offsetWidth,
          pHeight = parentNode.offsetHeight;     
        document.onmousemove = function(ev){
          var ev = ev || event;
          if(attr == "left"){ //橫向
            var left = ev.clientX - disX;
            //左側(cè)
            if(left <= 0){
              left = 0;
            }else if(left > pWidth - oWidth){//右側(cè)
              left = pWidth - oWidth;
            };
            obj.style.left = bgObj.style.width = left + 'px';
            oNum.innerHTML = left;
             
          }else if(attr == "top"){ //豎向
            var top = ev.clientY - disY;
             //上面
            if(top <= 0){
              top = 0;
            }else if(top > pHeight - oHeight){//下面
              top = pHeight - oHeight;
            };
            obj.style.top = bgObj.style.height = top + 'px';
            oNum.innerHTML = top;
          };
           
        };
        document.onmouseup = function(ev){
          var ev = ev || event;
          document.onmousemove = document.onmouseup = null;
          endFn && endFn();
          //非標(biāo)準(zhǔn)釋放全局捕獲(IE)
          if(obj.releaseCapture){
            obj.releaseCapture()  
          };
 
        };
        return false;
      }; 
    } 
   
  }

參數(shù)說(shuō)明：

這里給了5個(gè)參數(shù)，obj,parentNode,bgObj,attr,endFn，分別是：

obj：被拖拽對(duì)象

parentNode：限制被拖拽對(duì)象活動(dòng)區(qū)域的對(duì)象，一般設(shè)為它的父級(jí)

bgObj：拖動(dòng)時(shí)的表色背景對(duì)象

attr：2個(gè)參數(shù)left，top，表示是橫向拖拽還是縱向拖拽

endFn：返回函數(shù)，有就執(zhí)行，沒(méi)有就不執(zhí)行，非必填

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

相關(guān)文章

  • 基于JavaScript制作一個(gè)骰子游戲

    基于JavaScript制作一個(gè)骰子游戲

    這節(jié)實(shí)驗(yàn)我們將使用?HTML、CSS?和?JavaScript?構(gòu)建一個(gè)骰子游戲。設(shè)置兩名玩家(一個(gè)人玩也行)然后擲骰子，獲得更高點(diǎn)數(shù)的玩家將贏得游戲，感興趣的可以了解一下
    2022-04-04
  • Node.js和PHP根據(jù)ip獲取地理位置的方法

    Node.js和PHP根據(jù)ip獲取地理位置的方法

    這篇文章主要介紹了Node.js和PHP根據(jù)ip獲取地理位置的方法,通過(guò)新浪接口根據(jù)IP地址獲取所在城市,需要的朋友可以參考下
    2014-03-03
  • js實(shí)現(xiàn)web調(diào)用攝像頭 js截取視頻畫(huà)面

    js實(shí)現(xiàn)web調(diào)用攝像頭 js截取視頻畫(huà)面

    這篇文章主要為大家詳細(xì)介紹了JS web調(diào)用攝像頭，截取視頻畫(huà)面，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2019-04-04
  • 數(shù)組Array的一些方法(總結(jié))

    數(shù)組Array的一些方法(總結(jié))

    下面小編就為大家?guī)?lái)一篇數(shù)組Array的一些方法(總結(jié))。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-02-02
  • JavaScript實(shí)現(xiàn)tab欄切換效果

    JavaScript實(shí)現(xiàn)tab欄切換效果

    這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)tab欄切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2020-03-03
  • 移動(dòng)端吸頂fixbar的解決方案詳解

    移動(dòng)端吸頂fixbar的解決方案詳解

    這篇文章主要介紹了移動(dòng)端吸頂fixbar的解決方案詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2019-07-07
  • js導(dǎo)出excel文件的簡(jiǎn)潔方法(推薦)

    js導(dǎo)出excel文件的簡(jiǎn)潔方法(推薦)

    下面小編就為帶來(lái)一篇js導(dǎo)出excel文件的簡(jiǎn)潔方法(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-11-11
  • layui之select的option疊加問(wèn)題的解決方法

    layui之select的option疊加問(wèn)題的解決方法

    下面小編就為大家分享一篇layui之select的option疊加問(wèn)題的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-03-03
  • JS原型鏈怎么理解

    JS原型鏈怎么理解

    本文重點(diǎn)給大家介紹javascript中的原型鏈知識(shí)，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起看下吧
    2016-06-06
  • JavaScript中檢測(cè)數(shù)據(jù)類(lèi)型的四種方法

    JavaScript中檢測(cè)數(shù)據(jù)類(lèi)型的四種方法

    這篇文章主要給大家分享的是JavaScript中檢測(cè)數(shù)據(jù)類(lèi)型的四種方法，有 typeof、instanceof、constructor、Object.prototype.toString.call()，下面文章詳細(xì)介紹內(nèi)容，需要的小伙伴可以參考一下
    2022-01-01

最新評(píng)論