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

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)運(yùn)行動(dòng)畫效果runTransition:function(config)$.fn.extend(創(chuàng)建插件函數(shù)tranzify:function(options)returnthis))(jQuery)基本骨架有了，我們先來(lái)實(shí)現(xiàn)插

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

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