`
qesc
  • 浏览: 1235 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
文章分类
社区版块
存档分类

尝试一下写的一个JQuery插件:给任意触发物件加上弹出任意对象渐显动画效果

阅读更多
做项目时想省事儿写的一个JQ插件,新手练习,敬请拍砖斧正。

简介:给一个对象绑定点击函数,可以动画居中渐显弹出任意一个别的对象(当然是在当前页面中的,是否隐藏无所谓)。点击后弹出遮罩和对象,关闭后的DOM结构与点击前一样,释放所有资源。可任意绑定多个对象。

代码中亦有注解,有演示文件附件下载。

;(function(){
 /*
	说明:
	给任意触发物件加上弹出任意对象渐显动画效果,弹出位置为物件原始位置,自动遮罩,自动渐显,自动屏幕居中。宽高和时间可控。
	一般用作图片显示,如有其它用途,简单修改即可,理论上兼容所有浏览器,硬盘和内存占用均较低
	
	参数:
	triggerId  触发点ID,没有则返回
	resourcId  原始资源ID
	popW  弹出后的宽,默认为图片显示宽
	popH  弹出后的高,默认为图片显示高
	dure  弹出时间, 默认为1000毫秒
	closeId  关闭对象的ID,默认为关闭按钮


	DEMO:
	$.fadeOutDiv('pictureId', 'pictureId', 200, 200, 'fast');
	$.fadeOutDiv('triggerId', 'pictureId', 640, 480, 'slow', 'popup_div');
*/

	// 如果之前没有引用jQuery则弹出提示并退出
	if ( window.jQuery ){

		jQuery.extend({
			fadeOutDiv: function(triggerId, srcId, popW, popH, dure, closeId){

				if( !document.getElementById(triggerId) || !document.getElementById(srcId)){return false;}


	/* 可修改参数区域:如必要,可根据具体情况自行修改 */
				var maskId = 'div_bgmask';		// 遮罩层ID
				var popupBgId = 'popup_bgdiv';	// 弹出层ID
				var popupCntId = 'popup_cnt';	// 弹出层中容器ID
				var popupImgId = 'popup_img';	// 弹出层中图片ID
				var popupDivId = 'popup_div';	// 弹出层中DIV的ID
				var popupBorderW = 23;			// 弹出层的边框宽度(双边)
				var popupBorderH = 31;			// 弹出层的边框高度(双边)
				var btnCloseId = 'btn_close';	// 弹出层关闭按钮ID
				var zindex = 499;				// 弹出层的Z-index


				// 遮罩层语句
				var bgmask = '<div id="'+ maskId +'" class="plugin_fadeoutdiv_mask" style="display:none"></div>';
				// 弹出层语句
				var divpopup = '<div class="plugin_fadeoutdiv" id="'+ popupBgId +'" style="position:absolute;display:none;"><span><b id="'+ btnCloseId +'">&nbsp;</b><div class="clear"></div><div id="'+ popupCntId +'"><img id="'+ popupImgId +'" src="" /></div></span></div>';
	/*可修改参数区域结束*/


				var navW = document.documentElement.clientWidth;	// 浏览器可见区域宽
				var navH = document.documentElement.clientHeight;	// 浏览器可见区域高
				var srcW = document.getElementById(srcId).offsetWidth;	// 弹出物件的原始宽
				var srcH = document.getElementById(srcId).offsetHeight;	// 弹出物件的原始高
				var tigW = document.getElementById(triggerId).offsetWidth;	// 触发物件的原始宽
				var tigH = document.getElementById(triggerId).offsetHeight;	// 触发物件的原始高
				var tigT, tigL;	// 触发物件的原始相对位置

				var popW = popW || srcW;
				var popH = popH || srcH;
				var dure = dure || 1000;
				var closeId = closeId || btnCloseId;


				// 弹出层动画效果显示函数
				var animaShowPopup = function(){

					$('body').append(bgmask).append(divpopup);
					document.getElementById(maskId).style.zIndex = zindex;
					document.getElementById(popupBgId).style.zIndex = zindex;
				

					// 得到浮动元素相对整个页面的TOP和LEFT
					(function(){
						var obj = document.getElementById(triggerId);
						tigT = obj.offsetTop;	tigL = obj.offsetLeft;
						
						while( obj = obj.offsetParent ){
							 tigT += obj.offsetTop;	tigL += obj.offsetLeft;
						 }
					})();
					var scrolTop = document.documentElement.scrollTop;	// 当前滚动条上卷距离
					var bgW = document.body.scrollWidth;		// 得到全页面宽
					var bgH = document.body.scrollHeight;		// 得到全页面高

					$('#'+maskId).width(bgW).height(bgH).show();
					$('#'+popupCntId).addClass('plugin_fadeoutdiv_cnt');
					var tagSrc = (document.getElementById(srcId).tagName).toLowerCase();


					switch(tagSrc){
						case	'object':	// object对象或应单独处理
							break;
						case	'img':		// 弹出对象为图片
							var conteSrc = $('#'+srcId).attr('src') || '';	// 得到图片原始文件路径
							$('#'+popupImgId).attr('src',conteSrc).css({width:tigW, height:tigH});
							var act = popupImgId;
							break;
						case	'div':		// 默认弹出对象为DIV
						default:
							$('#'+srcId).clone().replaceAll('#'+popupImgId).attr('id', popupDivId).css({border:'none'}).addClass('plugin_fadeoutdiv_div');
							var act = popupDivId;
							break;
					}// end switch
					$('#'+popupBgId).css({top:tigT-popupBorderH/2,left:tigL-popupBorderW/2}).animate({top:(navH-popH-popupBorderH)/2+scrolTop,left:(navW-popW-popupBorderW)/2, opacity:'show' }, dure);
					$('#'+act).animate({width:popW, height:popH }, dure );					


					
					// 弹出浮动层动画效果隐藏函数
					var animaHidePopup = function(){
						switch(tagSrc){
							case	'img':		// 弹出对象为图片
								var act = popupImgId;
								break;

							case	'div':
							case	'object':	// object对象或应单独处理?
							default:		// 默认弹出对象为DIV
								var act = popupDivId;
							break;
						}// end switch
						$('#'+popupBgId).animate({top:tigT-popupBorderH/2, left:tigL-popupBorderW/2, opacity:'hide' }, dure);
						$('#'+act).animate({width:tigW, height:tigH }, dure,
							function(){	$('#'+maskId).remove();	$('#'+popupBgId).remove();
						});
					};// end function animaHidePopup
					$('#'+closeId).css({'cursor':'pointer'}).click(animaHidePopup);

				};// end function animaShowPopup
				$('#'+triggerId).css({'cursor':'pointer'}).click(animaShowPopup);

			}// end function fadeoutdiv
		});

	} else {	// 未加载jQuery

		alert('Lib jQuery not included !!!');
		return false;

	}



// end jQuery fadeOutDiv Plugin
})();
分享到:
评论
8 楼 riasky 2010-05-25  
IE6下的<select>问题没有考虑?
7 楼 qesc 2010-04-06  
;(function($){

 /*
	说明:
	给任意物件绑定点击函数,点击后弹出任意对象渐显动画效果,弹出位置为物件原始位置,自动遮罩,自动渐显,自动屏幕居中,宽高和时间可控。关闭后自动清除所用资源。
	一般用作图片显示,如有其它用途,简单修改即可

	特点:
	理论上兼容所有浏览器,硬盘和内存占用均较低
	
	参数:
	trigerId	触发对象ID,必须存在
	showerId	渐显对象ID,默认为触发对象
	closerId	控制关闭的对象ID
	showW		显示宽度,默认为触发对象宽度
	showH		显示高度,默认为触发对象高度
	dure		动画持续时间, 默认为普通模式
	zindex		弹出层的z-index值,默认为499
	bgColor		遮罩层背景色,默认为黑色
	bgOpac		遮罩层透明度,默认为0.7
	其他参数一般不用改,除非与页面中的标签ID产生冲突
	遮罩层和弹出层定义也都开放,如需要可自行定义


	DEMO:
	$.fadeOutDiv({trigerId:'pictureId',});
	$.fadeOutDiv({trigerId:'pictureId', showW:200, showH:200, dure:'fast'});
	$.fadeOutDiv({trigerId:'trigerId', showerId:'pictureId', shouW:640, showH:480, dure:'slow', closerId:'popup_cnt'});
*/

	if ( window.jQuery ){

		$.extend({
			fadeOutDiv: function(options){

				var df = {     
					trigerId: null,			// 触发对象	
					showerId: null,			// 显示对象
					closerId: null,			// 触发关闭的对象
					showW	: null,			// 显示宽度
					showH	: null,			// 显示高度
					dure	: 'normal',		// 动画持续时间
					zindex	: 499,			// 弹出层的z-index
					bgColor	: 'black',		// 遮罩背景色
					bgOpac	: '0.7',		// 遮罩透明度

					popupMaskId	: 'div_bgmask',		// 遮罩层ID
					popupBgId	: 'popup_bgdiv',	// 弹出层ID
					popupCntId	: 'popup_cnt',	// 弹出层中容器ID
					popupImgId	: 'popup_img',	// 弹出层中图片ID
					popupDivId	: 'popup_div',	// 弹出层中DIV的ID
					popupBtnId	: 'popup_btn',	// 弹出层中关闭按钮ID
					popupBorderW: 23,			// 弹出层的边框宽度(双边)
					popupBorderH: 31,			// 弹出层的边框高度(双边)
					bgmask:	null,		// 遮罩层语句
					divpopup:null		// 弹出层语句

				};     
				// 输入的参数覆盖默认值     
				$.extend(df, options);

				// 触发对象不存在则退出
				if( !document.getElementById(df.trigerId) ){return false;}
				// 显示对象如不存在,则修正为触发对象
				if( !document.getElementById(df.showerId) ){df.showerId = df.trigerId;}
				// 遮罩层语句处理
				df.bgmask	= df.bgmask || '<div id="'+ df.popupMaskId +'" class="plugin_fadeoutdiv_mask" style="display:none"></div>';
				// 弹出层语句处理
				df.divpopup	= df.divpopup || '<div class="plugin_fadeoutdiv" id="'+ df.popupBgId +'" style="position:absolute;display:none;"><span><b id="'+ df.popupBtnId +'">&nbsp;</b><div class="clear"></div><div id="'+ df.popupCntId +'"><img id="'+ df.popupImgId +'" src="" /></div></span></div>';


				var navW = document.documentElement.clientWidth;	// 浏览器可见区域宽
				var navH = document.documentElement.clientHeight;	// 浏览器可见区域高

				var tigW = document.getElementById(df.trigerId).offsetWidth;	// 触发物件的原始宽
				var tigH = document.getElementById(df.trigerId).offsetHeight;	// 触发物件的原始高
				var srcW = document.getElementById(df.showerId).offsetWidth;	// 弹出物件的原始宽
				var srcH = document.getElementById(df.showerId).offsetHeight;	// 弹出物件的原始高
				var tigT, tigL;	// 触发物件的原始相对位置

				var popW = df.showW || srcW;
				var popH = df.showH || srcH;


				// 浮动层动画效果显示函数
				var animaShowPopup = function(){

					$('body').append(df.bgmask).append(df.divpopup);
					document.getElementById(df.popupMaskId).style.zIndex = df.zindex;
					document.getElementById(df.popupBgId).style.zIndex = df.zindex;
				

					// 动态得到触发对象相对整个页面的TOP和LEFT
					(function(){
						var obj = document.getElementById(df.trigerId);
						tigT = obj.offsetTop;	tigL = obj.offsetLeft;
						
						while( obj = obj.offsetParent ){
							 tigT += obj.offsetTop;	tigL += obj.offsetLeft;
						 }
					})();

					var scrolTop = document.documentElement.scrollTop;	// 当前滚动条上卷距离
					var bgW = document.body.scrollWidth;		// 得到全页面宽
					var bgH = document.body.scrollHeight;		// 得到全页面高


					$('#'+df.popupMaskId).css({width:bgW, height:bgH, background:df.bgColor, opacity:df.bgOpac}).show();
					$('#'+df.popupCntId).addClass('plugin_fadeoutdiv_cnt');
					var tagSrc = (document.getElementById(df.showerId).tagName).toLowerCase();


					switch(tagSrc){
						case	'img':		// 弹出对象为图片
							var conteSrc = $('#'+df.showerId).attr('src') || '';	// 得到图片原始文件路径
							$('#'+df.popupImgId).attr('src',conteSrc).css({width:tigW, height:tigH});
							var act = df.popupImgId;
							break;
						case	'object':	// object对象或应单独处理?
						case	'div':		// 默认弹出对象为div
						default:
							$('#'+df.showerId).clone().replaceAll('#'+df.popupImgId).attr('id', df.popupDivId).css({border:'none'}).addClass('plugin_fadeoutdiv_div');
							var act = df.popupDivId;
							break;
					}// end switch

					$('#'+df.popupBgId).css({top:tigT-df.popupBorderH/2,left:tigL-df.popupBorderW/2}).animate({top:(navH-popH-df.popupBorderH)/2+scrolTop,left:(navW-popW-df.popupBorderW)/2, opacity:'show' }, df.dure);
					$('#'+act).animate({width:popW, height:popH }, df.dure);					


					
					// 浮动层动画效果隐藏函数
					var animaHidePopup = function(){

						switch(tagSrc){
							case	'img':		// 弹出对象为图片
								var act = df.popupImgId;
								break;
							case	'object':	// object对象或应单独处理?
							case	'div':
							default:		// 默认弹出对象为DIV
								var act = df.popupDivId;
							break;
						}// end switch

						$('#'+df.popupBgId).animate({top:tigT-df.popupBorderH/2, left:tigL-df.popupBorderW/2, opacity:'hide' }, df.dure);
						$('#'+act).animate({width:tigW, height:tigH }, df.dure,
							function(){	$('#'+df.popupMaskId).remove();	$('#'+df.popupBgId).remove();} );
					};// end function animaHidePopup
					// 关闭对象如不存在,则自动修正为按钮关闭
					if( !document.getElementById(df.closerId) ){df.closerId = df.popupBtnId;}
					$('#'+df.closerId).css({'cursor':'pointer'}).click(animaHidePopup);

				};// end function animaShowPopup
				$('#'+df.trigerId).css({'cursor':'pointer'}).click(animaShowPopup);

			}// end function fadeoutdiv
		});

	} else {	// 未加载jQuery则警示退出

		alert('Lib jQuery not included !!!');
		return false;

	}



// end jQuery fadeOutDiv Plugin
})(jQuery);
6 楼 qesc 2010-04-06  
新修改完毕,现在所有参数都可由使用者定义传参使用,如果大家觉得哪个参数也可以提出来,敬请提出。

目前也发现了一些问题:
1.遮罩层透明度开放后,由本来的CSS固定定义变为使用者传参,在OP下JQ的设置无效,只能认出默认值。无法解决。
2.当图片放大后如果宽高大于当前页面,背景的遮罩需要resize。未解决。
3.图片链接为非本地时,有可能出现取不到原图片宽高的bug。未解决。
5 楼 wing5jface 2010-04-06  
渐显动画效果不错,jquery载入没有使用google,速度显示如何?
在线任意对象渐显动画效果可看:http://www.hy2999.com/jquery/fadeoutdivDemo/
4 楼 qesc 2010-04-06  
,感谢各位批评指正,先行谢过!

aguai0:图片缩放之后的处理还可以做哪些操作可以修改得更好呢?不好意思没太明白,麻烦你可否详细说明下。

02221021:我用jQ的时候有时候考虑运行速度的原因会插一些JS代码,也算是一种吹毛求疵吧。不过getDocumentById,那点儿速度差不算啥,下次就改过来。

koalaxyq:jQuery本身就有内置计算宽、高的函数,是的,但是我曾经碰到过得不到数据的bug,从此留下阴影就没再用width和height这两个函数get过,只set过 ^^
设计一些可定义的参数?恩,是的,我看了“jQuery插件开发全解析”那贴以后,决定把参数全部用options的方式可以由使用者自由定义,差不多开发完毕,再测试一下就贴出来请大家拍
3 楼 koalaxyq 2010-04-02  
02221021 写道
给个建议, 既然用了jquery 就不要用document.getElementById 这些东西了


 还有就是jQuery本身就有内置计算宽、高的函数,也很省事,再有就是可以设计一些可定义的参数,那样就更灵活了。
2 楼 02221021 2010-04-02  
给个建议, 既然用了jquery 就不要用document.getElementById 这些东西了
1 楼 aguai0 2010-04-02  
不错,只是图片缩放之后的处理做些操作就更好了

相关推荐

Global site tag (gtag.js) - Google Analytics