浏览 2406 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2011-05-18
Srctipt:
主要功能是让图片在相册容器内完整地处理图片间的交递过程; 要求: 1.兼容IE7,8,FF chrome(IE6.抛弃!!!!!别怪我),原创; 2.图片在容器内随着图片大小的变化, 能够自适应, 让图片左右上下居中; 3.当图片还未读取到缓存时, 需要loading过程; 4.用jQuery写gallery插件模块,方便日后扩展,维护; 原码: Demo : http://www.6yang.net/myjavascriptlib/galleryAnimate/#~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>gallery photo animation</title> <link rel="stylesheet" href="css/gallery.css" type="text/css" media="screen" /> <script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="js/gallery.js" type="text/javascript"></script> </head> <body> <div class="gralleryWrap"> <h2>Gallery animation jQuery Created by jackyang</h2> <div class="photoView" id="js_photoView"> <div class="boxNext"> <a href="#~" class="btnNext"></a> </div> <div class="boxPrev"> <a href="#~" class="btnPrev"></a> </div> <h2 class="title">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h2> <div class="pic"> <img src="images/tempGalleryLarge01.jpg" alt="" /> </div> </div> <div class="photoThumbsList" id="js_photoThumbsList"> <ul> <li><a href="#~" class="itemThumb"><div class="active"></div><img src="images/tempGallery01.jpg" alt="" /></a></li> <li><a href="#~" class="itemThumb"><div></div><img src="images/tempGallery02.jpg" alt="" /></a></li> <li><a href="#~" class="itemThumb"><div></div><img src="images/tempGallery03.jpg" alt="" /></a></li> <li><a href="#~" class="itemThumb"><div></div><img src="images/tempGallery04.jpg" alt="" /></a></li> <li><a href="#~" class="itemThumb"><div></div><img src="images/tempGallery05.jpg" alt="" /></a></li> <li><a href="#~" class="itemThumb"><div></div><img src="images/tempGallery06.jpg" alt="" /></a></li> <li><a href="#~" class="itemThumb"><div></div><img src="images/tempGallery07.jpg" alt="" /></a></li> <li><a href="#~" class="itemThumb"><div></div><img src="images/tempGallery08.jpg" alt="" /></a></li> <li><a href="#~" class="itemThumb"><div></div><img src="images/tempGallery09.jpg" alt="" /></a></li> </ul> </div> </div> </body> </html> For javascript // JavaScript Document (function($){ //show photo in center $.fn.showPhotoCenter = function(){ return this.each(function(){ var self = $(this), parentDom = self.parent(); var coorX = (parentDom.width() - self.width())/2; var coorY = (parentDom.height() - self.height())/2; self.showPanelPosition(coorX, coorY); }); }; //show panels in position $.fn.showPanelPosition = function(x, y){ return this.each(function(){ $(this) .css({ "left": x, "top": y }) .show(); }); }; //loading photo jQuery.fn.LoadImage=function(fn){ return this.each(function(){ var self = $(this); var src = self.attr("src") var img = new Image(); img.src = src; if(img.complete){ img.width > 0 ? fn.call(img) : ''; return; } self.attr("src",""); $(img).load(function(){ self.attr("src",this.src); fn.call(img); }); }); } /** * define gallery Photo function * @param arrGallery * @return void */ $.fn.galleryPhoto = function(arrGallery){ return this.each(function(){ var self = $(this), iCurrent = 0, lenSlide = 0, arrTab = $('.itemThumb', self), jQ_photoView = $('#js_photoView'), jQ_currPic = jQ_photoView.find('.pic'), jQ_currImg = jQ_currPic.find('img'), jQ_currTitle = jQ_photoView.find('.title'), jQ_photoViewWrap = $('#js_photoViewWrap'); if(arrTab.length == 0 || jQ_currImg.length == 0){ return; } init(); $('.btnNext', jQ_photoView).bind('click', function(){ slideNext(); }); $('.btnPrev', jQ_photoView).bind('click', function(){ slidePrev(); }); function slideTo(i){ if(i == iCurrent) return; //loading image $('.itemThumb div', self).removeClass('active'); $('.itemThumb div:eq(' + i + ')', self).addClass('active'); jQ_currImg.attr('src', arrGallery[iCurrent].pic).hide(); jQ_currTitle.html(arrGallery[iCurrent].title).hide(); jQ_photoView.hasClass('loading') ? '': jQ_photoView.addClass('loading'); jQ_currPic.hide(); jQ_currImg.attr('src', arrGallery[i].pic).LoadImage(function(){ self.queue(function(){ jQ_photoView.hasClass('loading') ? jQ_photoView.removeClass('loading') : ''; jQ_currPic.show(); setTimeout(function(){ jQ_currImg.fadeIn(200); jQ_currTitle.fadeIn(200); jQ_currImg.parent().showPhotoCenter(); }, 300); $(this).dequeue(); }); }); self.queue(function(){ iCurrent = i; $(this).dequeue(); }); } function slidePrev(){ var i = iCurrent - 1; if(i == -1){ i = 0; } slideTo(i); } function slideNext(){ var i = iCurrent + 1; if(i==lenSlide){ i = lenSlide - 1; } slideTo(i); } function init(){ iCurrent = 0; lenSlide = arrGallery.length; jQ_currImg.eq(0).show(); $('.itemThumb', self).bind('click', function(){ var j = arrTab.index(this); if(jQ_photoViewWrap.length > 0){ $('.overlay01').show(); jQ_photoViewWrap.showPanelCenter(); } slideTo(j); }); } }); }; })(jQuery); $(function(){ // defining the garller photo var var arrGallery = [ {'pic': 'images/tempGalleryLarge01.jpg', 'url': '#', 'title': 'Lorem ipsum dolor sit amet1'}, {'pic': 'images/tempGalleryLarge02.jpg', 'url': '#', 'title': 'Lorem ipsum dolor sit amet2'}, {'pic': 'images/tempGalleryLarge03.jpg', 'url': '#', 'title': 'Lorem ipsum dolor sit amet3'}, {'pic': 'images/tempGalleryLarge04.jpg', 'url': '#', 'title': 'Lorem ipsum dolor sit amet4'}, {'pic': 'images/tempGalleryLarge05.jpg', 'url': '#', 'title': 'Lorem ipsum dolor sit amet5'}, {'pic': 'images/tempGalleryLarge06.jpg', 'url': '#', 'title': 'Lorem ipsum dolor sit amet6'}, {'pic': 'images/tempGalleryLarge07.jpg', 'url': '#', 'title': 'Lorem ipsum dolor sit amet7'}, {'pic': 'images/tempGalleryLarge08.jpg', 'url': '#', 'title': 'Lorem ipsum dolor sit amet8'}, {'pic': 'images/tempGalleryLarge09.jpg', 'url': '#', 'title': 'Lorem ipsum dolor sit amet9'} ], jQ_photoThumbsList = $('#js_photoThumbsList'), jQ_photoView = $('#js_photoView'), jQ_itemThumb = jQ_photoThumbsList.find('.itemThumb'); if(jQ_photoThumbsList.length > 0){ // load and fixed the gellary and thumbs $(window).load(function(){ // display thumbs jQ_itemThumb.showPhotoCenter(); // display photoView $('.pic', jQ_photoView).showPhotoCenter(); }); // return animate gallery-Photo jQ_photoThumbsList.galleryPhoto(arrGallery); } }); Demo : http://www.6yang.net/myjavascriptlib/galleryAnimate/#~ Created by 6yang.net Demo : http://www.6yang.net/myjavascriptlib/galleryAnimate/#~ Created by 6yang.net 本文由 站酷网 - 6yang 原创，转载请保留此信息，多谢合作。 访问6yang的个人主页 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
