Beispielcode-Sharing zur Verwendung von CSS3+JS zum Zeichnen verschiedener Schaltflächen

Ich denke, es gibt drei Schritte zum Zeichnen einer Schaltfläche

• Der erste Schritt besteht darin, den Umriss der Schaltfläche zu zeichnen

• Wählen Sie das richtige HTML-Tag aus und legen Sie die CSS-Umrisslinie fest -1 .jpg

Der zweite Schritt besteht darin, den Standardstatus der Schaltfläche zu zeichnen

/* html代码 */
<a href="#" class="button off"></a>
body{
    background-color: #E6C9B6;
}

/* CSS样式 */
/* 按钮轮廓 */
.button{
    display: block;
    margin:100px auto;
    position: relative;
    width:100px;
    height:40px;
    border-radius: 50px;
    border:1px solid #fff;
    background-color: #E9E4E0;
}

Dieser Schritt ist sehr wichtig, weil wir gibt kein HTML mehr aus. Die Datei fügt andere Tags hinzu, daher müssen wir die :after-Pseudoklasse verwenden, um die Schaltfläche mit CSS zu rendern

Tatsächlich werden Sie nach diesem Schritt feststellen, dass die Der Effekt auf den Browser ändert sich überhaupt nicht, oder es ist derselbe wie zuvor, aber keine Sorge, es wird offensichtlich, wenn wir etwas hinzufügen

• Fügen Sie eine kleine Schaltfläche hinzu der Umriss

Die Standardeinstellung ist deaktiviert

• /* 接在上面继续写 */
  .button:after{
     display: block;
     position: absolute;    //相对按钮的轮廓进行决定定位
     top:2px;
     bottom: 2px;        //即设置top,又设置bottom使元素自动拉伸到最大
     left:2px;           //实际上，按钮的宽度即为容器的高度-(top+bottom)
     width:36px;           //按钮的宽度
     line-height: 36px;    //按钮文字的高度，如果不需要文字，可移除
     text-align: center;
     text-transform: uppercase;
     font-size: 16px;
     background-color: #fff;      //这里的背景颜色是按钮的背景颜色
     border:2px solid;
     transition: all 500ms;        //按钮的动画时长
  }

• Imitate IOS-2.jpg

  .off:after {
     content: 'off';
     border-radius:30px;
     color: #999;
  }

Imitate IOS-3.jpg

Der letzte Schritt besteht darin, JS-Code zum Wechseln zu schreiben

- 再接着绘制要切换的状态

Tatsächlich ist toggleClass beim CSS-Wechsel am bequemsten.

.on:after {
          content: 'ON';
          border-radius:30px;
          transform: translate(56px, 0);   
          color:transparent;
          background-color:#4BD429;
        }

Aber! ! !

Diese Umschaltmethode kann das JS-Ereignis, das Sie auslösen möchten, nicht wechseln. Schließlich zeichnen wir Schaltflächen, um bestimmte Funktionen auszuführen.
Also habe ich diese Methode übernommen, aber sie ist möglicherweise nicht die beste

An diesem Punkt wird ein vollständiger Schalterknopf gezeichnet

Vielen Dank, dass Sie 3 bis 5 Minuten damit verbracht haben, mein unprofessionelles Tutorial zu lesen

• PS: Gestern war ich unterwegs Um einen Knopf zu zeichnen, um den Glühbirnenschalter zu steuern (tatsächlich das Hintergrundbild umzuschalten), sah ich mich dann um und sah einen Bullenschalter an der Wand. Da er das Licht steuert, wollte ich mit der Simulation spielen Die Schläfrigkeit am Mittag, ich habe es wirklich widerwillig gezeichnet

  
  
  
  
  

  var zn=0;
  $('.button').click(function(e){
    if(zn==1){
        $(this).removeClass("on").addClass("off");
        //此处可填要触发的事件
        zn=0;
    }else{
        $(this).removeClass("off").addClass("on");
         //此处可填要触发的事件
        zn=1;
    }
  });

  Simulation switch.jpg

  
  

Simulation-2.jpg

  绘制过程并不复杂，我也就不细说了，贴下效果图和代码，感兴趣的可以自行看一下

Das obige ist der detaillierte Inhalt vonBeispielcode-Sharing zur Verwendung von CSS3+JS zum Zeichnen verschiedener Schaltflächen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!