jquery 彈出層外掛程式fancybox和放大鏡外掛程式cloud-zoom

標籤：scrolling   top   tar   自適應   body   設定   意思   背景   時間   

這兩天做了一個網上的項目，其實也不是自己做的，嘿嘿，現在就來說說我對這個小頁面效果代碼的理解代碼下載

1.添加javascript引用和CSS檔案的引用

 

//js代碼的引用
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script><script src="fancybox/jquery.easing-1.3.pack.js" type="text/javascript"></script>//如果需要用到fancy transition（一些動畫效果）你還需要引入以下指令碼<script src="fancybox/jquery.fancybox-1.3.4.js" type="text/javascript"></script><script src="cloud-zoom/cloud-zoom.1.0.2.js" type="text/javascript"></script>//放大鏡外掛程式
//css代碼的引用

<link rel="stylesheet" href="cloud-zoom/cloud-zoom.css" type="text/css">
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" type="text/css">

 

2.HTML代碼

<div class="item">            <div class="item-wrap">                <div class="slider">                    <ul>                        <li>                            <a rev="group1" class="cloud-zoom" rel="zoomHeight:200,zoomWidth:400,adjustX:10,adjustY:-4,position:‘body‘" href="images/formstack1.jpg"><img src="images/thumbs/formstack1.jpg"></a>                        </li>                        <li>                            <a rev="group1" class="cloud-zoom" rel="zoomHeight:200,zoomWidth:400,adjustX:10,adjustY:-4,position:‘body‘" href="images/formstack2.jpg"><img src="images/thumbs/formstack2.jpg"></a>                        </li>                        <li>                            <a rev="group1" class="cloud-zoom" rel="zoomHeight:200,zoomWidth:400,adjustX:10,adjustY:-4,position:‘body‘" href="images/formstack3.jpg"><img src="images/thumbs/formstack3.jpg"></a>                        </li>                    </ul>                </div>                <a class="pre" href="#"></a>                <a class="next" href="#"></a>                <span>Hover to zoom, click to view</span>            </div>            <div class="intro">                <h2>Formstack</h2>                <p>                    Quickly create any type of web form with our easy to use drag and drop form builder.                    Seamlessly create HTML forms and embed them on your website or use style templates                    to match your color, logo and overall look and feel.                </p>                <a href="http://www.formstack.com">http://www.formstack.com</a>            </div>        </div>

先說說放大鏡cloud-zoom，與其他外掛程式不一樣，cloud-zoom不需要再在 js 代碼裡調用了，只需要給 a 標籤加上 class 為 “cloud-zoom” 就可以實現調用。如果還要設定其他的效果，可以通過rel進行如下參數的設定：

參數	描述	預設值
zoomWidth	放大鏡視窗的寬度，如果是預設值，則和小圖片一樣。不需要單位，有單位會出錯	‘auto‘
zoomHeight	放大鏡視窗的高度，如果是預設值，則和小圖片一樣。不需要單位，有單位會出錯	‘auto‘
position	放大鏡視窗的位置，可選 left 、 right 、 top 、 bottom ，也可以指定某個 ID，如 position: ‘element1‘	‘right‘
adjustX	距離小圖片的水平位置。不需要單位，有單位會出錯	0
adjustY	距離小圖片的垂直位置。不需要單位，有單位會出錯	0
tint	非放大地區的顏色，必須是十六進位顏色，如 ‘#aa00aa‘,不能和 softFocus 一起使用	false
tintOpacity	不透明度，0 是完全透明，1 是完全不透明	0.5
lensOpacity	鏡頭滑鼠指標不透明度，0 是完全透明，1 是完全不透明，在 tint 和 softFocus 模式下始終透明	0.5
softFocus	微微的模糊效果，可選 true 或 false，不能和 tint 一起使用	false
smoothMove	放大地區圖片移動的平滑度，數字越高越平滑，為 1 則不平滑	3
showTitle	顯示圖片標題，可選 true 或 false	true
titleOpacity	標題不透明度，0 是完全透明，1 是完全不透明	0.5

3.彈出層外掛程式的js代碼

這是官方網站上的說明，有預設的基本設定，自訂設定，還能將彈出層應用於多個items

我們用的就是多個cloud-zoom

 $(".content .cloud-zoom").fancybox({        ‘transitionIn‘    :    ‘elastic‘,        ‘transitionOut‘    :    ‘none‘,        ‘speedIn‘        :    600,        ‘speedOut‘        :    200,        ‘overlayShow‘    :    true,        ‘overlayColor‘    :    ‘#000‘,        ‘cyclic‘        :    true,        ‘easingIn‘        :    ‘easeInOutExpo‘    });

Fancybox的API和配置選項說明

屬性名稱	預設值	簡要說明
padding	10	瀏覽框內邊距，和css中的padding一個意思
margin	20	瀏覽框外邊距，和css中的margin一個意思
opacity	false	如果為true，則fancybox在動畫改變的時候透明度可以跟著改變
modal	false	如果為true，則‘overlayShow‘ 會被設成 ‘true‘ ， ‘hideOnOverlayClick‘, ‘hideOnContentClick‘, ‘enableEscapeButton‘, ‘showCloseButton‘ 會被設成 ‘false‘
cyclic	false	如果為true，相簿會迴圈播放
scrolling	‘auto‘	設定overflow的值來建立或隱藏捲軸，可以設定成 ‘auto‘, ‘yes‘, or ‘no‘
width	560	設定iframe和swf的寬度，如果 ‘autoDimensions‘為 ‘false‘，這也可以設定普通文本的寬度
height	340	設定iframe和swf的高度，如果 ‘autoDimensions‘為 ‘false‘，這也可以設定普通文本的高度
autoScale	true	如果為true，fancybox可以自適應瀏覽器視窗大小
autoDimensions	true	在內聯文本和ajax中，設定是否動態調整元素的尺寸，如果為true，請確保你已經為元素設定了尺寸大小
centerOnScroll	false	如果為true，當你滾動捲軸時，fancybox將會一直停留在瀏覽器中心
ajax	{ }	和jquery的ajax調用選項一樣 注意: ‘error‘ and ‘success‘ 這兩個回調事件會被fancybox重寫
swf	{wmode: ‘transparent‘}	swf的設定選項
hideOnOverlayClick	true	如果為true則點擊遮罩層關閉fancybox
hideOnContentClick	false	如果為true則點擊播放內容關閉fancybox
overlayShow	true	如果為true，則顯示遮罩層
overlayOpacity	0.3	遮罩層的透明度（範圍0-1）
overlayColor	‘#666‘	遮罩層的背景顏色
titleShow	true	如果為true，則顯示標題
titlePosition	‘outside‘	設定標題顯示的位置.可以設定成 ‘outside‘, ‘inside‘ 或 ‘over‘
titleFormat	null	可以自訂標題的格式
transitionIn, transitionOut	‘fade‘	設定動畫效果. 可以設定為 ‘elastic‘, ‘fade‘ 或 ‘none‘
speedIn, speedOut	300	fade 和 elastic 動畫切換的時間間隔, 以毫秒為單位
changeSpeed	300	切換時fancybox尺寸的變化時間間隔（即變化的速度），以毫秒為單位
changeFade	‘fast‘	切換時內容淡入淡出的時間間隔（即變化的速度）
easingIn, easingOut	‘swing‘	為 elastic 動畫使用 Easing
showCloseButton	true	如果為true，則顯示關閉按鈕
showNavArrows	true	如果為true，則顯示上一張下一張導航箭頭
enableEscapeButton	true	如果為true，則啟用ESC來關閉fancybox
onStart	null	回呼函數，載入內容是觸發
onCancel	null	回呼函數，取消載入內容後觸發
onComplete	null	回呼函數，載入內容完成後觸發
onCleanup	null	回呼函數，關閉fancybox前觸發
onClosed	null	回呼函數，關閉fancybox後觸發

jquery 彈出層外掛程式fancybox和放大鏡外掛程式cloud-zoom