jQuery chili圖片遠處放大插件
更新時間:2009年11月30日 21:59:42 作者:
為了讓本地圖片、遠程圖片、過小的圖片都適應此插件,有很多細節(jié)問題要處理。
為了讓本地圖片、遠程圖片、過小的圖片都適應此插件,有很多細節(jié)問題要處理。
- 首先定義結構:
<div class="imgMagnifierWrap"> <div class="overlay"><!--覆蓋層,鼠標的感應區(qū)域,位于小圖上最方--></div> <div class="tipboxHover"><!--小圖上方的懸停提示方框--></div> <div class="imgOriginal"><!--裝載大圖的容器,絕對定位<img src="bigOne.jpg" /><!--前景大圖,絕對定位--></div> </div>
<!--樣式--> <style type="text/css"> .imgMagnifierWrap *{position:absolute;background:#fff;} .imgMagnifierWrap .tipboxHover{width:80px; height:60px; filter:alpha(opacity=30);opacity:.3;display:none;} .imgMagnifierWrap .imgOriginal{display:none;z-index:9999;overflow:hidden; width:400px; height:400px; background-color:#cdf; background-repeat:no-repeat; text-align:center;border:1px solid #555; } .imgMagnifierWrap .overlay{cursor:crosshair;filter:alpha(opacity=0);opacity:0;} <style>
- 然后考慮圖片預加載:
$.imgPreloader=function(url,eventLists){ var img=new Image(); var $img=$(img); img.src=url; $.each(eventLists,function(type,fn){ $img.bind(type,fn); }); $img.trigger(img.complete?'load':'begin'); return $img; };
- 再計算感應區(qū)域:
- 小圖所處感應區(qū)域四邊各減去指示方框各四邊的1/2大小的矩形,在此之外的區(qū)域則顯示到大圖邊界:
var borderLeft =thumbInfo.left+tipboxInfo.width/2; var ratioX=(mouseInfo.x-borderLeft)/(thumbInfo.width-tipboxInfo.width);
- 用大圖用做背景圖片引發(fā)的問題:
- 用隱藏的前景圖片預加載,load事件判斷時機,ie,chrome正常,ff請求了兩次圖片,圖片未緩存;
- 換一種方式,不預載大圖。改成直接在大圖位置用覆蓋層做“l(fā)oading”后,chrome下表現(xiàn)為漸進加載圖片,非chrome是直接顯示,略有遺憾。
- 最終結果,把大圖用做前景圖片:
- 優(yōu)勢在于,大圖的load和error事件都可以正常工作:
$.imgPreloader($anchor.attr('href'),{ load:function(){ isImageReady=true; $o.empty().append(this); setTimeout(autoFitPicture,0); }, begin:function(){ $o.text('loading...'); }, error:function(){ isImageReady=true; $o.text('invalid picture!'); } });
大圖預載的load事件和小圖mousemove事件不同步的解決辦法:實時存儲鼠標坐標,把提示方框定位和大圖定位的方法分離。
//鼠標位置存儲 var mouseInfo={x:0,y:0}; //指示框定位 var setTipboxPosition=function(e){ mouseInfo.x=e.pageX; mouseInfo.y=e.pageY; $tipbox.css({ top:mouseInfo.y<thumbInfo.width/2+thumbInfo.top ?Math.max(mouseInfo.y-tipboxInfo.height/2,thumbInfo.top) :Math.min(mouseInfo.y-tipboxInfo.height/2,thumbInfo.top+thumbInfo.height-tipboxInfo.height), left:mouseInfo.x<thumbInfo.width/2+thumbInfo.left ?Math.max(mouseInfo.x-tipboxInfo.width/2,thumbInfo.left) :Math.min(mouseInfo.x-tipboxInfo.width/2,thumbInfo.left+thumbInfo.width-tipboxInfo.width) }); setImgPosition(); };
隨便一提,如果有一種瀏覽器,也許會很幸運。
演示代碼
打包下載 http://www.dbjr.com.cn/jiaoben/22866.html
您可能感興趣的文章:
- 圖片放大鏡jquery.jqzoom.js使用實例附放大鏡圖標
- 關于Jqzoom的使用心得 jquery放大鏡效果插件
- 用JQuery模仿淘寶的圖片放大鏡顯示效果
- 基于Jquery插件開發(fā)之圖片放大鏡效果(仿淘寶)
- jquery圖片放大鏡功能的實例代碼
- 基于jquery的放大鏡效果
- Jquery實現(xiàn)圖片放大鏡效果的思路及代碼(自寫)
- 利用jQuery插件imgAreaSelect實現(xiàn)圖片上傳裁剪(放大縮?。?/a>
- jquery插件jquery.LightBox.js實現(xiàn)點擊放大圖片并左右點擊切換效果(附demo源碼下載)
- jQuery圖片特效插件Revealing實現(xiàn)拉伸放大
- jQuery插件zoom實現(xiàn)圖片全屏放大彈出層特效
- jquery插件珍藏(圖片局部放大/信息提示框)
- 來自國外的14個圖片放大編輯的jQuery插件整理
- 基于jQuery插件jqzoom實現(xiàn)的圖片放大鏡效果示例
相關文章
JSONP 跨域訪問代理API-yahooapis實現(xiàn)代碼
介紹一個JSONP 跨域訪問代理API-yahooapis,需要的朋友可以參考下2012-12-12基于$.ajax()方法從服務器獲取json數(shù)據(jù)的幾種方式總結
下面小編就為大家分享一篇基于$.ajax()方法從服務器獲取json數(shù)據(jù)的幾種方式總結,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01