DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery chili圖片遠處放大插件
jQuery chili圖片遠處放大插件
編輯:JQuery特效代碼     

為了讓本地圖片、遠程圖片、過小的圖片都適應此插件,有很多細節問題要處理。

首先定義結構:
 
<div class="imgMagnifierWrap"> 
<div class="overlay"><!--覆蓋層,鼠標的感應區域,位於小圖上最方--></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; 
}; 
再計算感應區域:
小圖所處感應區域四邊各減去指示方框各四邊的1/2大小的矩形,在此之外的區域則顯示到大圖邊界:
 
var borderLeft =thumbInfo.left+tipboxInfo.width/2; 
var ratioX=(mouseInfo.x-borderLeft)/(thumbInfo.width-tipboxInfo.width); 
用大圖用做背景圖片引發的問題:
用隱藏的前景圖片預加載,load事件判斷時機,ie,chrome正常,ff請求了兩次圖片,圖片未緩存;
換一種方式,不預載大圖。改成直接在大圖位置用覆蓋層做“loading”後,chrome下表現為漸進加載圖片,非chrome是直接顯示,略有遺憾。
最終結果,把大圖用做前景圖片:
優勢在於,大圖的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.jb51.net/jiaoben/22866.html

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved