整屏切换效果
jquery中有整屏切换的插件，各种效果都有，自己在做个人网站的时候用到了整屏切换，就试着写了一下，方便以后使用。
需要引用的插件
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/mousewheel.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<html class="indexwrap"> <body class="indexwrap"> <div class="sidebar"></div> <div class="icontainer"> <div class="ipagebox"> <div class="ipage" style="background:#eee"></div> <div class="ipage" style="background:#000"></div> <div class="ipage" style="background:#f00"></div> <div class="ipage" style="background:#f60"></div> <div class="ipage" style="background:#6e1c1c"></div> </div> <div class="ipageorder"></div> </div> <script src="js/jquery-1.8.3.min.js"></script> <script src="js/mousewheel.js"></script> <script src="js/jquery.easing.1.3.js"></script> <script src="js/min.slip.js"></script> <script src="013.js"></script> </body>
<!--css代码--!>
.icontainer{width:100%;}
.icontainer .ipagebox{width:100%;}
.ipagebox .ipage{width:100%;}
.ipageorder{position:fixed;right:20px;top:50%;width:28px;padding:5px 0 15px;border-radius:28px;background:#999;background:rgba(0,0,0,0.35);z-index:30;}
.ipageorder span{display:block;width:16px;height:16px;margin:10px auto 0;font-size:0;line-height:0;border-radius:50%;background:#FFF;cursor:default;
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
-o-transition:all 0.3s;
transition:all 0.3s;}
.ipageorder span.cur{background:#29e;}
.ipageorder span.cur{background:#29e;}
.icontainer{position:absolute;width:100%;height:100%;background:#FFF;overflow:hidden;z-index:2;}
.icontainer .ipagebox{position:relative;height:100%;}
.icontainer .ipage{position:relative;width:100%;height:100%;}
.icontainer .ipage1{height:100%;z-index:1;}
.icontainer .ipage2,
.icontainer .ipage3,
.icontainer .ipage4,
.icontainer .ipage5{background-color:#FFF;z-index:2;}
// js代码
var isMobile = function IsPC(){
var userAgentInfo = navigator.userAgent;
var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
var flag = false;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = true; break; }
}
return flag;
}();
var personWeb=personWeb || {};
personWeb.pageInitSet=function(){
if($(".ipagebox").length==0){return;}
$(".ipagebox .ipage").css({"height":$(window).height()});
if(isMobile){
$(".indexwrap").css({"height":"auto"});
}
$(window).resize(function(){
if(!isMobile){
$(".ipagebox .ipage").css({"height":$(window).height()});
}
});
};
personWeb.indexAction=function(order,t){
if($(".ipagebox").length==0){return;}
var _index=order;
var len=$(".ipagebox").find(".ipage").length;
var orderbox=$(".ipageorder");
orderbox.html('');
for(var i=0;i<len;i++){
orderbox.append("<span></span>");
orderbox.find("span:first").addClass("cur").siblings().removeClass("cur");
}
orderbox.css({"margin-top":-orderbox.outerHeight()/2});
orderbox.children().each(function(){
$(this).click(function(){
if($(".ipagebox").is(":animated") || isMobile){return};
_index=$(this).index();
ipageMove(_index,600);
});
});
$("html,body").mousewheel(function(e,delta){
if($(".ipagebox").is(":animated") || isMobile ){return;}
if(delta<0){
_index++;
if(_index>len-1){_index=len-1;}
}else{
_index--;
if(_index<1){_index=0;}
}
ipageMove(_index,600);
});
function ipageMove(i,d){
$(".ipagebox").animate({"top":-i*100+"%"},{duration:d,complete:function(){
$(this).attr("order",i);
$(this).find(".ipage").eq(i).addClass("on");
orderbox.find("span").eq(i).addClass("cur").siblings().removeClass("cur");
}});
};
};
$(function(){
personWeb.pageInitSet();
personWeb.indexAction(0,100);
})
