欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久

最近要做一個(gè)移動(dòng)web的項目，前端后端都自己一人來(lái)搞。由于之前一直是做后端的開(kāi)發(fā)，沒(méi)涉及過(guò)前端的開(kāi)發(fā)，甚是無(wú)從下手，但又不得不去弄，于是乎，先把w3school上前端相關(guān)的html、js、css都預覽了一遍，然后在仿照別人的站點(diǎn)自己嘗試著(zhù)去實(shí)現。

雖然很多人都是前臺很簡(jiǎn)單，沒(méi)啥搞的（至少像我做后臺的那些同事這么認為），但是真正開(kāi)始弄起來(lái)，還是有些困難的，要做到美觀(guān)易用，更得下工夫研究里面的所以然。

以下是我要實(shí)現一個(gè)在手機上滑動(dòng)（圖片，文字等）的效果。我先是把別人的頁(yè)面下載下來(lái)，然后根據它的在頁(yè)面呈現出來(lái)的“模塊”進(jìn)行切割，把各個(gè)模塊單獨提起出來(lái)，這樣做：（1）理解頁(yè)面的布局；（開(kāi)始的時(shí)候，在懷疑，前、后臺開(kāi)發(fā)的思維模式是否不一樣，因為一開(kāi)始的時(shí)候，看頁(yè)面的那些html、css、js實(shí)在暈，而且感覺(jué)代碼也很凌亂）（2）熟悉html標簽和css、js的用法；（這個(gè)需要花費一定的時(shí)間去熟悉每個(gè)標簽的特性和用法）。

這個(gè)示例，就是我提取出來(lái)后，把原來(lái)多余的css等刪除，僅僅保留滑動(dòng)效果最簡(jiǎn)潔的部分，由于剛接觸，在描述和理解上有不妥的地方，還煩請指正 ：）

一、先簡(jiǎn)要說(shuō)下swipe.js（參見(jiàn)：http://swipejs.com/）

之所以用到這個(gè)js，主要是：

（1）我在百度里搜索“頁(yè)面滑動(dòng)”等關(guān)鍵詞時(shí)，就出現了它老人家。

（2）在我下載下來(lái)別人滑動(dòng)頁(yè)面里面也用到了它。

二、如何使用

swipe是一個(gè)純的javascript，里面沒(méi)用到任何的其他的js框架（由于時(shí)間問(wèn)題，里面的東西沒(méi)很細研究，以后有時(shí)間了，再來(lái)學(xué)習），要實(shí)現移動(dòng)端的滑動(dòng)，必須要的元素有：

（1）html，這個(gè)當然不必說(shuō)

（2）css，需要一定的css做樣式。swipe里面會(huì )查找關(guān)鍵標簽的樣式，根據樣式來(lái)現實(shí)

（3）js，這里面有自己定義和實(shí)現的js function

以下分別對上面的3大塊進(jìn)行描述：

（1）html。必須的html有：

[html] view plaincopy

1. <div id="slider" class="swipe" style="visibility:visible;">  
2.     <div class="swipe-wrap">  
3.         <figure>  
4.             <div>  
5.                 <img src="img/1.JPG" width="100%" height="100%" />  
6.             </div>  
7.         </figure>  
8.         <figure>  
9.             <div>  
10.                 <img src="img/9.JPG" width="100%" height="100%" />  
11.             </div>              
12.         </figure>  
13.     </div>  
14. </div>  

【1】最外層的div的id是自定義的，這個(gè)是需要傳入到swipe中的

【2】最外層div的class="swipe"和第二層div的class="swipe-wrap"是寫(xiě)死的，swipe會(huì )查找這兩個(gè)樣式然后做相應的處理

【3】第三層的figure，就是我們要滑動(dòng)元素的單元。

【4】之后我們的要滑動(dòng)的內容，就是以figure為單位進(jìn)行的

（2）css。必須的css有：

[html] view plaincopy

1. <style>  
2. .swipe {  
3.     overflow: hidden;  
4.     visibility: hidden;  
5.     position: relative;  
6. }  
7. .swipe-wrap {  
8.     overflow: hidden;  
9.     position: relative;  
10. }  
11. .swipe-wrap > figure {  
12.     float: left;  
13.     width: 100%;  
14.     position: relative;  
15. }  
16. #slider {  
17.     max-width: 650px;/* 設置最大的寬度 */  
18.     margin: 0px auto; /* 居中對齊 */  
19. }  
20. figure {  
21.     margin: 0;/* 對齊，四周寬度都為0，在輪播的時(shí)候，以整張圖片進(jìn)行移動(dòng) */  
22. }  
23. </style>  

【1】swipe、swipe-wrap、swipe-wrap > figure，這3個(gè)是swipe必須要使用到的，而且里面的樣式最好也不要改動(dòng)（感興趣的同學(xué)可以試著(zhù)去改動(dòng)，看會(huì )呈現什么效果，蠻好玩的 :)）

【2】#slider是我自己設定的，用于整個(gè)空間居中

【3】figure樣式也是自己設定的，但是是必須的，指定所有的figure對齊方式，而且只能設置為0，否則在滑動(dòng)圖片的時(shí)候會(huì )出現位置的錯亂。（為什么會(huì )錯亂，自己簡(jiǎn)單研究了下，swipe滑動(dòng)寬度的像素是根據最外層div的寬度，如果figure的margin沒(méi)有設置為0，而有間隔時(shí)，滑動(dòng)的寬度就不會(huì )是一整張的figure了（figure之間存在空虛））

（3）js。必須有的js：

[html] view plaincopy

1. <script src="js/swipe.js"></script>  
2. <script>  
3. var slider =  
4.   Swipe(document.getElementById('slider'), {  
5.     auto: 3000,  
6.     continuous: true,  
7.     callback: function(pos) {  
8.     }  
9.   });  
10. </script>  

這個(gè)就是調用swipe了，這里面的參數有些是可有可無(wú)，根據自己的需求來(lái)選擇，簡(jiǎn)要說(shuō)明下swipe的接口參數（js里面是這么稱(chēng)呼的么？）：

[html] view plaincopy

1. startSlide Integer (default:0) - 開(kāi)始滾動(dòng)的位置  
2. speed Integer (default:300) - 動(dòng)畫(huà)滾動(dòng)的間隔（秒數）  
3. auto Integer - 開(kāi)始自動(dòng)幻燈片（以毫秒為單位幻燈片之間的時(shí)間）  
4. continuous Boolean (default:true) - 創(chuàng )建一個(gè)無(wú)限的循環(huán)（當滑動(dòng)到所有動(dòng)畫(huà)結束時(shí)是否循環(huán)滑動(dòng)）  
5. disableScroll Boolean (default:false) - 當滾動(dòng)滾動(dòng)條時(shí)是否停止幻燈片滾動(dòng)  
6. stopPropagation Boolean (default:false) - 是否停止事件冒泡  
7. callback Function - 幻燈片運行中的回調函數  
8. transitionEnd Function - 動(dòng)畫(huà)運行結束的回調函數  

api:

[html] view plaincopy

1. prev()：上一頁(yè)  
2. next()：下一頁(yè)  
3. getPos()：獲取當前頁(yè)的索引  
4. getNumSlides()：獲取所有項的個(gè)數  
5. slide(index, duration)：滑動(dòng)方法  

然后自己要實(shí)現的代碼就可以寫(xiě)在那些回調函數中（如callback等）

[html] view plaincopy

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
5. <title> xx的相冊 </title>  
6. <meta name="description" content="xx的相冊">  
7. <meta name="keywords" content="xxh,album,相冊">  
8. <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">  
9. <meta name="app-mobile-web-app-capable" content="yes">   
10. </head>  
11. <style>  
12. .swipe {  
13.     overflow: hidden;  
14.     visibility: hidden;  
15.     position: relative;  
16. }  
17. .swipe-wrap {  
18.     overflow: hidden;  
19.     position: relative;  
20. }  
21. .swipe-wrap > figure {  
22.     float: left;  
23.     width: 100%;  
24.     position: relative;  
25. }  
26. #slider {  
27.     max-width: 650px;/* 設置最大的寬度 */  
28.     margin: 0px auto; /* 居中對齊 */  
29. }  
30.   
31. figure {  
32.     margin: 0;/* 對齊，四周寬度都為0，在輪播的時(shí)候，以整張圖片進(jìn)行移動(dòng) */  
33. }  
34. div.swipe {  
35.     border: 1px solid blue;  
36. }  
37. .page-swipe nav #position {  
38.     text-align: center;  
39.     list-style: none;  
40.     margin: 0;  
41.     padding: 0  
42. }  
43. .page-swipe nav #position li {  
44.     display: inline-block;  
45.     width: 10px;  
46.     height: 10px;  
47.     border-radius: 10px;  
48.     background: #141414;  
49.     box-shadow: inset 0 1px 3px black,0 0 1px 1px #202020;  
50.     margin: 0 2px;  
51.     cursor: pointer  
52. }  
53. .page-swipe nav #position li.on {  
54.     box-shadow: inset 0 1px 3px -1px #28b4ea,0 1px 2px rgba(0,0,0,.5);  
55.     background-color: #1293dc;  
56.     background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#1293dc),color-stop(100%,#0f6297));  
57.     background-image: -webkit-linear-gradient(top,#1293dc,#0f6297);  
58.     background-image: -moz-linear-gradient(top,#1293dc,#0f6297);  
59.     background-image: -ms-linear-gradient(top,#1293dc,#0f6297);  
60.     background-image: -o-linear-gradient(top,#1293dc,#0f6297);  
61.     background-image: linear-gradient(top,#1293dc,#0f6297)  
62. }  
63. </style>  
64. <body class="page-swipe">  
65. <div id="slider" class="swipe" style="visibility:visible;">  
66.     <div class="swipe-wrap">  
67.         <figure>  
68.             <div class="face faceInner">  
69.                 <img src="img/1.JPG" width="100%" height="100%" />  
70.             </div>  
71.         </figure>  
72.         <figure>  
73.             <div class="face faceInner">  
74.                 <img src="img/2.JPG" width="100%" height="100%" />  
75.             </div>  
76.         </figure>  
77.         <figure>  
78.             <div class="face faceInner">  
79.                 <img src="img/3.JPG" width="100%" height="100%" />  
80.             </div>  
81.         </figure>  
82.     </div>  
83. </div>  
84.   
85. <nav>  
86. <ul id="position">  
87.   <li class="on"></li>  
88.   <li class=""></li>  
89.   <li class=""></li>  
90. </ul>  
91. </nav>  
92.   
93. <script src="js/swipe.js"></script>  
94. <script>  
95. var slider =  
96.   Swipe(document.getElementById('slider'), {  
97.     auto: 3000,  
98.     continuous: true,  
99.     callback: function(pos) {  
100.         var i = bullets.length;  
101.         while(i--){  
102.             bullets[i].className = ' ';  
103.         }  
104.         bullets[pos].className = 'on';  
105.     }  
106.   });  
107. var bullets = document.getElementById('position').getElementsByTagName('li');  
108. </script>  
109. </body>  
110. </html>