jquery插件jquery.LightBox.js實現(xiàn)點擊放大圖片并左右點擊切換效果(附demo源碼下載)
本文實例講述了jquery插件jquery.LightBox.js實現(xiàn)點擊放大圖片并左右點擊切換效果。分享給大家供大家參考,具體如下:
該插件乃文章作者所寫,目的在于提升作者的js能力,也給一些js菜鳥在使用插件時提供一些便利,老鳥就悠然地飛過吧。
此插件旨在實現(xiàn)目前較為流行的點擊放大圖片并左右點擊切換圖片的效果,您可以根據(jù)自己的實際需求來設(shè)置是否添加左右切換圖片的效果。整體代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標(biāo)題文檔</title> <style> *{margin:0;padding:0;} li{list-style:none;} .item{margin:20px;} .item ul li{float:left;margin-right:20px;} .item ul li img{width:100px;cursor:pointer;} .lb_wrap{display:none;} .lightbox_bg{background:#000;filter:alpha(opacity=70);opacity:.7;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;} .lightbox{position:absolute;left:0;top:50%;width:100%;z-index:2;text-align:center;} .lightbox p{position:absolute;height:61px;width:38px;top:50%;left:0;z-index:2;background:transparent url(themes.png) no-repeat left top;margin-top:-30.5px;cursor:pointer;} .lightbox p.next{left:auto;background-position:right top;right:0;} </style> <script type="text/javascript" src="jquery-1.7.1.js"></script> <script type="text/javascript" src="jquery.LightBox.js"></script> </head> <body> <div class="item"> <ul> <li><img src="01.jpg" /></li> <li><img src="02.jpg" /></li> <li><img src="03.jpg" /></li> <li><img src="04.jpg" /></li> <li><img src="05.jpg" /></li> <li><img src="06.jpg" /></li> </ul> </div> <script> $(function(){ $(".item").LightBox({ controls : true //上一張、下一張按鈕是否顯示,默認(rèn)是顯示true }); }) </script> </body> </html>
插件jquery.LightBox.js代碼:
/* *LightBox 1.0 *dependence jquery-1.7.1.js */ ;(function(a){ a.fn.LightBox = function(options){ var defaults = { controls : true //上一張、下一張按鈕是否顯示,默認(rèn)是顯示true } var opts = a.extend(defaults, options); var lb_wrap = '<div class="lb_wrap"><div class="lightbox_bg"></div><div class="lightbox"><img src="loading.gif" class="lg_img"></div></div>'; a("body").append(lb_wrap); //controls if(opts.controls){ a(".lightbox").append('<p class="prev"></p><p class="next"></p>'); } function imgobj(obj1, obj2){ //imgObj.height是通過img對象獲取的圖片的實際高度 var imgObj = new Image(); imgObj.src = obj1.attr("src"); var margintop = 0 - (imgObj.height)/2; obj2.css("margin-top",margintop); } this.each(function(){ var obj = a(this); var numpic = obj.find("li").length; var num = 0; //點擊賦值并顯示 obj.find("img").click(function(){ var src = a(this).attr("src"); a(".lg_img").attr("src",src); imgobj(a(".lg_img"), a(".lightbox")); a(".lb_wrap").fadeIn(); a(".lg_img").fadeIn(); a(".prev").fadeIn().siblings(".next").fadeIn(); num = a(this).parent().index(); //獲取當(dāng)前圖片的父元素的索引并賦給num為后邊點擊上一張、下一張服務(wù) }); //上一張 a(".prev").click(function(){ if(num == 0){ num = numpic; } var src = obj.find("li").eq(num-1).find("img").attr("src"); a(".lg_img").attr("src",src); imgobj(a(".lg_img"), a(".lightbox")); num--; }); //下一張 a(".next").click(function(){ if(num == numpic-1){ num = -1; } var src = obj.find("li").eq(num+1).find("img").attr("src"); a(".lg_img").attr("src",src); imgobj(a(".lg_img"), a(".lightbox")); num++; }); //點擊除了上一張、下一張之外的其他地方隱藏 a(".lb_wrap").click(function(e){ var e = e || window.event; var elem = e.target || e.srcElement; while(elem){ if (elem.className && elem.className.indexOf('prev')>-1) { return; } if(elem.className && elem.className.indexOf('next')>-1){ return; } elem = elem.parentNode; } a(this).find("img").attr("src","loading.gif").hide(); //隱藏后,再將默認(rèn)的圖片賦給lightbox中圖片的src a(this).find(".prev").hide().siblings(".next").hide(); a(this).fadeOut(); }); }) } })(jQuery);
完整實例代碼點擊此處本站下載。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
- jQuery實現(xiàn)等比例縮放大圖片讓大圖片自適應(yīng)頁面布局
- 基于jquery的防止大圖片撐破頁面的實現(xiàn)代碼(立即縮放)
- jQuery+css實現(xiàn)的點擊圖片放大縮小預(yù)覽功能示例【圖片預(yù)覽 查看大圖】
- jQuery實現(xiàn)鼠標(biāo)滑過商品小圖片上顯示對應(yīng)大圖片功能【測試可用】
- jQuery實現(xiàn)鼠標(biāo)滑過預(yù)覽圖片大圖效果的方法
- jQuery實現(xiàn)大圖輪播
- jQuery實現(xiàn)的小圖列表,大圖展示效果幻燈片示例
- jQuery實現(xiàn)點擊小圖片淡入淡出顯示大圖片特效
- jQuery實現(xiàn)點擊查看大圖并以彈框的形式居中
- 基于jQuery插件實現(xiàn)點擊小圖顯示大圖效果
- jquery實現(xiàn)移動端點擊圖片查看大圖特效
- jQuery實現(xiàn)點擊小圖顯示大圖代碼分享
- jquery 圖片點擊放大預(yù)覽功能詳解
相關(guān)文章
關(guān)于webuploader插件使用過程遇到的小問題
這篇文章主要為大家詳細(xì)解決了關(guān)于webuploader插件使用過程遇到的小問題,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-11-11BootStrap網(wǎng)頁中代碼顯示<code><pre>用法詳解
網(wǎng)頁中代碼的顯示,包括行中代碼顯示;成段的代碼顯示.本文給大家介紹bootstrap網(wǎng)頁中代碼顯示<code><pre>用法詳解,感興趣的朋友一起看看吧2016-10-10jquery自定義插件——window的實現(xiàn)【示例代碼】
下面小編就為大家?guī)硪黄猨query自定義插件——window的實現(xiàn)【示例代碼】。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考2016-05-05jQuery validate 中文API 附validate.js中文api手冊
jQuery validate 中文API 附validate.js中文api手冊2010-07-07jQuery查找和過濾_動力節(jié)點節(jié)點Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了jQuery查找和過濾的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07jquery keypress,keyup,onpropertychange鍵盤事件
項目所需,在試圖用js實現(xiàn)這樣的功能:文本框失去焦點時,判斷輸入字符串的長度,以驗證是否超出范圍,超出范圍則自動截取。2010-06-06jQuery EasyUI中的日期控件DateBox修改方法
下面小編就為大家?guī)硪黄猨Query EasyUI中的日期控件DateBox修改方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11jQuery 出現(xiàn)Cannot read property ‘msie’ of undefined錯誤的解決方法
這篇文章主要介紹了jQuery 出現(xiàn)Cannot read property ‘msie’ of undefined錯誤的解決方法的相關(guān)資料,需要的朋友可以參考下2016-11-11