jquery插件實(shí)現(xiàn)儀表盤(pán)

更新時(shí)間：2021年04月26日 10:11:12 作者：阿飛超努力

這篇文章主要為大家詳細(xì)介紹了jquery插件實(shí)現(xiàn)儀表盤(pán)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

jquery插件實(shí)現(xiàn)儀表盤(pán)，供大家參考，具體內(nèi)容如下

做了個(gè)簡(jiǎn)易的儀表盤(pán)，就是很常見(jiàn)的那種碼表，實(shí)現(xiàn)沒(méi)啥困難，就是需要算一點(diǎn)點(diǎn)位置

實(shí)現(xiàn)效果

代碼部分

*{
 margin: 0;
 padding: 0;
}
.rel{
 display: flex;
 justify-content:center;
 align-items:center;
 position: relative;
}
.bp{
 border-radius:50% ;
 border: 1px solid lightgray;
 position:relative;
 display: flex;
 justify-content: center;
 align-items: center;
 transform: rotate(-45deg);
}
.kd{
 position:absolute;
 width: 100%;
 font-size: 12px;
}
.point{
 background-color:lightgray;
 height: 100px;
 width: 20px;
 border-radius:100%;
 transform: rotate(90deg);
 transform-origin:10px 0px;
 z-index: 9;
 position: absolute;
 transition: all 0.5s;
}
.kb{
 position: absolute;
 bottom: 20px;
 font-size: 24px;
 color: gray;
 transition: all 0.5s;
}

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>做個(gè)儀表盤(pán)</title>
  <script src="js/jquery-3.4.1.min.js"></script>
  <script src="js/zgybp.js"></script>
  <link href="css/zgybp.css" rel="stylesheet" type="text/css" />
  <style>
   #div{
    border: 1px solid lightgray;
    width: 90%;
    height: 400px;
    margin: 20px auto;
   }
  </style>
 </head>
 <body>
  <div id="div"></div>
 </body>
</html>
<script>
 var temp = zgybp("div");
 setInterval(function(){
  var f = Math.floor(Math.random()*101);
  temp.load(f);
 },700)
</script>

var zgybp = function(id){
 var $id = $("#"+id);
 $id.addClass("rel");
 var a = $id.width()>$id.height()?$id.height():$id.width();
 $bp = $("<div class='bp'></div>");
 $bp.appendTo($id);
 $bp.css({
  "width":a,
  "height":a
 })
 //繪制刻度，只繪制3/4 270/100=2.7，每一個(gè)刻度都是2.7
 for(var i =100;i>=0;i--){
  $kd = $("<div class='kd'><span class='txt'>-</span></div>");
  if(i%5==0){
   $kd.find('.txt').text(i)
  }
  $kd.appendTo($bp);
  $kd.css("transform","rotate("+(i*2.7)+"deg)");
 }
 $point = $("<div class='point'></div>")
 $point.appendTo($bp)
 $point.css({
  "left":a/2,
  "top":a/2
 })
 $kb = $("<div class='kb'>0</div>");
 $kb.appendTo($id)
 //然后將表盤(pán)轉(zhuǎn)1/8的角度，就差不多了
 return{
  $id:$id,
  $bp:$bp,
  $point:$point,
  $kb:$kb,
  load:function(f){
   var that = this;
   f  = f<0?0:f>100?100:f;
   var temp = parseInt(f)*2.7;
   that.$point.css({
    "transform":"rotate("+(90+temp)+"deg)"
   })
   that.draw(f);
  },
  draw:function(f){
   var that =this;
   that.$kb.text(f);
  }
 }
}

實(shí)現(xiàn)思路

嗯，看到車(chē)上的碼表就想到要實(shí)現(xiàn)一下這個(gè)儀表盤(pán)
這個(gè)就分為三步，先話表盤(pán)，當(dāng)然是只畫(huà)3/4，然后就是畫(huà)指針并且得定位正確的位置，最后就是根據(jù)輸入的參數(shù)把指針旋轉(zhuǎn)對(duì)應(yīng)的位置就行了
這里面我都挑最簡(jiǎn)單的方法實(shí)現(xiàn)了，比如表盤(pán)這些啥的，我想全部畫(huà)上文字，不過(guò)太擠了就變成五個(gè)畫(huà)一個(gè)中間刻度，接著就是指針我是直接畫(huà)的div變形的，這里定位我直接用它自己與父容器的flex居中配合的地方，因此這里面有個(gè)不好解釋的地方就是將指針從中心點(diǎn)挪到下方或者其他偏離中心點(diǎn)的位置上，想要讓指針對(duì)準(zhǔn)正確的刻度，接著算偏轉(zhuǎn)距離的時(shí)候就要多一個(gè)換算的步驟了，我記得這里面有個(gè)啥函數(shù)來(lái)著，不過(guò)不記得了，所以就沒(méi)有為了美觀把指針挪下來(lái)了。
這里還是記下筆記我之前的transform-origin這個(gè)屬性，這個(gè)屬性真的很重要的，像是這種畫(huà)指針的地方我感覺(jué)很有用
transform-origin: x-axis y-axis z-axis;

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

您可能感興趣的文章: