<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          原生JS+CSS或HTML5實現簡單的進度條和滑動條效果

          時間:?2018-01-04閱讀:?1873標簽:?進度條

          前言

          我個人非常喜歡js+css的強大表現能力,這也是我喜歡前端開發的原因之一,后端通常都是在和數據打交道,很多東西都是抽象的數據結構,不直觀也不美觀,而前端著重于界面視圖的渲染以及各種各樣有意思的交互效果,其中像我們在客戶端中見到的安裝進度條效果以及滑塊拖動效果,使用js+css都能夠在頁面中進行模擬,并且方法也并不復雜.我這里進行了簡單的效果實現,記錄一下以作鞏固


          1.進度條效果實現

          效果展示:


           

          基本思想:

          這里主要使用了CSS3的animation動畫效果,將進度條設置為一個初始寬度為0,背景色為綠色,高度與容器相同的元素,通過animation對其寬度進行動畫過渡,以實現進度條填充的效果.

           

          以下為代碼實現,可以作為參考:

          html:

          <!--外層容器-->
          <div id="wrapper">
              <!--進度條容器-->
              <div id="progressbar">
                  <!--用來模仿進度條推進效果的進度條元素-->
                  <div id="fill"></div>
              </div>
          </div>

          css:

          #wrapper{
              position: relative;
              width:200px;
              height:100px;
              border:1px solid darkgray;
          }
          #progressbar{
              position: absolute;
              top:50%;
              left:50%;
              margin-left:-90px;
              margin-top:-10px;
              width:180px;
              height:20px;
              border:1px solid darkgray;
          
          }
          /*在進度條元素上調用動畫*/
          #fill{
              animation: move 2s;
              text-align: center;
              background-color: #6caf00;
          }
          /*實現元素寬度的過渡動畫效果*/
          @keyframes move {
              0%{
                  width:0;
          
              }
              100%{
                  width:100%;
              }
          }

          js:

          var progressbar={
              init:function(){
                  var fill=document.getElementById('fill');
                  var count=0;
              //通過間隔定時器實現百分比文字效果,通過計算CSS動畫持續時間進行間隔設置
                  var timer=setInterval(function(e){
                      count++;
                      fill.innerHTML=count+'%';
                      if(count===100) clearInterval(timer);
                  },17);
              }
          };
          progressbar.init();


          HTML5下的實現:

          強大的HTML5提供了一種新的標簽<progress>,只需要通過該標簽+簡單的js,即可以實現進度條滾動的效果。


          代碼如下:

          HTML

          <progress max="100" value="0" id="pg"></progress>

           這個標簽意義很明確,并且屬性只有以上兩個,max表示需要完成的任務量,value是目前完成的任務量。

          js

          var pg=document.getElementById('pg');
           setInterval(function(e){
                if(pg.value!=100) pg.value++;
                else pg.value=0;
          },100);

          以上的實現方式不僅更加的語義化,同時也極大的簡化了我們的代碼,并且靈活性更高,所以熟練使用HTML5是非常有必要的!

          不過HTML5標簽的瀏覽器兼容性也是我們需要考慮的一個問題,所以如果網頁需求的兼容性比較高的話,特別是對低版本IE有兼容需求的話,那么HTML5的標簽就不太適用了。以下為<progress>的瀏覽器支持情況。


           

          2.滑動條效果實現

          效果展示:


           

          基本思想:

          滑動條其實就是進度條的進階,進度條是自動填充整個容器,滑動條是實現可自己控制的填充效果.

          整個滑動條主要分為三個部分,即滑動條容器,滑塊,填充塊.

          在這里我主要實現了兩個功能:

          1.點擊滑動條的任意部分,自動調整滑塊位置并調整填充情況

          2.拖拽滑塊進行填充調整

          第一個功能的實現非常的簡單,首先將滑塊設置成絕對定位,然后只需要在滑動條區域內綁定click事件,然后讀取鼠標事件的offsetX屬性,確定鼠標位置相對于滑動條左側的距離,然后設置滑塊的left來調整滑塊位置以及填充塊的寬度.

          第二個功能的實現稍微復雜一點,因為要模擬一個拖拽的效果,這里使用到了三個鼠標事件mousedown,mousemove,mouseup.

          1.當我們按住滑塊時,觸發mousedown事件,在這個事件處理里面我們不需要做太多的事情,只需要修改一個狀態,將滑塊從不允許拖拽的狀態變成允許拖拽.

          2.然后觸發mousemove,讓滑塊和填充塊跟隨鼠標移動.

          3.當釋放鼠標時,觸發mouseup事件,將滑塊從允許拖拽的狀態變成不允許拖拽.

           

          以下為代碼實現,可以作為參考:

          html:

          <!--外層容器-->
          <div id="wrapper">
              <!--填充塊-->
              <div id="fill"></div>
              <!--滑塊-->
              <div id="slider"></div>
          </div>

          css:

          #wrapper{
              position: relative;
              width:200px;
              height:20px;
              border:1px solid darkgray;
          }
          /*將滑塊和填充塊設置成inline-block,保證他們在同一行內*/
          #slider{
              position: absolute;
              left:0;
              width:20px;
              height:20px;
              display: inline-block;
              background-color: #af58a8;
              cursor:pointer;
          }
          #fill{
              display: inline-block;
              width:0;
              height:20px;
              background: #6caf00;
          }

          js:

          var slider=(function(){
              init=function(){
                  var wrapper=document.getElementById('wrapper');
                  var slider=document.getElementById('slider');
                  var fill=document.getElementById('fill');
                  move(wrapper,slider,fill);
              };
              move=function(dom1,dom2,dom3){
              //drag用來存儲滑塊允許拖拽和不允許拖拽的狀態
                  var drag=0;
              //在滑動條上綁定click事件以實現點擊任意位置,自動調整滑塊和填充塊的效果
                  dom1.addEventListener('click',function (e) {
                      if(e.target===dom2){
                      //點擊滑塊自身不做任何事情                
                      }else{
                          if(e.offsetX>180) {
                              dom2.style.left='180px';
                              dom3.style.width='180px';
                          }else if(e.offsetX<20){
                              dom2.style.left='0px';
                              dom3.style.width='0px';
                          }else{
                              dom2.style.left=e.offsetX-10+'px';
                              dom3.style.width=e.offsetX-10+'px';
                          }
                      }
                  });
                  //修改drag的狀態        
                  dom2.addEventListener('mousedown',function(){
                      drag=1;
                  });
                  //釋放按鈕綁定在document上,保證在整個頁面容器里面任何地方松開按鈕都能修改drag的狀態        
                  document.addEventListener('mouseup',function(){
                      drag=0;
                  });
                  // 使滑塊和填充塊跟隨移動,這里使用的pageX,需要計算和視窗左側的距離而不是和滑動塊左側的距離       
                  dom1.addEventListener('mousemove',function(e){
                      if(drag==1){
                          if(e.pageX>189) {
                              dom2.style.left='180px';
                              dom3.style.width='180px';
                          }else if(e.pageX<29){
                              dom2.style.left='0px';
                              dom3.style.width='0px';
                          }else{
                              dom2.style.left=e.pageX-19+'px';
                              dom3.style.width=e.pageX-19+'px';
                          }
                      }
                  });
          
              };
              return {
                  init:init
              }
          })();
          slider.init();

           

          HTML5下的實現:

          既然進度條在HTML5下有了專門的標簽,那么滑動條呢?經過查詢發現,雖然沒有設置滑動條的標簽,但是HTML5在input的type屬性中新增了一個值range,正是我們需要的滑動條。可見input并不局限于提供輸入框,它能夠實現的控件非常的豐富,有很多控件都是可以在input中找到的。

          該控件效果如下:


           

          代碼如下:

          html

          <input type="range" name="points" min="1" max="10" />

          甚至都不需要JS來控制,只需要一行html代碼,即可實現完整的滑動條效果。


          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/312

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网