浏览 6781 次
|
精华帖 (0) :: 良好帖 (1) :: 新手帖 (2) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-03-29
最后修改：2010-03-29
做项目时想省事儿写的一个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 +'"> </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
})();
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2010-04-02
不错，只是图片缩放之后的处理做些操作就更好了
|
| 返回顶楼 | |
|
发表时间：2010-04-02
给个建议, 既然用了jquery 就不要用document.getElementById 这些东西了
|
| 返回顶楼 | |
|
发表时间：2010-04-02
02221021 写道 给个建议, 既然用了jquery 就不要用document.getElementById 这些东西了
还有就是jQuery本身就有内置计算宽、高的函数，也很省事，再有就是可以设计一些可定义的参数，那样就更灵活了。 |
| 返回顶楼 | |
|
发表时间：2010-04-06
最后修改：2010-04-06
 ，感谢各位批评指正，先行谢过！
aguai0：图片缩放之后的处理还可以做哪些操作可以修改得更好呢？不好意思没太明白，麻烦你可否详细说明下。 02221021：我用jQ的时候有时候考虑运行速度的原因会插一些JS代码，也算是一种吹毛求疵吧。不过getDocumentById，那点儿速度差不算啥，下次就改过来。 
koalaxyq：jQuery本身就有内置计算宽、高的函数，是的，但是我曾经碰到过得不到数据的bug，从此留下阴影就没再用width和height这两个函数get过，只set过 ^^ 设计一些可定义的参数?恩，是的，我看了“jQuery插件开发全解析”那贴以后，决定把参数全部用options的方式可以由使用者自由定义，差不多开发完毕，再测试一下就贴出来请大家拍 
|
| 返回顶楼 | |
|
发表时间：2010-04-06
渐显动画效果不错,jquery载入没有使用google,速度显示如何？
在线任意对象渐显动画效果可看：http://www.hy2999.com/jquery/fadeoutdivDemo/ |
| 返回顶楼 | |
|
发表时间：2010-04-06
新修改完毕，现在所有参数都可由使用者定义传参使用，如果大家觉得哪个参数也可以提出来，敬请提出。
目前也发现了一些问题： 1.遮罩层透明度开放后，由本来的CSS固定定义变为使用者传参，在OP下JQ的设置无效，只能认出默认值。无法解决。 2.当图片放大后如果宽高大于当前页面，背景的遮罩需要resize。未解决。 3.图片链接为非本地时，有可能出现取不到原图片宽高的bug。未解决。 |
| 返回顶楼 | |
|
发表时间：2010-04-06
最后修改：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 +'"> </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);
|
| 返回顶楼 | |
|
发表时间：2010-05-25
IE6下的<select>问题没有考虑？
|
| 返回顶楼 | |
