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

qesc

浏览: 1291 次
性别:
来自: 北京

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1)

社区版块

存档分类

2010-03 ( 1)
更多存档...

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

jQuery CSS 浏览器设计模式 Google

做项目时想省事儿写的一个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
})();

demo.rar (125.9 KB)
下载次数: 871

分享到：

2010-03-29 15:39
浏览 1291
评论(8)
论坛回复 / 浏览 (8 / 6781)
分类:Web前端
查看更多

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

不错，只是图片缩放之后的处理做些操作就更好了

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客更多访客>>