演示用,多页面动态切换多个URL地址

//设置好要播放的地址
fancyWindows.setUrls([
'http://www.nanhai.gov.cn/cms/sites/nh_ggzy/ipad/index_zfcg.html',
'http://www.nanhai.gov.cn/cms/sites/nh_ggzy/ipad/index_gczb.html',
'http://www.nanhai.gov.cn/cms/sites/nh_ggzy/ipad/index_tdjy.html'
]);
fancyWindows.play();

var fancyWindows = {
	//每隔5秒切换
	duration:1600,
	//窗口归隐速度
	hideSpeed:1000,
	//当前切换的窗口序号
	windowIndex:0,
	//每个窗口的宽度
	windowWidth:window.innerWidth,
	//每个窗口的高度
	windowHeight: window.innerHeight,
	_urls:[],
	//设置要加载的URL地址列表
	setUrls:function(list){
		this._urls = list;
	},
	_init:function(){
		for(var i=0;i';
			$('.fancy-wrapper').append(iframe);
			$('.fancy-win').eq(i).hide();
		}
		$('.fancy-win').height(this.windowWidth);
		$('.fancy-wrapper').height(this.windowHeight);
		$('.fancy-win').eq(0).show();
	},
	play:function(){
		var $this = this;
		this._init();
		window.setInterval(function(){
			fancyWindows.animatePlay();
		},this.duration);
	},
	//隐藏效果
	_getHideEffect:function() {
		var w = this.windowWidth;
		var h = this.windowHeight;
		var list = [
			{'margin-left':w},
			{'margin-left':-w},
			{'margin-top':-h},
			{'margin-top':h},
			{'left':w,'top':h},
			{'left':-w,'top':-h},
			{'width':0,'height':0},
			{'opacity':0}
			//'rotate'
		];
		var index = parseInt(Math.random()*list.length);
		return list[index];
	},
	//显示效果
	_getShowEffect:function(){
		//'swing','bounce','shake','jello',
		var list = ['fadeInUp','fadeInLeft','flipInY','flipInX','rotateIn','zoomIn','zoomInDown'];
		var index = parseInt(Math.random()*list.length);
		return list[index];
	},
	//动画播放
	animatePlay:function(){
		var $this = this;
		if(this.windowIndex >= this._urls.length){
			this.windowIndex = 0;
		}
		var nextIndex = this.windowIndex + 1;
		if(nextIndex>=this._urls.length){
			nextIndex = 0;
		}
		//显示层次关系
		$('.fancy-win').eq(this.windowIndex).css('z-index',1);
		$('.fancy-win').eq(nextIndex).css('z-index',0).show();
		var x = this._getShowEffect();
		$('.fancy-win').eq(nextIndex).removeClass().addClass(x + ' animated fancy-win').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
	        $(this).removeClass().addClass('fancy-win');
	    });
		$('.fancy-win').eq(this.windowIndex).animate(this._getHideEffect(),$this.speed,function(){
				$(this).css({'margin':0,'left':0,'top':0,'width':$this.windowWidth,'height':$this.windowHeight,'opacity':1}).hide();
				$this.windowIndex++;
			}
		); 
	}
};

演示地址:http://www.tapy.org/fancywin


相关评论

暂无评论

我要评论