阿嚏~~~
話說本屌絲沒啥開發插件的經驗，可是天公不作美，公司須要讓我自己開發個圖片放大的插件
但公司老大的話，宛如吾皇之圣旨，微臣必當肝腦涂地。莫敢不從啊~~~
于是乎，作為一個超級小白。本人僅僅能瞎研究了，幸好黑天不負屌絲人。本屌絲最終搞出來了。盡管不盡善盡美，可是功能還是能夠用的啦
先附上源代碼。求各種大神指導：
/******************************** 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){//假設設置顯示關閉button。則顯示 $.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(){//圖片關閉button var $close = $('<a></a>');//關閉button $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){//假設設置顯示關閉button $("#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要小于圖片層的zIndex autoresize:true }; })(jQuery);
附張效果圖：
邏輯非常easy，由于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});
一看名字就明確了，分別代表顯示關閉button（ps：關閉button的圖標自己搞。我這就沒上傳了。去找你們親愛的美工妹妹要把，送給你一個跟美工妹妹親親我我的機會，感動吧！）、顯示title，就是在圖片以下有句話，對這個圖片做個簡介、速度，單位毫秒，自己體驗吧~~
眼下僅僅是1.0版。本人也菜鳥一枚，歡迎高手們給本菜鳥指導下。不勝感激！
有不論什么疑問或不吝賜教。請加本屌絲QQ：1740437
同一時候，有喜歡民樂。愛好古風。愛好拍攝逗逼微電影的，也能夠和本屌絲做個朋友。哇嘎嘎~~~
第七天（1）)
第七天（2）)
)
