簡單圖片縮放外掛程式 CSS & jQuery

網上找到的一個不錯的外掛程式叫Zoomy
是一個非常容易實現的jQuery外掛程式，它可以實現映像放大的功能。除了縮圖以外還需要一張原始大小的圖片。這邊焦點部分使用了CSS3技術，如果是IE使用者可能看到焦點形狀不是圓形，另外圖片還有個載入效果。

 

瀏覽地址：

http://www.sunflowamedia.com/web-design/examples/jquery/20110125/

 

Step1. 建立HTML

<p id="zoomy"><a class="zoom" href="images/lucyZoom.jpg" mce_href="images/lucyZoom.jpg"><img src="images/lucyTn.jpg" mce_src="images/lucyTn.jpg" /></a></p>

 

Step2. 建立CSS

 

#zoomy {<br />width: 500px;<br />margin: 0 auto;<br />border: 1px solid #2d353f;<br />padding: 5px;<br />}<br />.zoomy{<br />position: absolute;<br />display: none;<br />background-repeat: no-repeat;<br />-webkit-box-shadow: 3px 3px 10px #000;<br />-moz-box-shadow: 3px 3px 10px #000;<br />border: 0;<br />cursor: url(../images/blank.gif), move;<br />line-height: 100px;<br />text-align: center;<br />background-image: url(../images/loading.gif);<br />background-position: center;<br />background-color: #fff;<br />z-index: 1000;<br />}<br />.zoomy span{<br />display: block;<br />margin: 10px auto;<br />background:-webkit-gradient(linear, 0% 100%, 0% 0%, color-stop(0.50, rgba(255, 255, 255, 0)), to( rgba(255, 255, 255, .5)));<br />background:-moz-linear-gradient(bottom center, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .5) 100%);<br />}<br />.zoomy img{<br />opacity: 0;<br />filter: alpha(opacity=0);<br />}<br />.zoomy a{<br />color: #333;<br />text-decoration: none;<br />}<br />.broke a{<br />display: block;<br />height: 100%;<br />width: 100%;<br />}<br />#brokeZoomy{<br />display: block;<br />position: absolute;<br />width: 30px;<br />height: 30px;<br />top: 0px;<br />left: 0px;<br />-webkit-border-radius: 0px;<br />-moz-border-radius: 0px;<br />background: #fff url(../images/broke.gif) center no-repeat;<br />}

 

Step3. 插入jQuery和指令碼包

 

$(function(){<br /> $('.zoom').zoomy();<br />});

 

指令碼包和外掛程式:

script type="text/javascript" src="http://www.baijs.nl/js/jquery-1.4.2.min.js"></script><br /><mce:script type="text/javascript" src="js/jquery.zoomy0.5.min.js" mce_src="js/jquery.zoomy0.5.min.js"></mce:script>

 

點擊下載