jquery動畫3.創(chuàng)建一個帶遮罩效果的圖片走廊

1、代碼如下:#frameposition:relativewidth:700pxheight:400pxoverflow:hiddenzindex:0#frameimgwidth:700pxheight:400pxposition:absolutetop:0left:0zindex:1#frameimg.visiblezindex:2#frameadisplay:blockwidth:50%height:100%position:abso

2、lutetop:0zindex:10col:transparentbackgroundimage:url(transparent.gif)filter:alpha(opacity=0)textalign:centertextdecation:nonefont:90px“PalatinoLinotype““BookAntiqua“Palatinoseriflineheight:400%#framea:hovercol:#ffftextsh

3、adow:005px#000filter:alpha(opacity=100)插件初始化操作createUI:function(config)創(chuàng)建遮罩層createOverlay:function(config)運行動畫效果runTransition:function(config)$.fn.extend(創(chuàng)建插件函數(shù)tranzify:function(options)returnthis))(jQuery)基本骨架有了，我們先來實現(xiàn)插

4、件函數(shù)tranzify的實現(xiàn)。代碼還是很簡單的，就是獲取當(dāng)前的dom對象，對其創(chuàng)建相關(guān)html元素和相應(yīng)事件，最后把this返回回去，實現(xiàn)鏈?zhǔn)侥Ｊ剑a如下：復(fù)制代碼代碼如下:創(chuàng)建插件函數(shù)tranzify:function(options)擴展配置varconfig=$.extend($.tranzify.defaultsoptions)獲取當(dāng)前dom對象，傳給config.config.=“#“this.attr(id)計算出我們需要

5、創(chuàng)建的遮罩層片段數(shù)config.multi=parseInt(this.width())config.transitionWidth創(chuàng)建插件$.tranzify.createUI(config)返回對象本身，實現(xiàn)鏈?zhǔn)叫Ч鹯eturnthis接下來我們介紹createUI函數(shù)。首先獲取圖片總數(shù)：復(fù)制代碼代碼如下:varimgLength=$(config.).find(img).length接下來定義‘上一條和‘下一條導(dǎo)航，并添加到對象上