自寫圖片遮罩層放大功能jquery外掛程式源碼，photobox.js 1.0版，不相容IE6

標籤：圖片放大   遮罩層   jquery外掛程式開發   photobox   

阿嚏~~~

話說本屌絲沒啥開發外掛程式的經驗，但是天公不作美，公司需要讓我自己開發個圖片放大的外掛程式

但公司老大的話，猶如吾皇之聖旨，微臣必當肝腦塗地，莫敢不從啊~~~

於是乎，作為一個超級小白，本人只能瞎研究了，幸好黑天不負屌絲人，本屌絲終於搞出來了，雖然不盡善盡美，但是功能還是可以用的啦

先附上源碼，求各種大神指導：

/******************************* * photobox跨瀏覽器安全色外掛程式 v1.0（不支援IE6） * 格式：<a href="big.jpg" id="b1" title="我就是一坨屎，你來咬我啊！"><img src="small.jpg"></a>///$("#b1").photobox(); *******************************/;(function($){    $.fn.photobox = function(options){var opts = $.extend({}, $.fn.photobox.defaults, options);//整合參數return this.each(function(){$(this).click(function(){if(opts.showshadow){//如果設定顯示陰影遮罩層，則顯示$.fn.photobox.shadow(opts.shadowOptions);}if(opts.showbox){//如果設定顯示圖片邊框，則顯示$.fn.photobox.box();}if(opts.showclosebtn){//如果設定顯示關閉按鈕，則顯示$.fn.photobox.closebtn();}var $this = $(this);var imgSrc = $this.attr("href");var title = $this.attr("title");var bigImg = new Image();//用js來擷取圖片高度和寬度bigImg.src = imgSrc;var h = bigImg.height;var w = bigImg.width;var $bigphoto = $('<img src="'+imgSrc+'" rel="photobox">');var wh = $(window).height();var ww = $(window).width();$bigphoto.css({"width":"0px" , "height":"0px","z-index":"10000","opacity":0});$("#pb_box").append($bigphoto);if(opts.showtitle){//顯示title$.fn.photobox.title(title);}//大家一起show$("#boxshadow").stop(true).fadeIn(opts.speed);var title_h = 0;title_h = opts.showtitle ? 20 : 0 ;$("#pb_box").stop(true).animate({"width":w+"px","height":h+title_h+"px","top":parseInt((wh-h-title_h)/2)+"px","left":parseInt((ww-w)/2)+"px","opacity":1},opts.speed);if(opts.showclosebtn){$("#pb_closebtn").stop(true).animate({"width":"31px","height":"32px","opacity":1},opts.speed);}$bigphoto.stop(true).animate({"width":w+"px","height":h+"px","opacity":1},opts.speed);if(opts.showtitle){$("#pb_phototitle").stop(true).animate({"height":"20px","width":w+"px","opacity":1},opts.speed);}$.fn.photobox.close();$.fn.photobox.resize();return false;//防止a標籤跳轉});});     };$.fn.photobox.shadow = function(options){//添加背景陰影遮罩層var shadowOptions = {"width":"100%","height":"100%","position":"fixed","top":"0","left":"0","display":"none"};var $boxshadow=$('<div></div>');$boxshadow.attr({"id":"boxshadow"});$boxshadow.css(shadowOptions);$boxshadow.css(options);$("body").append($boxshadow);};$.fn.photobox.box = function(){var wh = $(window).height();var ww = $(window).width();var $box = $('<div></div>');//包裹圖片的div$box.attr({"id":"pb_box"});$box.css({"background-color": "#fff","padding": "10px","position": "fixed","opacity": "0","width": "0px","height":" 0px","top": parseInt(wh/2)+"px","left":parseInt(ww/2)+"px","z-index":10000});$("body").append($box);};$.fn.photobox.closebtn = function(){//圖片關閉按鈕var $close = $('<a></a>');//關閉按鈕$close.attr({"id":"pb_closebtn"});$close.css({"background": "url('css/web/images/close.png')","position": "absolute","opacity": "0","width": "0px","height":" 0px","top": "-15px","right":"-15px","z-index":10000});$("#pb_box").append($close);};$.fn.photobox.title = function(title){var $title = $('<span></span>');//圖片title$title.attr({"id":"pb_phototitle"});$title.css({"line-height":"20px","color":"#1e2024","text-align":"center"});$title.html(title);$("img[rel='photobox']").after($title);};$.fn.photobox.close = function(){$("#boxshadow,#pb_closebtn").click(function(){var wh = $(window).height();var ww = $(window).width();$("#boxshadow").fadeOut($.fn.photobox.defaults.speed,function(){$(this).remove();});$("#pb_box").animate({"width":"20px","height":"20px","top":parseInt(wh/2)+"px","left":parseInt(ww/2)+"px","opacity":0},$.fn.photobox.defaults.speed,function(){$(this).remove();});$("img[rel='photobox']").animate({"width":"0px","height":"0px","opacity":0},$.fn.photobox.defaults.speed,function(){$(this).remove();});if(opts.showclosebtn){//如果設定顯示關閉按鈕$("#pb_closebtn").stop(true).animate({"width":"0px","height":"0px","opacity":0},$.fn.photobox.defaults.speed,function(){$(this).remove();});}if(opts.showtitle){$("#pb_phototitle").stop(true).animate({"height":"0px","width":"0px","opacity":0},$.fn.photobox.defaults.speed,function(){$(this).remove();});}});};$.fn.photobox.resize = function(){$(window).resize(function(){if($("body").has($("#pb_box"))){var wh = $(window).height();var ww = $(window).width();var h = $("#pb_box").height();var w = $("#pb_box").width();$("#pb_box").stop(true).animate({'top':(wh-h)/2 +'px','left':(ww-w)/2 +'px'},100);}});};$.fn.photobox.defaults = {showclosebtn:true,showtitle:true,speed:400,//以下參數暫時不允許使用者修改showshadow:true,showbox:true,showoverlay:true,//此功能暫未開放shadowOptions:{ "background-color": "#000", "opacity": 0.6 , "z-index": 9999},//遮罩層的zIndex要小於圖片層的zIndexautoresize:true};})(jQuery);

附張：

邏輯很簡單，因為IE6比較屎，現在絕大多數開發也不考慮他了，so，本屌絲也沒考慮他，以後會不斷完善，如何使用，請上觀js頂部豬屎

格式：<a href="big.jpg" id="b1" title="我就是一坨屎，你來咬我啊！"><img src="small.jpg"></a>///$("#b1").photobox();

參數傳遞，目前只能傳遞三個參數，多了這貨也不弔你，為了省事，我把css樣式都寫在js裡面了，以後會都提出來，使代碼更規範。

$("#b1").photobox({showclosebtn:true,showtitle:true,speed:500});

一看名字就明白了，分別代表顯示關閉按鈕（ps：關閉按鈕的表徵圖自己搞，我這就沒上傳了，去找你們親愛的美工妹妹要把，送給你一個跟美工妹妹親親我我的機會，感動吧！）、顯示title，就是在圖片下面有句話，對這個圖片做個簡單介紹、速度，單位毫秒，自己體驗吧~~

目前只是1.0版，本人也菜鳥一枚，歡迎高手們給本菜鳥指導下，不勝感激！

有任何疑問或指教，請加本屌絲QQ：1740437

同時，有喜歡國樂，愛好古風，愛好拍攝逗逼微電影的，也可以和本屌絲做個朋友，哇嘎嘎~~~