CFXIXI工作室首页
CF西西的博客 | Html5制作活动按钮

Html5制作活动按钮

10. 六月 2013

转自:http://bbs.cfxixi.com/showtopic-862.aspx

效果1:


点击后效果:



附代码:

  1. <style>
  2.         .box{
  3.                 width: 65px;
  4.                 padding-top: 11px;
  5.                 -webkit-box-flex: auto;
  6.         }
  7.         .bool[val="yes"] {
  8.            /* background-color: #367FDE;*/
  9.                 background-color: #CFCFCF;
  10.         }
  11.         .bool[val="no"] {
  12.                 background-color: #CFCFCF;
  13.                 /*background-color: #367FDE;*/
  14.         }
  15.         .bool {
  16.                 display: block;
  17.                 width: 56px;
  18.                 height: 23px;
  19.                 padding: 1px 0 0 1px;
  20.                 background-color: #367FDE;
  21.                 background-image: url(./icon_yn.png);
  22.                 background-size: 50px 23px;
  23.                 border-radius: 3px;
  24.                 box-shadow: 0 0 3px rgba(0, 0, 0, 0.2) inset;
  25.         }
  26.         .bool[val="yes"] strong {
  27.                 margin-left: 31px;
  28.         }
  29.         .bool[val="no"] strong {
  30.                 margin-left: 0;
  31.         }
  32.         .bool strong {
  33.                 width: 23px;
  34.                 height: 21px;
  35.                 display: block;
  36.                 border-radius: 2px;
  37.                 /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #E6E6E6));*/
  38.                 background: rgba(0, 0, 0, 0.1);
  39.                 -webkit-transition: all .1s linear;
  40.                 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  41.         }
  42. </style>
  43. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  44. <script>
  45.                 
  46.                 $(function(){
  47.                         var ios6_ = (/iphone\sos\s(6|7|8)/gi).test(navigator.appVersion);
  48.                         $(".bool").on("click", function(e){
  49.                                 var item=$(this);
  50.                                 var _this = $(e.currentTarget);
  51.                                 console.log(_this);
  52.                                 if( _this.attr("val") == "yes" ) {
  53.                                         _this.attr("val", "no");
  54.                                         if (ios6_) {
  55.                                          _this.find("strong").css({"margin": "0", "-webkit-transform": "translate3d(0, 0, 0)"});
  56.                                          }
  57.                                         //globalParams [item.attr('xname')]='no';
  58.                                 } else {
  59.                                         _this.attr("val", "yes");
  60.                                         if (ios6_) {
  61.                                                 _this.find("strong").css({"margin": "0", "-webkit-transform": "translate3d(31px, 0, 0)"});
  62.                                         }
  63.                                         //globalParams [item.attr('xname')]='yes';
  64.                                 }
  65.                                 //localStorage["config"]=JSON.stringify(globalParams);
  66.                         });
  67.                 })
  68.                 
  69. </script>
  70. </head>
  71. <body>
  72.         <div class="box">
  73.                 <span class="bool" xname="MolecularWeight" val="yes">
  74.                         <strong></strong>
  75.                 </span>
  76.         </div>
  77. </body>
复制代码

Demo下载:

html5活动按钮.rar (4.02 K, 下载次数:0)

Html5