CSS3總結三：文字（text）/字體、文本、文本裝飾、多列

• Text-Decoration

• text-shadow
• text-decoration

• Font

• font
• font-face

• Text

• 經常使用Text屬性

• Multi-column

• Multi-column
• Multi-column能夠實現瀑布流佈局嗎？
• Multi-column實現小說翻頁功能

 1、Text-Decoration（文本樣式）

1.一、text-shodow:文字陰影

文字陰影與元素陰影的語法基本一致，可是不能放大陰影。語法：text-shadow:length(水平偏移) length(垂直偏移) length(陰影模糊長度) color(陰影顏色)；應用文字陰影設置一些示例樣式：文字浮雕樣式、文字鏤刻樣式、文字陰影投射、結合CSS3動畫的一個小實驗。

TEXT SHADOW--浮雕效果

1 color: #ddd; 2 font-size: 30px; 3 font-weight: 400; 4 text-shadow: 1px 1px 1px #2b2b2b,-2px -2px 1px #fff;

TEXT SHADOW--鏤刻效果

text-shadow: -1px -1px 1px #2b2b2b;

TEXT SHADOW--陰影投射效果

text-shadow: -6px -6px 1px #5e5e5e,-1px -1px 1px #2b2b2b, 1px 1px 1px #ffa;

 text-shadow與transition動畫結合實現陰影投射變幻效果：

 動畫實現代碼：

 1 *{
 2  margin: 0;
 3  padding: 0;
 4 }
 5 .root,  6 body{
 7  width: 100%;
 8  background-color: #2b2b2b;
 9 }
10 div{
11  width: 300px;
12  height: 100px;
13  position: absolute;
14  top: calc(50% - 50px);
15  left: calc(50% - 150px);
16  background-color: #0ff;
17     
18  color: #bbb;
19  font-size: 30px;
20  font-weight: 400;
21  text-align: center;
22  line-height: 100px;
23 
24  text-shadow:1px 1px 1px #bbb, 25  1px 1px 1px #bbb, 26  1px 1px 1px #ffa;
27 
28  transition: all 1s;
29 }
30 div:hover{
31  text-shadow: -6px -6px 1px #5e5e5e, 32  -1px -1px 1px #2b2b2b, 33  1px 1px 1px #ffa;
34 }

View Code

下面這個text-shadow+動畫效果不想上傳效果圖，若是有看官感受不適告訴我刪除：

 1 div{
 2  width: 400px;
 3  height: 150px;
 4  position: absolute;
 5  top: calc(50% - 75px);
 6  left: calc(50% - 200px);
 7 
 8  background-image: url('eye.jpeg');
 9  -webkit-background-clip: text;
10  -webkit-text-fill-color: transparent;
11 
12  background-size: 400px 300px;
13  background-position: 0px -60px;
14     
15     
16  color: #bbb;
17  font-size: 100px;
18  font-weight: 700;
19  text-align: center;
20  line-height: 150px;
21 
22  text-shadow: 0px 0px 1px #8B2500;
23     
24  transition: all 3s;
25 }
26 div:hover{
27  text-shadow: 0px 0px 100px #000;
28 }

View Code

 webkit一個特有的效果：

color:transparent; font-family:simsun; -webkit-text-stroke:1px red;

1.二、text-decoration:文字裝飾樣式（劃線）

 語法：（這個樣式基本屬於雞肋，由於a標籤天生自帶這個屬性，一般都會被取消默認樣式，因此這個屬性更可能是用來取消的，還有就是一箇中劃線用來表示刪除的做用了）

text-decoration：text-decoration-line || text-decoration-style || text-decoration-color

取消默認樣式和中劃線：

text-decoration:none;//取消文字裝飾樣式 text-decoration:line-through solid #bbb;//中劃線

 2、Font（字體樣式）

 2.一、font(字體)

字體樣式基本上都是CSS2的屬性，CSS3有兩個添加屬性font-stretch(字體寬度伸縮)、font-size-adjust(字體高度與字號比)。

2.二、@font-face：設置嵌入HTML文檔的OpenType字體。

這個屬性如今多被應用添加特殊符號，若是大範圍使用特殊字體會有很大的性能損耗，英文文本字體應用性能不會有什麼影響，可是對於多達幾萬字的漢字一個字體包幾MB很常見，甚至多大幾十MB，因此通常不會被應用。

在演示具體的@font-face的使用前，先來了解一下字體提示器format()。

在CSS3手冊中有當前主流瀏覽器的字體文件加載的兼容代碼：

@font-face { font-family: 'diyfont';/* 定義字體名稱，供使用到時引用 */
　 src: url('diyfont.eot'); /* IE9+ */
　 src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 　　url('diyfont.woff') format('woff'), /* chrome、firefox */ 　　url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ 　　url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */ 
}

diyfont表示自定義字體文件路徑。而後再來看看手冊中提供的特殊字體格式包的使用(富文本編輯器無法實現字體加載，只能提供截圖)：

//css @font-face{ font-family: 'iconfont'; src:url("http://at.alicdn.com/t/font_1397098551_95441.eot");/* 兼容IE */ src: url('http://at.alicdn.com/t/font_1397098551_95441.eot?#iefix') format("embedded-opentype"), url('http://at.alicdn.com/t/font_1397098552_0142624.woff') format("woff"), url('http://at.alicdn.com/t/font_1397098551_8732882.ttf') format("truetype"), url('http://at.alicdn.com/t/font_1397098552_0586202.svg#iconfont') format("scg");
} p{ font-family: 'iconfont';
} //html <p>㐳㐴㐵㐶傌㐸㑶㐺㐻㐼偑㐾㐿㑀㑁㑂㑃㑄㑅㑆㑳倲㑉㑊㑋㑌㑍㑎㑏㑐㑑㑒㑓㑯㑕㑖㑗㑘㑙㑚㑛㑜㐲傌㐸㑶㐺㐻㐼偑㐾㐿㑀㑁㑂㑋㑌㑍㑎㑏㑐㑑㑒㑓㑯㑕㑖㑗㑘㑙㑚㑛㑜㑝㑞㑟㑡㑢㑣㑤㑥㑦㑧㓾㓿㔀㔁㔂㔃</p>

 3、Text（文本）

 1.一、經常使用Text屬性：

屬性	版本	繼承	說明
text-align	css1/css3	有	定義元素水平對齊方式
line-height	css1	有	定義元素中行框的最小高度
word-break	css3	有	元素文本(字)遇到邊界如何換行（主要應用break-word指定英文單詞以整個單詞進行換行操做）
word-wrap/overflow-wrap	css3	有	元素文本遇到邊界如何換行（同上）

word-break:keep-all;不容許在文字間發生換行 word-break:break-all;容許在文字間發生換行（保留空格換行的編輯格式） word-break:break-word;//英文單詞按照整個單詞進行換行顯示 overflow-wrap/word-wrap:break-word;英文單詞按照整個單詞進行換行顯示 white-space:nowrap;//禁止文本換行，超出溢出處理

 3、Multi-column（多列）

 1.一、Multi column（多列的屬性及應用）：

• columns:設置每列的寬度  設置列數；（同等與columns-width+columns-count）若是列數*列寬超過容器寬度，會默認自動按照列寬自適應列數。
• column-width:列寬。列數自適應。
• column-count:列數。列寬自適應。
• column-gap:定義間隙寬度，不能取負值。
• column-rule:邊框寬度  邊框樣式  邊框顏色。(用法與border一致)列於列之間的邊框，同等於：<' column-rule-width '> || <' column-rule-style '> || <' column-rule-color '>。
• column-span:橫跨全部列，不能被設置浮動和定位的塊級元素。（多列容器的內部塊級元素）

 1.二、Multi column真的能夠實現瀑布流嗎？：

據說不少人認爲column能作出瀑布流效果，實測若是要實現標準的瀑布流效果column是辦不到的，除非嚴格設定容器寬高，子元素恰好填充每一個位置。這種效果最多算是自動櫥窗佈局，畢竟瀑布流自己就是爲了解決高度不一致的子元素排列布局，那下面就來具體解析一下column爲何不能實現標準的瀑布流：

 最後一個就不添加了，第八張圖片添加的位置是正確的，可是接着來看第九張圖片添加進去發生了什麼？

結論來了：column（列）的結構添加方式並不是遵循瀑布流的length（高度）最小列的原則，而是遵循最高高度爲多數原則，這就是第九張圖片添加進去改變了列原來的排列結構的緣由。若是按照瀑布流最小高度原則，同高度放第一列的話，那麼第一列就是最高列3張圖片，可是其餘三列都爲兩種圖片的高度；因此就會從最後一列拿圖片添加到第二列，這時候就是3，3，2，1的高度比例，3張圖片的兩列，其餘兩列，比例爲1：1，尚未達到最高高度多數原則；這時候又從最後一列拿圖片添加到第三列，最高多數原則比例爲3：0，達到了最高多數原則。這就是column（列）不能實現瀑布流的原則，就算是櫥窗佈局都不建議使用，由於結構變化致使重排消耗性能遠遠大於傳統的佈局方式。

 1.二、Multi column實現小說閱讀翻頁功能：

 1 <div class="wrapper">
 2     <div class="maskant"></div>
 3     <div class="reading">
 4                <!--這裏給四個頁面的文字測試-->    
 5         </div>
 6 </div>
 7 <!--css-->
 8 *{  9  margin: 0px; 10  padding: 0px; 11 } 12 .root, 13 body{ 14  width: 100%; 15 } 16 .wrapper{ 17  position: absolute; 18  top: calc(50% - 250px); 19  left: calc(50% - 150px); 20  width: 300px; 21  height: 500px; 22  border: 1px solid #888; 23  background-color: #ffa; 24 
25  overflow: hidden; 26 } 27 .reading{ 28  height: 500px; 29  padding-left: 0px; 30  margin-left: 0px; 31  column-width: 280px; 32  column-gap: 20px; 33     
34     
35 } 36 .maskant{ 37  position: absolute; 38  width: 100%; 39  height: 100%; 40  /* background-color: red; */ 41 }

踩坑成功，我能說這個屬性是廢的嗎？

 1 // 1.當鼠標按下reading時獲取獲取  2 // margin-left  3 // e.clientX e.clientY -- 獲取鼠標的位置（相對於文檔顯示區域的位置）  4 // dom.offsetTop dom.offsetTop -- 相對父級的位置偏移量（經過wrapper獲取到元素實際的文檔可視位置）  5 // 因爲實際項目中都採用第三方庫或者框架實現，這些庫和框架中都包含獲取dom位置的方法和屬性，這裏就不封裝了  6 // 2.當鼠標移動時，reading跟隨鼠標移動左右移動  7 // 在移動過程當中元素的橫向移動超過1/2時觸發翻頁  8 // 若是橫向移動沒有超過1/2（鼠標擡起時被視爲鼠標移動結束），判斷鼠標是垂直移動仍是橫向移動（移動方向與垂直線的角度超過45°被視爲橫向移動）  9 // 3.若是是橫向移動則以鼠標的最後橫向移動速度作減速運動，若是元素移動距離超過1/2，觸發翻頁，不然頁面回彈到原來的位置。  10 
 11 // 須要的組件  12 // --1：鼠標按一下時獲取dom數據  13 // --2：鼠標移動時實現元素拖拽功能（X軸）、計算元素移動速度、觸發翻頁功能  14 // --3：鼠標擡起時實現元素滑緩衝運動、觸發翻頁功能  15 // --4：回調函數：翻頁功能、滑動緩衝運動、判斷鼠標移動方向  16 
 17 //這裏提供一個模擬的章節對象  18 var article = {  19  text:"",  20  pageNum:4  21 }  22 
 23 
 24 
 25 //----原生js實現----------------------------------------------------------------------------------------------------------------------------  26 
 27 var wrapperDom = getElementsByClass("wrapper")[0];//獲取wrapper  28 var readingDom = getElementsByClass("reading",wrapperDom)[0];//獲取reading  29 
 30 var wrapperWidth = Number.parseInt(getStyle(wrapperDom,"width"));//獲取wrapper的寬度  31 var readMarLeft = Number.parseInt(getStyle(readingDom,"marginLeft"));//獲取reading的左側外邊距  32 var readMarTop = Number.parseInt(getStyle(readingDom,"marginTop"));//獲取reading的上外邊距  33 
 34 var wrapperCoorX = wrapperDom.offsetLeft;//wrapper的橫座標  35 var wrapperCoorY = wrapperDom.offsetTop;//wrapper的縱座標  36 
 37 
 38 var pagination = 1;//初始化當前閱讀章節的頁碼  39 
 40  // 測試  41  // readingDom.onclick = function(){  42  // // readTurn(article,"left");//翻頁切換實現--經過測試  43  // }  44 
 45  //鼠標按下時獲取鼠標的座標  46  // --註冊鼠標移動事件：鼠標移動時reading跟隨左右移動；並記錄最後一次移動的速度，若是移動過程當中reading移動距離超過1/2，直接觸發翻頁功能，而且取消鼠標移動事件，鼠標擡起事件再也不註冊  47  // --註冊鼠標擡起事件：鼠標擡起時，取消鼠標移動事件，接着取消鼠標擡起事件自己，而後根據最後一次移動速度觸發reading滑動緩衝運動  48 wrapperDom.onmousedown = function(e){//註冊鼠標按下事件  49  var event = e || window.event;  50  // 獲取鼠標按下時的座標  51  var disX = e.clientX;  52  var disY = e.clientY;  53  // 緩存鼠標每次移動定位前一次的位置  54  var lastX = disX;  55  var lastY = disY;  56  // 緩存鼠標每次移動的速度 --初始速度爲0  57  var speedX = 0;  58  var speedY = 0;  59  // 緩存鼠標移動方向 ==> 橫向 === ["left","right"] : 縱向 == ["top","bottom"]  60  var mouseDirectionX = "";  61  var mouseDirectionY = "";  62  // 註冊鼠標擡起事件  63  wrapperDom.onmouseup = buffermove;  64  // 註冊鼠標移出事件  65  wrapperDom.onmouseout = buffermove;  66  // 緩存每次移動定位與初始點擊位置的距離  67  var x = 0;  68  var y = 0;  69 
 70  //註冊鼠標移動事件  71  wrapperDom.onmousemove = function(e){  72  // 記錄每次移動定位與初始點擊位置的距離  73  x = Math.abs(e.clientX - disX);  74  y = Math.abs(e.clientY - disY);  75  //每次移動定位時刷新移動方向  76         mouseDirectionX = e.clientX - lastX < 0 ? "left" : "right";  77  mouseDirectionY = e.clientY - lastY < 0 ? "top" : "bottom";  78  // console.log(x,y);  79  // console.log(x,wrapperWidth/2);  80  if( x/y > 1){ // 當x/y > 1時表示鼠標移動的方向是橫向移動  81             if(x < wrapperWidth/2){  82  // 鼠標橫移範圍小於寬度的1/2時觸發跟隨橫向移動--而且記錄每次移動的速度-->刷新下次移動前的位置記錄  83  // 當鼠標爲橫向移動時readingDom實現拖拽運動 === 當鼠標向右移動時 : 當鼠標向左移動時  84  readingDom.style.marginLeft = e.clientX - disX > 0 ? (readMarLeft + x) + "px" : (readMarLeft - x) + "px";  85  // 計算移動速度 === 最新的移動定位 - 移動定位的上一次位置  86  speedX = e.clientX - lastX;  87  speedY = e.clientY - lastY;  88  // 刷新下次移動前的位置記錄  89  lastX = e.clientX;  90  lastY = e.clientY;  91  }else{  92  // 取消鼠標移動事件  93  wrapperDom.onmousemove = null;  94  // 取消鼠標擡起事件  95  wrapperDom.onmouseup = null;  96  // 取消鼠標移出事件  97  wrapperDom.onmouseout = null;  98 
 99  // 觸發翻頁方法 100  // 勻速運動 101  // --用於翻頁時採用最後檢測的速度運輸運動到下一頁 102  // --用於緩衝運動後移動距離尚未達到1/2距離的時候，採用勻速運動到頁面最初的位置 103  readTurn(article,mouseDirectionX); 104  } 105  }else{ 106             // 當x/y < 1時表示鼠標移動的方向是縱向（這裏暫時用不到縱向，保留給其餘功能使用） 107  } 108  } 109  // 用於註冊鼠標擡起事件和鼠標移出事件： 110  // 鼠標擡起或移出時，取消鼠標移動事件，取消鼠標擡起事件，取消鼠標移出事件 111  // 而後根據最後一次移動速度觸發reading滑動緩衝運動 112  function buffermove(){ 113  // 取消鼠標移動事件 114  wrapperDom.onmousemove = null; 115         // 取消鼠標擡起事件 116  wrapperDom.onmouseup = null; 117         // 取消鼠標移出事件 118  wrapperDom.onmouseout = null; 119         // 執行緩衝運動 120  // 滑動緩衝運動 121  inertia(readingDom,{x:Math.abs(speedX),y:0,time:300,directionX:mouseDirectionX,directionY:mouseDirectionY},correction); 122         
123  } 124  //因爲setInterval異步執行，因此滑動後的監測數據不能回傳，只能採用回調函數的方式執行後面的動畫效果 125  //滑動時監測reading移動距離是否超過1/2，若是超過觸發翻頁功能，若是滑動到最大距離時都沒有超過1/2，reading彈回原來的位置 126  // 參數：數據類型--語法 127  // dom:dom對象--只支持dom節點 128  // formerObj:對象--鼠標移動結束時的DOM狀態, 129  // ----------------intiTop,intiLeft表示鼠標的移動結束時的margin-top,margin-left的距離, 130  // ----------------directionX,directionY表示鼠標移動結束時的滑動方向(X橫向,Y縱向),分別有值:[left,right],[top,bottom] 131  function correction(dom,formerObj,callback){ 132  var berthTop = Number.parseInt(getStyle(dom,"marginTop"));//獲取滑動後的元素外邊距（上） 133         var berthLeft = Number.parseInt(getStyle(dom,"marginLeft"));//獲取滑動後的元素外邊距（左） 134         var totalX =Math.abs(berthLeft - readMarLeft); 135  var totalY =Math.abs(berthTop - readMarTop); 136  if(totalX > 0 && totalY == 0){ 137  // 這裏執行橫向滑動後的操做--有兩種狀況 138  // 一種是滑動後的距離(包括鼠標的移動距離)超過寬度的一半即(x > wrapperWidth/2),執行翻頁功能 139             // 一種是滑動後的距離(包括鼠標的移動距離)沒有超過寬度的一半即(x < wrapperWidth/2)執行返回原來頁面的功能 140  if(totalX > wrapperWidth/2){ 141  readTurn(article,formerObj.directionX); 142             }else if(totalX < wrapperWidth/2){ 143  startMove(readingDom,{"marginLeft":readMarLeft},300,"swing"); 144  } 145 
146  }else if(totalY > 0 && totalX == 0){ 147  // 這裏預留給縱向滑動回彈效果或者其餘操做 148  } 149  } 150 } 151 
152 // 滑動緩衝運動 153 // --參數：數據類型--語法 154 // dom:dom對象--只支持dom節點 155 // speedObj:對象--x,y屬性表示橫縱方向上的速度，time指定滑動的時間，directionX,Y屬性表示運動方向（橫向運動時y軸傳入0，反正x爲0） 156 // callback:函數--若是有回調函數執行回調函數（這裏暫時用於調用滑動後的動畫效果） 157 var inertia = function(dom,speedObj,callback){ 158  var cTime = createTime();//運動開始執行的時間戳 159  var speedX = speedObj.x * 5;//x軸方向的運動速度 160  var intiTop = Number.parseInt(getStyle(readingDom,"marginTop"));//獲取初始的margin-top 161  var intiLeft = Number.parseInt(getStyle(readingDom,"marginLeft"));//獲取初始的margin-left 162  var speedY = speedObj.y;//y軸方向的運動速度 163  var speedTime = speedObj.time;//指定運動時間 164  var directionX = speedObj.directionX;//x軸的運動方向 165  var directionY = speedObj.directionY;//y軸的運動方向 166  var timer = setInterval(function(){ 167  if(directionX == "left" && directionY == "top"){ 168  dom.style.marginLeft = (Number.parseInt(getStyle(dom,"marginLeft")) - speedX ) + "px"; 169  dom.style.marginTop = (Number.parseInt(getStyle(dom,"marginTop")) - speedY) + "px"; 170  speedX = speedX * 0.7; 171  speedY = speedY * 0.7; 172  }else if(directionX == "left" && directionY == "bottom"){ 173  dom.style.marginLeft = (Number.parseInt(getStyle(dom,"marginLeft")) - speedX ) + "px"; 174  dom.style.marginTop = (Number.parseInt(getStyle(dom,"marginTop")) + speedY) + "px"; 175  speedX = speedX * 0.7; 176  speedY = speedY * 0.7; 177  }else if(directionX == "right" && directionY == "top"){ 178  dom.style.marginLeft = (Number.parseInt(getStyle(dom,"marginLeft")) + speedX) + "px"; 179  dom.style.marginTop = (Number.parseInt(getStyle(dom,"marginTop")) - speedY) + "px"; 180  speedX = speedX * 0.7; 181  speedY = speedY * 0.7; 182  }else if(directionX == "right" && directionY == "bottom"){ 183  dom.style.marginLeft = (Number.parseInt(getStyle(dom,"marginLeft")) + speedX) + "px"; 184  dom.style.marginTop = (Number.parseInt(getStyle(dom,"marginTop")) + speedY) + "px"; 185  speedX = speedX * 0.7; 186  speedY = speedY * 0.7; 187  } 188  if((createTime() - cTime) >= speedTime){ 189  clearInterval(timer); 190  return typeof callback == "function" ? callback(dom,{intiTop:intiTop,intiLeft:intiLeft,directionX:directionX,directionY:directionY}) : ""; 191  } 192  },30); 193 } 194 
195  //獲取當前時間戳 196 var createTime = function(){ 197  return (+new Date); 198 } 199 
200 //因爲column（多列）元素沒法獲取其準確的寬度，只能依靠文章的字節長度來計算得出文字的頁數，這一操做通常在後臺進行，因此翻頁功能要依靠一個模擬的章節對象 201 //翻頁功能 202 // --參數：數據類型--語法格式 203 // obj:對象--文章章節對象--後臺數據提供（包括：文章內容，文章頁數） 204 // direction:字符串--(參數："left"或者"right")表示向左或者向右翻頁 205 var readTurn = function(obj,direction){ 206     if(pagination < obj.pageNum && direction === "left"){ 207  readMarLeft -= wrapperWidth; 208         pagination ++; 209  }else if(pagination > 1 && direction === "right"){ 210  readMarLeft += wrapperWidth; 211  pagination --; 212  } 213  // console.log(readMarLeft+"px"); 214  // readingDom.style.marginLeft = readMarLeft + "px";//這裏須要一個勻速運動執行翻頁功能 215  // 使用動畫函以勻速過渡到目標位置實現翻頁功能 216  // startMove(運動體,目標位置，運動時間，運動行爲，回調函數) 217  startMove(readingDom,{"marginLeft":readMarLeft},300,"swing"); 218 } 219 // 獲取DOM的樣式值 220 // --參數：數據類型--語法格式 221 // --obj:DOM對象--純DOM對象 222 // --attr:字符串--樣式屬性名稱，帶'-'中劃線的省略中劃線，採用大駝峯寫法 223 function getStyle(obj,attr){ 224  if(window.getComputedStyle){ 225  return window.getComputedStyle(obj,false)[attr];//IE的方法 226  }else{ 227  return obj.currentStyle[attr];//標準瀏覽器的方法 228  } 229 } 230 //經過class類名獲取元素對象的兼容方法 231 // --參數：數據類型--語法格式 232 // --className:字符串--能夠傳入多個類名，以空格的方式間隔 233 // --context:對象--可選，默認document,能夠指定DOM對象（這裏只支持單個DOM對象，不支持DOM對象數組） 234 function getElementsByClass(className,context){ 235  context = context || document; 236  var ary = [];//用來緩存匹配的元素對象 237  // 經過replace()去除字符串的先後空格，再經過split()以空格爲間隔將字符串轉換成數組 238  var classNameArry = className.replace(/(^ +| +$)/g,"").split(/ +/g); 239  // 獲取指定上下文的全部元素標籤 240  var nodeList = context.getElementsByTagName("*"); 241  // 循環nodelist，獲取匹配的元素DOM 242     for(var i = 0,len = nodeList.length; i < len; i++){ 243  var curNode = nodeList[i]; 244         var isOk = true;//假設元素是匹配的 245         // 循環類名數組，判斷數組中的類名是否都能再元素的class屬性上 246  for(var j = 0; j < classNameArry.length; j++){ 247  var curName = classNameArry[j]; 248             var reg = new RegExp("(^| +)" + curName + "( +|$)"); 249  if(!reg.test(curNode.className)){ 250  isOk = false; 251                 break; 252  } 253  } 254  if(isOk){ 255  ary.push(curNode); 256  } 257  } 258  return ary; 259 } 260 
261 
262 
263 //運動方法startMove的參數： 264 //obj：運動物體； 265 //json：目標位置，最終樣式值（鍵值對的形式合成的目標位置對象） 266 //speed:運動時間（指定運動的時間） 267 //callback：回調函數 268 function startMove(obj,json,speed,easing,callback){ 269  //初始位置,移動距離,當前位置 270  var initialPlace = {}; 271     //新的位置（每次運動的目標點） 272  var nowPlace; 273  //結束以前的定時器 274  clearInterval(obj.timer); 275  //獲取當前時間戳 276  var createTime = function(){ 277         return (+new Date); 278  } 279  //動畫開始的時間戳 280  var startTime = createTime(); 281     //初始位置對象 282  for(var attr in json){ 283  if(attr == 'opacity'){ 284  initialPlace[attr] = Math.round(parseFloat(getStyle(obj,attr))*100); 285         }else{ 286  initialPlace[attr] = parseInt(getStyle(obj,attr)); 287         } 288  } 289  //對象行爲 -- 默認：swing(勻速) 290  if(!easing){ 291  easing = easingObj.swing; 292     }else{ 293  easing = easingObj[easing]; 294     } 295  //定時器 296  obj.timer = setInterval(function(){ 297         //每次變化的時間 298  //剩餘時間 = Math.max(0,運動開始的時間 + 運動執行事件 - 當前時間) -- 當剩餘時間爲負數時，返回0 299  var remaining = Math.max(0, startTime + speed - createTime()); 300  //剩餘時間比 = 剩餘時間 / 運動時間 301  var temp = remaining / speed || 0; 302  //當前時間比 = 1 - 剩餘時間比 -- 即執行到某處時間節點 303  var percent = 1 - temp; 304  //循環運動到時間節點位置 305  for(var attr in json){ 306  nowPlace = (json[attr] - initialPlace[attr]) * easing(percent) + initialPlace[attr]; 307  if(attr == 'opacity'){ 308  obj.style.opacity = nowPlace / 100; 309  }else{ 310  obj.style[attr] = nowPlace + 'px'; 311  } 312  } 313  //當前時間與運動時間比爲1:1時，說明到達運動終點了，結束定時器，並判斷是否有回調函數 314  if(percent == 1){ 315  clearInterval(obj.timer); 316  typeof callback == 'function' ? callback() : ''; 317  } 318  },30); 319 } 320 // 定義一些運動行爲對象 321 var easingObj ={ 322     linear: function( p ) { 323  return p; 324  }, 325  swing: function( p ) { 326  return 0.5 - Math.cos( p*Math.PI ) / 2; 327  }, 328  background:function(k) { 329  if (k < (1 / 2.75)) { 330  return 7.5625 * k * k; 331  } else if (k < (2 / 2.75)) { 332  return 7.5625 * (k -= (1.5 / 2.75)) * k + 0.75; 333  } else if (k < (2.5 / 2.75)) { 334  return 7.5625 * (k -= (2.25 / 2.75)) * k + 0.9375; 335  } else { 336  return 7.5625 * (k -= (2.625 / 2.75)) * k + 0.984375; 337  } 338  } 339 }

所有js代碼+註釋（未優化代碼）

 1 <div class="wrapper">
 2     <div class="maskant"></div>
 3     <ul class="reading">
 4         <li class="readingPage"><!--這裏給一些文字填充頁面--></li>
 5         <li class="readingPage"><!--這裏給一些文字填充頁面--></li>
 6         <li class="readingPage"><!--這裏給一些文字填充頁面--></li>
 7         <li class="readingPage"><!--這裏給一些文字填充頁面--></li>
 8     </ul>
 9 </div>
10 <!--css-->
11 *{ 12  margin: 0px; 13  padding: 0px; 14  list-style-type: none; 15 } 16 .root, 17 body{ 18  width: 100%; 19 } 20 .wrapper{ 21  position: absolute; 22  top: calc(50% - 250px); 23  left: calc(50% - 150px); 24  width: 300px; 25  height: 500px; 26  border: 1px solid #888; 27  background-color: #ffa; 28 
29  overflow: hidden; 30 } 31 .reading{ 32  width: 1200px; 33  height: 500px; 34  padding-left: 0px; 35  margin-left: 0px; 36 } 37 .reaging::after{ 38  clear: both; 39  content: ""; 40  display: block; 41 } 42 .readingPage{ 43  float: left; 44  width: 300px; 45  height: 500px; 46 } 47 .readingPage img{ 48  width: 100%; 49  height: 100%; 50 } 51 .maskant{ 52  position: absolute; 53  width: 100%; 54  height: 100%; 55  /* background-color: red; */ 56 } 57 /* .reading:hover{ 58  margin-left: -300px; 59 } */

保留全部js的功能用ul>li實現翻頁功能

代碼雖然沒有優化，可是該作的兼容都作了，只是在js的變量和參數方面和交互設計上還能夠進一步優化。