做项目时想省事儿写的一个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
})();
分享到:
相关推荐
jQuery插件:警告-确认-提示弹出对话框效果_jquery_alert_dialogsjQuery插件:警告-确认-提示弹出对话框效果_jquery_alert_dialogsjQuery插件:警告-确认-提示弹出对话框效果_jquery_alert_dialogs
jquery插件库大全(200个): jqueryQQ表情插件 jquery下拉菜单导航 jquery下拉菜单栏 jquery仿Windows系统选中图标效果 jquery仿京东商品详情页图片放大效果 jquery仿百度新闻焦点轮播 jquery分离布局模版 jquery...
jQuery插件:可拖动的图片展示实例(效果超酷) jQuery插件:可拖动的图片展示实例(效果超酷)
jquery colorbox弹出层插件制作图片弹出显示代码
jquery插件jquery.reveal
jQuery插件之一:Weebox弹出层 jQuery插件之一:Weebox弹出层 jQuery插件之一:Weebox弹出层
JQuery插件:alert、confirm、prompt对话框插件
这是一款利用jQuery和CSS3实现的自定义弹出窗口,这可比浏览器默认的弹出窗口漂亮多了。弹出窗口中可以自定义html,十分灵活...另外最重要的一个特点是,它利用了jQuery和CSS3可以实现很多种弹出窗口动画效果,挺酷的。
jQuery超炫淡入淡出效果DIV渐变居中弹出框插件
jQuery弹出层插件三种简单遮罩弹出框效果
网页模板——jQuery实现滚动到网站页面底部动画弹出对话框
jQuery顶部浮动弹出层动画弹出层特效 jQuery顶部浮动弹出层动画弹出层特效 jQuery顶部浮动弹出层动画弹出层特效 jQuery顶部浮动弹出层动画弹出层特效
这是本人发布的第一个jquery插件,有什么意见可以提,我csdn博客里有使用说明.
使用jQuery插件jQuery Image Flyout弹出图片,实现javascript弹出放大图片功能只需要一行代码即可实现。 四,用户自定义设置 结合jQuery插件Easing Plugin,可增强javascript图片放大和缩小过程中图片显示的效果。 ...
更新日志2012-05-05: 修复了几个bug: 1,iframe在没有指定宽和高时默认全屏的bug 2,当iframe隐藏时的错误显示效果 3,当iframe以tab标签的方式显示时,由于tab标签切换执行也...3,ajax不支持指定对象加载效果。
jQuery插件 提示框 类似QQ新闻的弹出框 jQuery插件 提示框 类似QQ新闻的弹出框 jQuery插件 提示框 类似QQ新闻的弹出框 jQuery插件 提示框 类似QQ新闻的弹出框
jquery弹出层插件,20种弹出层,特效杠杠滴
jQuery LayerModel弹出层插件拖动弹出层效果
弹性动画效果的弹出对话框,带动画效果的浮动弹出框,一共是三种形式:弹出提示框、弹出确认对话框、弹出询问框,三种形式在弹出窗口后,网页背景变暗,同时弹跳显示出对话框,动画效果十分平滑,兼容IE浏览器,希望...