Shulou(Shulou.com)06/01 Report--

This article "the front-end implementation of sliding button AJAX and the back-end interaction code how to write," most people do not understand, so the editor summed up the following content, detailed, clear steps, with a certain reference value, I hope you can get something after reading this article, let's take a look at this "front-end implementation of sliding button AJAX and back-end interaction code how to write" article.

Html code css code. Switch-box {width: 48px;} .switch-box .switch {/ * Hidden checkbox default style * / display: none;}. Switch-box label {/ * expand the click hotspot through label * / position: relative; display: block; margin: 1px; height: 28px; cursor: pointer }. Switch-box label::before {/ * before setting before scrolling the ball * / content:'; position: absolute; top: 50%; left: 50%; margin-top:-13px; margin-left:-14px; width: 26px; height: 26px; border-radius: 100%; background-color: # fff; box-shadow: 1px 1px 1px 1px rgba (0,0,0,0.06) / * the transition of elements is controlled by transform and transition attributes to form css3 animation * /-webkit-transform: translateX (- 9px);-moz-transform: translateX (- 9px); transform: translateX (- 9px);-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease; transition: all 0.3s ease } .switch-box .switch: checked~label::before {/ * semantics: pseudo-class elements in the label element after the selected class name "switch" element, change the css style * / / * to form a pseudo-class structure selector: ":" colons plus Boolean values "checked" / / * "Ele1 ~ Ele2" the role of the wave sign in css: connected elements must have the same parent element Select the Ele2 that appears after the Ele1 (but does not have to follow the Ele1, that is, it can be tied) * /-webkit-transform: translateX (10px) -moz-transform: translateX (10px); transform: translateX (10px);} .switch-box label::after {/ * after sets scrolling front background color * / content: ""; display: block; border-radius: 30px; height: 28px; background-color: # dcdfe6;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease; transition: all 0.3s ease } .switch-box .switch: checked~label::after {background-color: # 13ce66;} effect picture

The effect is as shown in the figure:

JS event trigger

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.