整屏切换效果

最新推荐文章于 2025-05-30 10:33:24 发布

转载最新推荐文章于 2025-05-30 10:33:24 发布 · 196 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/walk-on-the-way/p/5992120.html

文章标签：

#javascript #移动开发 #ViewUI

jquery中有整屏切换的插件，各种效果都有，自己在做个人网站的时候用到了整屏切换，就试着写了一下，方便以后使用。

需要引用的插件

<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);
})

转载于:https://www.cnblogs.com/walk-on-the-way/p/5992120.html