XSwitch全屏滾動特效-兼容IE8和Chrome瀏覽器
電子圖書翻書頁的JS特效，由於IE支持太好，FLASH未來要淘汰，所以折中用了一個全屏滾動特效來替換，因爲電子圖書大部分也是圖片，圖片採用全屏拉伸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>XSwitch</title>
<style media="screen">
/*簡單reset*/
* {
margin: 0;
padding: 0;
}
/*必須，關係到單個page能否全屏顯示*/
html,
body {
height: 100%;
overflow: hidden;
}
/*以下樣式用來設置slider樣式，可自行修改*/
.pages {
position:fixed;
right: 10px;
top: 49%;
list-style: none;
}
.pages li {
width: 8px;
height: 8px;
border-radius: 10%;
background: #2aff00;
margin: 8px 0px 0px 7px;
}
.pages li.active {
margin-left: 0;
width: 14px;
height: 14px;
border: 4px solid #2aff00;
background: none;
}
#container,
.sections,
.section {
/*必須，兼容，在瀏覽器不支持transform屬性時，通過改變top/left完成滑動動畫*/
position: relative;
/*必須，關係到單個page能否全屏顯示*/
height: 100%;
}
.section {
/*有背景圖時必須，關係到背景圖能夠全屏顯示*/
background-color: #000;
background-size: cover;
background-position: 50% 50%;
}
/*非必需，只是用來設置背景圖，id不會被插件用到*/
#section0 {
background: url(../img/01.jpg) no-repeat center center fixed;
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( sizingMethod='scale' , src='../img/01.jpg');/*使用濾鏡，其中 sizingMethod="scale" 就是拉伸。非IE不支持*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#section1 {
background: url(../img/02.jpg) no-repeat center center fixed;
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( sizingMethod='scale' , src='../img/02.jpg') ;/*使用濾鏡，其中 sizingMethod="scale" 就是拉伸。非IE不支持*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#section2 {
background: url(../img/03.jpg) no-repeat center center fixed;
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( sizingMethod='scale' , src='../img/03.jpg') ;/*使用濾鏡，其中 sizingMethod="scale" 就是拉伸。非IE不支持*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; }
#section3 {
background: url(../img/04.jpg) no-repeat center center fixed;
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( sizingMethod='scale' , src='../img/04.jpg') ;/*使用濾鏡，其中 sizingMethod="scale" 就是拉伸。非IE不支持*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; }
#section4 {
background: url(../img/05.jpg) no-repeat center center fixed;
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( sizingMethod='scale' , src='../img/05.jpg') ;/*使用濾鏡，其中 sizingMethod="scale" 就是拉伸。非IE不支持*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#section5 {
background: url(../img/06.jpg) no-repeat center center fixed;
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( sizingMethod='scale' , src='../img/06.jpg') ;/*使用濾鏡，其中 sizingMethod="scale" 就是拉伸。非IE不支持*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; }
#section6 {
background: url(../img/07.jpg) no-repeat center center fixed;
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( sizingMethod='scale' , src='../img/07.jpg') ;/*使用濾鏡，其中 sizingMethod="scale" 就是拉伸。非IE不支持*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; }
#section7 {
background: url(../img/08.jpg) no-repeat center center fixed;
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( sizingMethod='scale' , src='../img/08.jpg') ;/*使用濾鏡，其中 sizingMethod="scale" 就是拉伸。非IE不支持*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#section8 {
background: url(../img/09.jpg) no-repeat center center fixed;
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( sizingMethod='scale' , src='../img/09.jpg') ;/*使用濾鏡，其中 sizingMethod="scale" 就是拉伸。非IE不支持*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; }
#section9 {
background: url(../img/10.jpg) no-repeat center center fixed;
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( sizingMethod='scale' , src='../img/10.jpg') ;/*使用濾鏡，其中 sizingMethod="scale" 就是拉伸。非IE不支持*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; }
</style>
</head>
<body>
<!-- 插件基本結構 -->
<div id="container" data-XSwitch>
<div class="sections">
<div class="section" id="section0"></div>
<div class="section" id="section1"></div>
<div class="section" id="section2"></div>
<div class="section" id="section3"></div>
<div class="section" id="section4"></div>
<div class="section" id="section5"></div>
<div class="section" id="section6"></div>
<div class="section" id="section7"></div>
<div class="section" id="section8"></div>
<div class="section" id="section9"></div>
<div class="section" id="section0"></div>
<div class="section" id="section1"></div>
<div class="section" id="section2"></div>
<div class="section" id="section3"></div>
<div class="section" id="section4"></div>
<div class="section" id="section5"></div>
<div class="section" id="section6"></div>
<div class="section" id="section7"></div>
<div class="section" id="section8"></div>
<div class="section" id="section9"></div>
</div>
</div>
<script src="js/jquery-1.12.3.min.js" charset="utf-8"></script>
<script src="js/XSwitch-min.js" charset="utf-8"></script>
<script>
jQuery(document).ready(function($){//根據總圖數動態替換css中的top位置，達到居中效果
var total=20;//可以根據數據庫算出共多少張圖片
var totalHeigh=320;//20*(8+8)，每個小方格是8px，距上8px，所以每個16px*總圖片，算出這塊總的高度
var winHeight=$(window).height();
var scrollTopHeight=$(window).scrollTop();
//alert(winHeight +"-"+ scrollTopHeight);
var top1=scrollTopHeight+((winHeight - totalHeigh)/2 );//計算出居中時的top值
//alert(top1);
document.styleSheets[0].cssText=document.styleSheets[0].cssText.replace(/49%/,top1+"px"); //替換css中.pages中的top:49%爲計算出的top值，單位px
});
</script>
</body>
</html>