1.练习1：焦点图切换

   html:

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
  7.     <title>第七章上机练习一</title>
  8.     <link rel="stylesheet" href="css/train1.css"/>
  9.     <script>
  10.         /*直接设置样式*/
  11.         document.getElementsByTagName("html")[0].style.fontSize=window.screen.width/10+"px";
  12.     </script>
  13. </head>
  14. <body>
  15. <section id="picWrap">
  16.     <div id="picList">
  17.         <img src="data:image/img1.jpg" />
  18.         <img src="data:image/img2.jpg" />
  19.         <img src="data:image/img3.jpg" />
  20.         <img src="data:image/img4.jpg" />
  21.     </div>
  22. </section>
  23. <p id="picBtns">
  24.     <span class="active"></span>
  25.     <span></span>
  26.     <span></span>
  27.     <span></span>
  28. </p>
  29. <script>
  30.     document.addEventListener('touchmove',function(e) {
  31.         e.preventDefault();
  32.     },false);
  33.  
  34.     window.onload=function()
  35.     {
  36.         var oPicList=document.getElementById("picList");
  37.         var aBtns=document.getElementById("picBtns").children;
  38.         var iScroll=0;
  39.         var iStartX=0;
  40.         var iStartPageX=0;
  41.         var iNow=0;
  42.         oPicList.addEventListener('touchstart',function(ev)
  43.         {
  44.             iStartPageX=ev.changedTouches[0].pageX;
  45.             iStartX=iScroll;
  46.             oPicList.style.WebkitTransition=oPicList.style.MozTransition=oPicList.style.transition="none";
  47.         },false);
  48.  
  49.         oPicList.addEventListener('touchmove',function(ev)
  50.         {
  51.             var iDis=ev.changedTouches[0].pageX-iStartPageX;
  52.             iScroll=iStartX+iDis;
  53.             setStyle();
  54.         },false);
  55.  
  56.         oPicList.addEventListener('touchend',function(ev)
  57.         {
  58.             var iDis=ev.changedTouches[0].pageX-iStartPageX;
  59.             var iNub=Math.round(iDis/window.screen.width);
  60.             iNow-=iNub;
  61.             if(iNow<0)
  62.             {
  63.                 iNow=0;
  64.             }
  65.             if(iNow>=aBtns.length)
  66.             {
  67.                 iNow=aBtns.length-1;
  68.             }
  69.             iScroll=-iNow*window.screen.width;
  70.             oPicList.style.WebkitTransition=oPicList.style.MozTransition=oPicList.style.transition=".5s";
  71.             for(var i=0;i<aBtns.length;i++)
  72.             {
  73.                 aBtns[i].className="";
  74.             }
  75.             aBtns[iNow].className="active";
  76.             setStyle();
  77.         },false);
  78.         function setStyle()
  79.         {
  80.             oPicList.style.WebkitTransform=oPicList.style.MozTransform=oPicList.style.transform="translateX("+iScroll+"px)";
  81.         }
  82.     };
  83. </script>
  84. </body>
  85. </html>
  1. CSS：
  1. @charset "UTF-8";
  2. body{background:#f3f2f3;margin:0; font-size:0.5rem;}
  3. #picWrap{width:100%; overflow:hidden;}
  4. #picList{width:40rem;overflow:hidden;}
  5. #picList img{width:10rem;float:left;}
  6. #picBtns{height:0.3rem;padding:0.2rem 0;margin:0; text-align:center;}
  7. #picBtns span{width:0.3rem;height:0.3rem;margin:0 0.1rem; border:1px solid #000; display:inline-block; box-sizing:border-box; border-radius:0.15rem; vertical-align:top;}
  8. #picBtns .active{background:#f60;}
  1. 效果：
    可实现滑动切换图片

2.练习2：开启宝箱，zepto.min.js下载点击

html

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
  6.     <link rel="stylesheet" href="css/train2.css">
  7.     <title>开启宝箱</title>
  8. </head>
  9. <body ontouchstart="" class="open-body">
  10. <div class="wrapper">
  11.     <div class="bg rotate"></div>
  12.     <div class="open-has ">
  13.         <h3 class="title-close"><span class="user">开心小窝</span>给你发了一个宝箱</h3>
  14.         <h3 class="title-open">恭喜你，谢良潘</br>成功领取<span class="user">开心小窝</span>发的全民打飞机大战冠军宝箱</h3>
  15.  
  16.         <div class="mod-chest">
  17.  
  18.             <div class="chest-close show ">
  19.                 <div class="gift"></div>
  20.                 <div class="tips">
  21.                     <i class="arrow"></i>
  22.                 </div>
  23.             </div>
  24.             <div class="chest-open ">
  25.                 <div class="mod-chest-cont open-cont">
  26.                     <div class="content">
  27.                         <div class="gift">
  28.                             <div class="icon"><img src="data:image/chest-icon-zuan.png"></div> x 500
  29.                         </div>
  30.                         <div class="func">
  31.                             <button class="chest-btn">查看详情并提取</button>
  32.                         </div>
  33.                     </div>
  34.                 </div>
  35.             </div>
  36.  
  37.         </div>
  38.     </div>
  39. </div>
  40. <script type="text/javascript" src="js/zepto.min.js"></script>
  41. <script type="text/javascript">
  42.     $(".chest-close").click(function(){
  43.         $(this).addClass("shake");
  44.         var that=this;
  45.         this.addEventListener("webkitAnimationEnd", function(){
  46.             $(that).closest(".open-has").addClass("opened");
  47.             setTimeout(function(){
  48.                 $(that).removeClass("show");
  49.                 $(that).closest(".mod-chest").find(".chest-open").addClass("show");
  50.             },200)
  51.         }, false);
  52.     })
  53.     $(".chest-btn").click(function(){
  54.         window.location.reload();//重复
  55.     })
  56. </script>
  57. </body>
  58. </html>

css

  1. /*button*/
  2. body {
  3.     background: #FFF4D2;
  4.     background-size: 320px auto;
  5. }
  6.  
  7. select {
  8.     -webkit-appearance: none;
  9.     -webkit-padding-end: 20px;
  10.     -webkit-padding-start: 6px;
  11.     background: url(../image/select-arrow.png) no-repeat #fff right 0px;
  12.     background-size: 34px auto;
  13.     border: #cfba8a 1px solid;
  14.     box-sizing: border-box;
  15.     width: 100%;
  16.     height: 33px;
  17.     outline: none;
  18.     font-size: 12px;
  19.     color: #9e702f;
  20.     padding: 0px 8px;
  21. }
  22.  
  23. input[type="text"] {
  24.     -webkit-appearance: none;
  25.     border: #cfba8a 1px solid;
  26.     border: #cfba8a 1px solid;
  27.     box-sizing: border-box;
  28.     width: 100%;
  29.     height: 33px;
  30.     outline: none;
  31.     font-size: 12px;
  32.     color: #9e702f;
  33.     padding: 0px 8px;
  34. }
  35.  
  36. .c-orange {
  37.     color: #ff5400;
  38. }
  39.  
  40. .c-red {
  41.     color: #cd0000;
  42. }
  43.  
  44. .c-gray {
  45.     color: rgba(134, 85, 0, .7);
  46. }
  47.  
  48. .chest-btn {
  49.     width: 100%;
  50.     display: block;
  51.     color: #fff;
  52.     background-image: -webkit-gradient(linear, left top, left bottom, from(#ffa200), to(#ffa200));
  53.     height: 44px;
  54.     line-height: 44px;
  55.     border-radius: 3px;
  56.     font-size: 17px;
  57. }
  58.  
  59. .chest-btn:active {
  60.     background-image: -webkit-gradient(linear, left top, left bottom, from(#f09902), to(#f09902));
  61. }
  62.  
  63. .btn-weak {
  64.     background: #ff9600;
  65. }
  66.  
  67. .btn-weak:active {
  68.     background: #ec8c03;
  69. }
  70.  
  71. .wrapper .ui-border-top {
  72.     border-top: 1px solid #eccf88
  73. }
  74.  
  75. .wrapper .ui-border-btm {
  76.     border-bottom: 1px solid #eccf88
  77. }
  78.  
  79. .wrapper .ui-border-tb {
  80.     border-top: #eccf88 1px solid;
  81.     border-bottom: #eccf88 1px solid;
  82.     background-image: none
  83. }
  84.  
  85. @media screen and (-webkit-min-device-pixel-ratio: 2) {
  86.     .wrapper .ui-border-top {
  87.         border-top: 0
  88.     }
  89.  
  90.     .wrapper .ui-border-btm {
  91.         border-bottom: 0
  92.     }
  93.  
  94.     .wrapper .ui-border-top {
  95.         background-position: left top;
  96.         background-image: -webkit-gradient(linear, left bottom, left top, color-stop(.5, rgba(0, 0, 0, 0)), color-stop(.5, #eccf88), to(#eccf88))
  97.     }
  98.  
  99.     .wrapper .ui-border-btm {
  100.         background-position: left bottom;
  101.         background-image: -webkit-gradient(linear, left top, left bottom, color-stop(.5, rgba(0, 0, 0, 0)), color-stop(.5, #eccf88), to(#eccf88))
  102.     }
  103.  
  104.     .wrapper .ui-border-top, .wrapper .ui-border-btm {
  105.         background-repeat: repeat-x;
  106.         background-size: 100% 1px
  107.     }
  108.  
  109.     .wrapper .ui-border-tb {
  110.         background: -webkit-gradient(linear, left bottom, left top, color-stop(.50, transparent), color-stop(.50, #eccf88), to(#eccf88)) left top repeat-x, -webkit-gradient(linear, left top, left bottom, color-stop(.5, transparent), color-stop(.5, #eccf88), to(#eccf88)) left bottom repeat-x;
  111.         border-top: 0;
  112.         border-bottom: 0
  113.     }
  114.  
  115.     .wrapper .ui-border-tb {
  116.         background-size: 100% 1px;
  117.         -wekit-background-size: 100% 1px
  118.     }
  119. }
  120.  
  121. .mod-chest-cont {
  122.     background: url(../image/open-bg-top.png) center top no-repeat, url(../image/open-bg-bottom.png) center bottom no-repeat;
  123.     background-size: 276px auto;
  124.     width: 276px;
  125.     margin: 27px auto 118px;
  126.     position: relative;
  127. }
  128.  
  129. .mod-chest-cont:before {
  130.     width: 100%;
  131.     position: absolute;
  132.     top: 12px;
  133.     bottom: 80px;
  134.     left: 0px;
  135.     content: "";
  136.     background: #fff;
  137.     border-left: #e59c00 1px solid;
  138.     border-right: #e59c00 1px solid;
  139.     box-sizing: border-box;
  140. }
  141.  
  142. .mod-chest-cont .content {
  143.     position: relative;
  144.     z-index: 2;
  145.     padding: 13px;
  146. }
  147.  
  148. .mod-chest-cont h3 {
  149.     color: #865500;
  150.     font-size: 15px;
  151. }
  152.  
  153. .mod-chest {
  154.     position: relative;
  155.     width: 100%;
  156. }
  157.  
  158. .mod-chest .chest-close {
  159.     width: 320px;
  160.     height: 135px;
  161.     opacity: 0;
  162.     position: relative;
  163.     z-index: 1;
  164.     position: absolute;
  165.     left: 50%;
  166.     top: 0px;
  167.     margin-left: -160px;
  168. }
  169.  
  170. .mod-chest .chest-close .gift {
  171.     width: 320px;
  172.     height: 135px;
  173.     background: url(../image/chest.png) no-repeat 0px 0px;
  174.     background-size: 320px auto;
  175.     position: absolute;
  176.     left: 0;
  177.     top: 0px;
  178. }
  179.  
  180. .mod-chest .chest-open {
  181.     width: 320px;
  182.     height: 150px;
  183.     background: url(../image/chest.png) no-repeat 0px -137px;
  184.     background-size: 320px auto;
  185.     opacity: 0;
  186.     position: relative;
  187.     z-index: 1;
  188.     position: absolute;
  189.     left: 0px;
  190.     top: 0px;
  191. }
  192.  
  193. .mod-chest .chest-open .mod-chest-cont {
  194.     position: absolute;
  195.     bottom: -27px;
  196.     left: 50%;
  197.     margin-left: -138px;
  198. }
  199. /*show显示元素*/
  200. .mod-chest .show {
  201.     z-index: 2;
  202.     opacity: 1;
  203. }
  204.  
  205. .chest-icon-zuan {
  206.     position: relative;
  207.     width: 50px;
  208.     overflow: visible;
  209.     height: 0px;
  210.     vertical-align: middle;
  211.     display: inline-block;
  212. }
  213.  
  214. .chest-icon-zuan:after {
  215.     display: block;
  216.     content: "";
  217.     width: 75px;
  218.     height: 50px;
  219.     position: absolute;
  220.     top: -30px;
  221.     left: 0px;
  222.     background: url(../image/chest-icon-zuan.png) 0px 0px no-repeat;
  223.     background-size: 75px auto;
  224.     left: -10px;
  225. }
  226.  
  227. .icon-state-doing, .icon-state-finish, .icon-state-expired {
  228.     display: block;
  229.     width: 112px;
  230.     height: 45px;
  231.     background: url(../image/chest-state.png) 0px 0px no-repeat;
  232.     background-size: 112px auto;
  233. }
  234.  
  235. .icon-state-doing {
  236.     background-position: 0px -45px;
  237. }
  238.  
  239. .icon-state-expired {
  240.     background-position: 0px -90px;
  241. }
  242.  
  243. .icon-gift-xin, .icon-gift-zuan {
  244.     position: relative;
  245.     width: 15px;
  246.     overflow: visible;
  247.     height: 0px;
  248.     vertical-align: middle;
  249.     display: inline-block;
  250.     margin: 0px 3px;
  251. }
  252.  
  253. .icon-gift-xin:after, .icon-gift-zuan:after {
  254.     display: block;
  255.     content: "";
  256.     width: 15px;
  257.     height: 13px;
  258.     position: absolute;
  259.     top: -8px;
  260.     left: 0px;
  261.     background: url(../image/chest-icon-sprite.png) 0px 0px no-repeat;
  262.     background-size: 100px auto;
  263. }
  264.  
  265. .icon-gift-xin:after {
  266.     background-position: -20px 0px;
  267. }
  268.  
  269. .icon-dot {
  270.     width: 6px;
  271.     height: 6px;
  272.     display: inline-block;
  273.     overflow: hidden;
  274.     background: #ff0000;
  275.     border-radius: 6px;
  276. }
  277.  
  278. .ui-round {
  279.     -webkit-mask: url(../image/radius-mask.png) 0px 0px no-repeat;
  280.     -webkit-mask-size: 100% auto;
  281. }
  282.  
  283. .wrapper {
  284.     width: 100%;
  285.     overflow: hidden;
  286.     position: relative;
  287. }
  288.  
  289. .open-body {
  290.     width: 100%;
  291.     overflow: hidden;
  292. }
  293.  
  294. .open-body .bg {
  295.     position: absolute;
  296.     z-index: 1;
  297.     background: url(../image/light.png) 0px 0px no-repeat;
  298.     background-size: 452px auto;
  299.     width: 452px;
  300.     height: 510px;
  301.     max-height: 100%;
  302.     left: 50%;
  303.     margin-left: -226px;
  304.     top: -25px;
  305. }
  306.  
  307. .open-body .bg.rotate {
  308.     -webkit-animation: rotate 10s infinite linear;
  309. }
  310.  
  311. .open-has {
  312.     position: relative;
  313.     z-index: 2;
  314.     height: 450px;
  315.     width: 320px;
  316.     margin: 0px auto;
  317. }
  318.  
  319. .open-has .title-close {
  320.     opacity: 1;
  321.     -webkit-transition: all .5s;
  322.     width: 100%;
  323.     text-align: center;
  324. }
  325.  
  326. .open-has .title-open {
  327.     opacity: 0;
  328.     -webkit-transition: all .5s;
  329.     position: absolute;
  330.     top: 0px;
  331.     left: 0px;
  332.     text-align: center;
  333.     width: 100%;
  334. }
  335.  
  336. .open-has h3 {
  337.     color: #865500;
  338.     font-size: 15px;
  339.     text-align: center;
  340.     padding-top: 75px;
  341.     padding-bottom: 33px;
  342. }
  343.  
  344. .open-has h3 .user {
  345.     color: #ff5400;
  346.     margin: 0px 5px;
  347.     display: inline-block;
  348.     overflow: hidden;
  349.     text-overflow: ellipsis;
  350.     max-width: 100px;
  351.     position: relative;
  352.     white-space: nowrap;
  353.     vertical-align: top;
  354. }
  355.  
  356. .open-has .title-close .user {
  357. }
  358.  
  359. .mod-chest .chest-close .tips {
  360.     width: 166px;
  361.     height: 60px;
  362.     background: url(../image/txt-tips-open.png) 0px 0px no-repeat;
  363.     background-size: 190px auto;
  364.     position: absolute;
  365.     left: 70px;
  366.     top: 145px;
  367.     -webkit-transition: all .5s;
  368. }
  369.  
  370. .mod-chest .chest-close .tips .arrow {
  371.     width: 26px;
  372.     height: 60px;
  373.     background: url(../image/txt-tips-open.png) right 0px no-repeat;
  374.     background-size: 190px auto;
  375.     position: absolute;
  376.     display: block;
  377.     top: 0px;
  378.     right: -28px;
  379.     -webkit-animation: move .7s linear infinite alternate;
  380. }
  381.  
  382. .mod-chest .chest-close:after {
  383.     width: 320px;
  384.     height: 300px;
  385.     position: absolute;
  386.     top: -100px;
  387.     left: -61px;
  388.     content: "";
  389.     display: block;
  390. }
  391.  
  392. .mod-chest .chest-close:active {
  393.     -webkit-transform: scale(1.05);
  394.     -webkit-transition: all .3s;
  395. }
  396. /*shake可以让宝箱摇晃*/
  397. .mod-chest .chest-close.shake .gift {
  398.     -webkit-animation: shake 1.2s linear;
  399.     -webkit-animation-fill-mode: forwards;
  400. }
  401.  
  402. .mod-chest .chest-close.shake .tips {
  403.     opacity: 0;
  404. }
  405.  
  406. .mod-chest .chest-open {
  407. }
  408.  
  409. .mod-chest .chest-open.blur:after {
  410.     width: 320px;
  411.     height: 68px;
  412.     background: url(../image/chest-open-blur.png) no-repeat 0px 0px;
  413.     background-size: 320px auto;
  414.     position: relative;
  415.     z-index: 1;
  416.     position: absolute;
  417.     left: 0px;
  418.     top: -5px;
  419.     content: "";
  420.     display: block;
  421. }
  422. /*opened能显示需要显示元素*/
  423. .open-has.opened .title-open {
  424.     opacity: 1;
  425. }
  426.  
  427. .open-has.opened .title-close {
  428.     opacity: 0;
  429. }
  430.  
  431. /*.open-has.opened .mod-chest{-webkit-transform:translate(0px,150px);}*/
  432. .open-has.opened .mod-chest .chest-open {
  433.     -webkit-transform: translate(0px, 150px);
  434. }
  435.  
  436. .open-has .mod-chest-cont {
  437.     padding: 30px 0px 50px;
  438.     text-align: center;
  439.     overflow: hidden;
  440.     opacity: 0;
  441.     -webkit-transform: translate(0px, 30px); /*-webkit-transition:all .3s .3s;-webkit-transition:all .3s .3s cubic-bezier(.53,1.5,.69,1.81);*/
  442.     z-index: 9;
  443.     -webkit-animation-fill-mode: forwards;
  444. }
  445.  
  446. .open-has .chest-open.show .mod-chest-cont {
  447.     /*-webkit-transform:translate(0px,0px);opacity: 1;*/
  448.     -webkit-animation: move2 .2s .0s linear;
  449.     -webkit-animation-fill-mode: forwards;
  450. }
  451.  
  452. .open-has .mod-chest-cont .gift {
  453.     color: #ff6000;
  454.     font-size: 24px;
  455.     line-height: 30px;
  456.     padding-bottom: 30px;
  457. }
  458.  
  459. .open-has .mod-chest-cont .gift .icon {
  460.     width: 58px;
  461.     height: 0px;
  462.     position: relative;
  463.     display: inline-block;
  464.     vertical-align: middle;
  465. }
  466.  
  467. .open-has .mod-chest-cont .gift img {
  468.     width: 75px;
  469.     height: 50px;
  470.     position: absolute;
  471.     top: -28px;
  472.     left: -5px;
  473. }
  474.  
  475. .open-none {
  476.     position: relative;
  477.     z-index: 2;
  478.     height: 450px;
  479.     width: 320px;
  480.     margin: 0px auto;
  481. }
  482.  
  483. .open-none .mod-chest {
  484.     height: 150px;
  485. }
  486.  
  487. .open-none h3 {
  488.     font-size: 15px;
  489.     color: #865500;
  490.     text-align: center;
  491.     padding-top: 35px;
  492.     padding-bottom: 40px;
  493. }
  494.  
  495. .open-none .func {
  496.     padding: 18px 35px 30px;
  497. }
  498.  
  499. @-webkit-keyframes rotate {
  500.     0% {
  501.         -webkit-transform: rotate(0deg);
  502.     }
  503.     100% {
  504.         -webkit-transform: rotate(360deg);
  505.     }
  506.  
  507. }
  508.  
  509. @-webkit-keyframes move {
  510.     0% {
  511.         -webkit-transform: translate(0px, 0px);
  512.     }
  513.     100% {
  514.         -webkit-transform: translate(0px, -5px);
  515.     }
  516.  
  517. }
  518.  
  519. @-webkit-keyframes move2 {
  520.     0% {
  521.         -webkit-transform: translate(0px, 30px);
  522.         opacity: 0;
  523.     }
  524.     70% {
  525.         -webkit-transform: translate(0px, -20px);
  526.         opacity: 1;
  527.     }
  528.     100% {
  529.         -webkit-transform: translate(0px, 0px);
  530.         opacity: 1;
  531.     }
  532.  
  533. }
  534.  
  535. @-webkit-keyframes shake {
  536.     0% {
  537.         transform: scale(1);
  538.         -webkit-transform: scale3d(1, 1, 1);
  539.  
  540.     }
  541.  
  542.     6% {
  543.         -webkit-transform: scale(.9) rotate(-8deg);
  544.         -webkit-transform: scale3d(1, 1, 1) rotate(0, 0, 1, -8deg);
  545.     }
  546.  
  547.     18%, 30%, 42% {
  548.         -webkit-transform: scale(1.1) rotate(8deg);
  549.         -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 8deg);
  550.  
  551.     }
  552.  
  553.     12%, 24%, 36%, 48% {
  554.         -webkit-transform: scale(1.1) rotate(-8deg);
  555.         -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -8deg);
  556.  
  557.     }
  558.     54% {
  559.         -webkit-transform: scale(1);
  560.         -webkit-transform: scale3d(1, 1, 1);
  561.     }
  562.  
  563.     60% {
  564.         -webkit-transform: scale(1);
  565.         -webkit-transform: scale3d(1, 1, 1);
  566.     }
  567.  
  568.     80% {
  569.         -webkit-transform: scale(1) translate(0px, 150px);
  570.         -webkit-transform: scale3d(1, 1, 1) translate3d(0px, 150px, 0);
  571.     }
  572.     90% {
  573.         -webkit-transform: scale(1) translate(0px, 130px);
  574.         -webkit-transform: scale3d(1, 1, 1) translate3d(0px, 130px, 0);
  575.     }
  576.     100% {
  577.         -webkit-transform: scale(1) translate(0px, 150px);
  578.         -webkit-transform: scale3d(1, 1, 1) translate3d(0px, 150px, 0);
  579.     }
  580.  
  581. }
  582.  
  583. .chest-notice {
  584.     text-align: center;
  585.     font-size: 12px;
  586.     line-height: 20px;
  587.     position: relative;
  588.     color: #ff6000;
  589.     padding-bottom: 10px;
  590. }
  591.  
  592. .chest-notice input {
  593.     position: relative;
  594.     top: 3px;
  595. }

效果：

点击宝箱

抖动，掉落

Web前端框架与移动应用开发第七章的更多相关文章

  1. Web前端框架与移动应用开发第七章：二

    3.练习3:抽奖大转盘 注意事项:需要使用Zepto.js,区别于zepto.min.js 实现效果:转盘转动抽奖 html <!DOCTYPE html><html>< ...

  2. Web前端框架与移动应用开发第八章

    Web前端框架与移动应用开发:制作58招聘专题页 1.html代码: <!DOCTYPE html><html><head> <meta charset=&q ...

  3. React 还是 Vue: 你应该选择哪一个Web前端框架？

    学还是要学的,用的多了,也就有更多的认识了,开发中遇到选择的时候也就简单起来了. 本文作者也做了总结: 如果你喜欢用(或希望能够用)模板搭建应用,请使用Vue    如果你喜欢简单和“能用就行”的东西 ...

  4. 最受Web前端开发者欢迎的五大开发工具

    工其事,必利于器.好的开发工具毋容置疑会帮助Web前端开发者事半功倍,51CTO在上期主办的技术沙龙<大型网站PHP开发之道> 对现场的百余位Web开发者做了问卷调查,后经51CTO调研小 ...

  5. Web前端框架学习成本比较及学习方法

    就项目中自己用过的前端框架的学习成本比较与学习心得分享 刚工作时间不长只用过这几个框架下面是难易程度比较: 不论哪个web前端框架, 究其本质都是把页面的数据传递给后台服务器语言(如java)进行处理 ...

  6. 国内5款优秀的WEB前端框架

    1. JX(腾讯) 官网地址:http://alloyteam.github.io/JX/#home JX 是一个类似 Google Closure Library 的 Web 前端开发框架,服务于 ...

  7. Web前端框架与类库

    Web前端框架与类库的思考 说起前端框架,我也是醉了.现在去面试或者和同行聊天,动不动就这个框架碉堡了,那个框架好犀利. 当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉.网站技术是为业务而存在的,除此 ...

  8. Web前端框架与类库的思考

    说起前端框架,我也是醉了.现在去面试或者和同行聊天,动不动就这个框架碉堡了,那个框架好犀利. 当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉.网站技术是为业务而存在的,除此毫无意义,框架也是一样.在技 ...

  9. Web前端框架汇总

    在做web开发的时候难免遇到一个问题,那就是,选择什么样的框架.下面把前端的框架简单的列一下. 1.flex Apache基金会今天发布了Flex 4.8版本,这是Adobe将Flex捐献给Apach ...

随机推荐

  1. Docker容器安装

    使用脚本安装 Docker 1.使用 sudo 或 root 权限登录 Centos. 2.确保 yum 包更新到最新. $ sudo yum update 3.执行 Docker 安装脚本. $ c ...

  2. 【XSY2733】Disembrangle DP

    题目描述 有一个\(3\times n\)的网格,一些格子里已经有棋子了,一些格子里还没有. 每次你可以选择往一个没有棋子的格子里放一个棋子,但要满足这个格子上下两个格子都有棋子或左右两个格子都有棋子 ...

  3. SpringBoot 从application.yml中通过@Value读取不到属性值

    package cn.exrick.xboot.mqtt; import org.eclipse.paho.client.mqttv3.*;import org.eclipse.paho.client ...

  4. hexo博客添加功能

    设置Hexo主题模式 Hexo主题中,有三种不同的模式,通过切换模式,让NexT主题显示不一样的样式.在NexT根目录下有一个同样名称为_config.yml,为了区分hexo根目录下的_config ...

  5. 51nod 1105（第K大数 二分套二分）

    题目链接:http://www.51nod.com/onlineJudge/submitDetail.html#!judgeId=620811 参考自:https://blog.csdn.net/f_ ...

  6. Apache Beam实战指南 | 手把手教你玩转KafkaIO与Flink

    https://mp.weixin.qq.com/s?__biz=MzU1NDA4NjU2MA==&mid=2247492538&idx=2&sn=9a2bd9fe2d7fd6 ...

  7. spring5 reactive

    示例代码:https://github.com/srpraneeth/spring5-reactive 说明文档: https://coyee.com/article/12086-spring-5-r ...

  8. 【ZJOI2007】粒子运动

    若此段起始点为(stx,sty),速度为(vx,vy),设碰撞时间为t,则(stx+vx·t)²+(sty+vy·t)²=r² → stx²+vx²·t²+2·stx·vx·t+sty²+vy²·t² ...

  9. 【洛谷P1082】同余方程

    题目大意:求关于 \(x\) 的同余方程 \[ax \equiv 1 \pmod {b}\] 的最小正整数解. 题解:exgcd 板子题. 代码如下 #include <bits/stdc++. ...

  10. MAC安装JDK及环境变量配置

    1.访问Oracle官网 http://www.oracle.com,浏览到首页的底部菜单 ,然后按下图提示操作: 2.点击“JDK DOWNLOAD”按钮: 3.选择“Accept Lisence ...