找回密码
 注册

QQ登录

只需一步,快速开始

查看: 5185|回复: 23

[作品展示] 又是一个jQuery写的相册效果,看看吧!

[复制链接]
发表于 2014-6-3 17:29:03 | 显示全部楼层 |阅读模式
本帖最后由 yaohaixiao 于 2014-6-3 18:05 编辑

_r1_c2.png


演示地址:http://www.yaohaixiao.com/scripts/jAlbum/


JavaScript 代码
  1. /**
  2. * @author Yaohaixiao
  3. */
  4. (function($){
  5.         var CLS_SELECTED = "album-carousel-thumb-selected",
  6.             CLS_HIDE = "hide",
  7.                 PX = "px";
  8.        
  9.         jQuery.Album = function(config){
  10.                 this.setting = {
  11.                         // 大图片显示区域
  12.                         root: $("#album-image-md"),
  13.                         // 大图片
  14.                         image: $("#album-image"),
  15.                         // 大图片的标题
  16.                         title: $("#album-image-ft"),
  17.                         btnDownload: $("#album-download"),
  18.                         // 大图片区域的导航块
  19.                         navBlock: $("#album-image-nav"),
  20.                         // 查看上一张图片按钮
  21.                         btnPrev: $("#album-image-btn-prev"),
  22.                         // 查看下一张图片按钮
  23.                         btnNext: $("#album-image-btn-next"),
  24.                         // 大图片显示区域的左侧
  25.                         prevBlock:  $("#album-image-nav-left-block"),
  26.                         // 大图片显示区域的右侧
  27.                         nextBlock:  $("#album-image-nav-right-block"),
  28.                         // 大图片切换时的loading图片
  29.                         overlay: $("#album-image-loading-overlay"),
  30.                         // 图片缩略图 Carousel 对象
  31.                         Carousel: new jQuery.Carousel({
  32.                                 root: '#album-carousel',
  33.                                 carousel: '#album-carousel-list',
  34.                                 pages: {
  35.                                         prev: '#album-carousel-btn-prev',
  36.                                         next: '#album-carousel-btn-next'
  37.                                 },
  38.                                 direction: 'H'
  39.                         }),
  40.                         // 当前显示图片在缩略图的中索引值
  41.                         curIndex: 0,
  42.                         // 大图片显示区域的最大宽度
  43.                         maxWidth: 1000,
  44.                         // 大图片显示区域的最高宽度
  45.                         maxHeight: 750
  46.                 };
  47.                
  48.                 // 合并用户配置项和默认配置项
  49.                 $.extend(this.setting, config);

  50.                 // 上一个选中的缩略图
  51.                 this.selectedItem = null;
  52.                 // 当前选中的缩略图
  53.                 this.currentItem = null;
  54.                 // 图片是否正在加载切换
  55.                 this.isloading = false;
  56.                
  57.                 // 初始化对象方法
  58.                 this.init();
  59.                
  60.                 return this;
  61.         };
  62.        
  63.         jQuery.Album.prototype = {
  64.                 /**
  65.                  * 初始化方法
  66.                  * @method init
  67.                  */
  68.                 init: function(){
  69.                         // 选中缩略图
  70.                         // 改变图片
  71.                         // 绑定相册程序各个DOM节点的事件处理函数
  72.                         this.select().change().bindEvent();
  73.                        
  74.                         return this;
  75.                 },
  76.                 /**
  77.                  * 更新大图片和图片说明
  78.                  * @method change
  79.                  */
  80.                 change: function(){
  81.                         var Album = this,
  82.                         currentItem = Album.currentItem,
  83.                         image = Album.getImage(),
  84.                         title = Album.getTitle(),
  85.                         overlay = Album.getOverlay(),
  86.                         btnDownload = Album.getBtnDownload(),
  87.                         src = currentItem.find("a:first").attr("href"),
  88.                         alt = currentItem.find("img:first").attr("alt"),
  89.                         percent = 0,
  90.                         preloader = new Image();
  91.                        
  92.                         // 开始显示loading
  93.                         overlay.removeClass(CLS_HIDE);
  94.                         this.isloading = true;
  95.                        
  96.                         // 必须使用 preloader 来实现图片的load事件
  97.                         // preloader = new Image() 创建一个新的Image对象
  98.                         // 给 preloader 设置加载图片的路径
  99.                         preloader.src = src;                       
  100.                         // 之后就可以开始使用load事件,获得新的图片的实际尺寸
  101.                         // img标签是一个替换元素,我们不能在一开始就获得图片的实际大小
  102.                         // 必须是图片下载(load)完成后,才能获得实际大小
  103.                         $(preloader).load(function(evt){
  104.                                 var width = preloader.width,
  105.                                     height = preloader.height,
  106.                                         maxWidth = Album.getMaxWidth(),
  107.                                         maxHeight = Album.getMaxHeight();
  108.                                
  109.                                 // 获得图片的宽/高的比率
  110.                                 percent = width / height;
  111.                                
  112.                                 // 根据图片实际大小,等比缩放图片
  113.                                 // 图片的宽度大于 maxWidth
  114.                                 if (width > maxWidth) {
  115.                                         // 图片按照最大宽度显示(缩放)
  116.                                         // 图片的高度在maxHeight以内
  117.                                         width = maxWidth;
  118.                                         height = width / percent;
  119.                                        
  120.                                         // 按最大宽度缩放后,图片的高度仍超过maxHeight
  121.                                         // 这是要图片应该是一个纵向高度比较长的图片
  122.                                         if (height > maxHeight) {
  123.                                                 // 这里要将之前的最大宽度再按图片的长宽比来缩小
  124.                                                 // 这时的图片是高度等于maxHeight的
  125.                                                 // 而宽度是小于maxWidth的缩略图
  126.                                                 percent = maxHeight / height;
  127.                                                 width = width * percent;
  128.                                                 height = maxHeight;
  129.                                         }
  130.                                 }
  131.                                 else {
  132.                                         // 图片的原始宽度小于等于maxWidth
  133.                                         if (width <= maxWidth) {
  134.                                                 // 高度超过maxHeight,再等比调整图片高度
  135.                                                 if (height > maxHeight) {
  136.                                                     percent = maxHeight / height;
  137.                                                         width = width * percent;
  138.                                                         height = maxHeight;
  139.                                                 }
  140.                                         }
  141.                                 }
  142.                                
  143.                                 // 图片缩放和调整显示位置
  144.                                 image.animate({
  145.                                         "width": width + PX,
  146.                                         "height": height + PX,
  147.                                         "margin-left": -(width / 2) + PX,
  148.                                         "margin-top": -(height / 2) + PX
  149.                                 }, 500, function(){
  150.                                         // 更新图片路径和图片alt属性
  151.                                         image.attr({
  152.                                                 "src": src,
  153.                                                 "alt": alt
  154.                                         });
  155.                                         // 更新图片说明文字
  156.                                         title.html(alt);
  157.                                         // 更新下载图片的链接路径
  158.                                         btnDownload.attr("href", src);
  159.                                        
  160.                                         // 隐藏loading图片的遮罩层
  161.                                         overlay.addClass(CLS_HIDE);
  162.                                         Album.isloading = false;
  163.                                 });
  164.                         });
  165.                        
  166.                         return this;
  167.                 },
  168.                 /**
  169.                  * 选中缩略图
  170.                  * @method select
  171.                  */
  172.                 select: function(){
  173.                         var selectedItem = this.selectedItem,
  174.                             currentItem = null,
  175.                                 items = this.getItems(),
  176.                                 curIndex = this.getCurrentIndex();
  177.                        
  178.                         // 如果有上次选中的图片,则去掉它的选中样式
  179.                         if (selectedItem) {
  180.                                 selectedItem.removeClass(CLS_SELECTED);
  181.                         }
  182.                         // 给当前选中缩略图添加选中样式
  183.                         currentItem = this.currentItem = $(items[curIndex]);
  184.                         currentItem.addClass(CLS_SELECTED);
  185.                        
  186.                         // 现在选中的图片就是上次选中的图片了
  187.                         this.selectedItem = currentItem;
  188.                        
  189.                         return this;
  190.                 },
  191.                 /**
  192.                  * 显示上一张图片
  193.                  * @method prev
  194.                  */
  195.                 prev: function(){
  196.                         // 当前缩略图的索引值减1
  197.                         this.setCurrentIndex(this.getCurrentIndex() - 1);
  198.                        
  199.                         // 移动到第一张以后
  200.                         if (this.getCurrentIndex() < 0) {
  201.                                 // 循环到最后一张图片,并且滚动缩略图
  202.                                 this.setCurrentIndex(this.getLength() - 1).prevGroup();
  203.                         }
  204.                         else {
  205.                                 // 不是第一张图片
  206.                                 if (this.getCurrentIndex() > 0) {
  207.                                         // 移动到缩略图当前显示区域索引值最小的一张图片之前,这时候需要移动缩略图区域到上一组图片
  208.                                         if (this.getCurrentIndex() < this.getCurrentPage() * this.getItemsPrePage()) {
  209.                                                 this.prevGroup();
  210.                                         }
  211.                                 }
  212.                         }
  213.                        
  214.                         this.select().change();
  215.                        
  216.                         return this;
  217.                 },
  218.                 /**
  219.                  * 显示下一张图片
  220.                  * @method next
  221.                  */
  222.                 next: function(){
  223.                         // 当前缩略图的索引值+1
  224.                         this.setCurrentIndex(this.getCurrentIndex() + 1);
  225.                        
  226.                         // 移动到最后一张以后
  227.                         if (this.getCurrentIndex() > this.getLength() - 1) {
  228.                                 // 循环显示第一张图片,并且滚动缩略图
  229.                                 this.setCurrentIndex(0).nextGroup();
  230.                         }
  231.                         else {
  232.                                 // 不是最后一张图片
  233.                                 if (this.getCurrentPage() < this.getMaxPages()) {
  234.                                         // 移动到缩略图当前显示区域索引值最大的一张图片之后,这时候需要移动缩略图区域到下一组图片
  235.                                         if (this.getCurrentIndex() > ((this.getCurrentPage() + 1) * this.getItemsPrePage()) - 1) {
  236.                                                 this.nextGroup();
  237.                                         }
  238.                                 }
  239.                         }
  240.                        
  241.                         this.select().change();
  242.                        
  243.                         return this;
  244.                 },
  245.                 prevGroup: function(){
  246.                         var Carousel = this.getCarousel();
  247.                        
  248.                         Carousel.prev();
  249.                        
  250.                         return this;
  251.                 },
  252.                 nextGroup: function(){
  253.                         var Carousel = this.getCarousel();
  254.                        
  255.                         Carousel.next();
  256.                        
  257.                         return this;
  258.                        
  259.                 },
  260.                 /**
  261.                  * 给相册的各个DOM节点绑定事件处理函数
  262.                  */
  263.                 bindEvent: function(){
  264.                         var Album = this,
  265.                             root = Album.getRoot(),
  266.                                 navBlock = Album.getNavBlock(),
  267.                                 prevBlock = Album.getPrevBlock(),
  268.                                 nextBlock = Album.getNextBlock(),
  269.                                 btnPrev = Album.getBtnPrev(),
  270.                                 btnNext = Album.getBtnNext(),
  271.                                 items = Album.getItems();
  272.                        
  273.                         // 鼠标放到大图图片区域显示上下翻页按钮
  274.                         root.hover(function(){
  275.                                 navBlock.removeClass(CLS_HIDE);
  276.                         }, function(){
  277.                                 navBlock.addClass(CLS_HIDE);
  278.                         });
  279.                        
  280.                         // 鼠标点击图片左边区域,查看上一张图片
  281.                         prevBlock.click(function(evt){
  282.                                 Album.prev();
  283.                                
  284.                                 evt.preventDefault();
  285.                                 evt.stopPropagation();
  286.                         });
  287.                        
  288.                         // 鼠标点击图片右边区域,查看下一张图片
  289.                         nextBlock.click(function(evt){
  290.                                 Album.next();
  291.                                
  292.                                 evt.preventDefault();
  293.                                 evt.stopPropagation();
  294.                         });
  295.                        
  296.                         // 鼠标点击上一张按钮,查看上一张图片
  297.                         btnPrev.click(function(evt){
  298.                                 Album.prev();
  299.                                
  300.                                 evt.preventDefault();
  301.                                 evt.stopPropagation();
  302.                         });
  303.                        
  304.                         // 鼠标点击下一张按钮,查看下一张图片
  305.                         btnNext.click(function(evt){
  306.                                 Album.next();
  307.                                
  308.                                 evt.preventDefault();
  309.                                 evt.stopPropagation();
  310.                         });
  311.                        
  312.                         // 鼠标点击每张缩略图,查看选中图片
  313.                         // TODO: 是否需要使用delegate来优化一下
  314.                         items.each(function(i, item){
  315.                                 $(item).click(function(evt){
  316.                                         if (!$(this).hasClass(CLS_SELECTED) && !Album.isLoading) {
  317.                                                 Album.setCurrentIndex(i).select().change();
  318.                                         }
  319.                                         evt.preventDefault();
  320.                                         evt.stopPropagation();
  321.                                 });
  322.                         });
  323.                        
  324.                         return this;
  325.                 },
  326.                 getRoot: function(){
  327.                         return $(this.setting.root);
  328.                 },
  329.                 getImage: function(){
  330.                         return $(this.setting.image);
  331.                 },
  332.                 getTitle: function(){
  333.                         return $(this.setting.title);
  334.                 },
  335.                 getBtnDownload: function(){
  336.                         return $(this.setting.btnDownload);
  337.                 },
  338.                 getNavBlock: function(){
  339.                         return $(this.setting.navBlock);
  340.                 },
  341.                 getPrevBlock: function(){
  342.                         return $(this.setting.prevBlock);
  343.                 },
  344.                 getNextBlock: function(){
  345.                         return $(this.setting.nextBlock);
  346.                 },
  347.                 getBtnPrev: function(){
  348.                         return $(this.setting.btnPrev);
  349.                 },
  350.                 getBtnNext: function(){
  351.                         return $(this.setting.btnNext);
  352.                 },
  353.                 getOverlay: function(){
  354.                         return $(this.setting.overlay);
  355.                 },
  356.                 getCarousel: function(){
  357.                         return this.setting.Carousel;
  358.                 },
  359.                 getCurrentPage: function(){
  360.                         var Carousel = this.getCarousel();
  361.                          
  362.                         return Carousel.setting.curPage;
  363.                 },
  364.                 setCurrentPage: function(page){
  365.                         var Carousel = this.getCarousel();
  366.                        
  367.                         Carousel.setting.curPage = page;
  368.                        
  369.                         return this;
  370.                 },
  371.                 getMaxPages: function(){
  372.                         var Carousel = this.getCarousel();
  373.                        
  374.                         return Carousel.setting.maxPages;
  375.                 },
  376.                 getItemsPrePage: function(){
  377.                         var Carousel = this.getCarousel();
  378.                        
  379.                         return Carousel.setting.itemsPrePage;
  380.                 },
  381.                 /**
  382.                  * 获得相册的所有缩略图
  383.                  */
  384.                 getItems: function(){
  385.                         return this.getSamples();
  386.                 },
  387.                 /**
  388.                  * getItems 的别名
  389.                  */
  390.                 getSamples: function(){
  391.                         var Carousel = this.getCarousel();
  392.                        
  393.                         return Carousel.setting.items;
  394.                 },
  395.                 getLength: function(){
  396.                         return this.getItems().length;
  397.                 },
  398.                 getCurrentIndex: function(){
  399.                         return this.setting.curIndex;
  400.                 },
  401.                 /**
  402.                  * 设置显示图片在缩略图中的索引值
  403.                  * @method setCurrentIndex
  404.                  * @param {Object} i - 索引值
  405.                  */
  406.                 setCurrentIndex: function(i){
  407.                         this.setting.curIndex = i;
  408.                        
  409.                         return this;
  410.                 },
  411.                 getMaxWidth: function(){
  412.                         return this.setting.maxWidth;
  413.                 },
  414.                 getMaxHeight: function(){
  415.                         return this.setting.maxHeight;
  416.                 }
  417.         };
  418. })(jQuery);       
复制代码

本帖被以下淘专辑推荐:

  • · Case|主题: 3, 订阅: 0
 楼主| 发表于 2014-6-3 17:29:39 | 显示全部楼层
CSS 代码
  1. .album{
  2.         margin:20px auto;
  3.         width:1000px;
  4.         border:10px solid #FFF;
  5.         -webkit-box-shadow: 1px 2px 5px #CCC;
  6.     -moz-box-shadow: 1px 1px 5px #CCC;
  7.     box-shadow: 1px 1px 5px #CCC;
  8.         overflow:hidden;
  9. }

  10. .album-image-md{
  11.         position:relative;
  12.         z-index:1;
  13.         margin:0 auto;
  14.         height:800px;
  15.         overflow:hidden;
  16. }

  17. .album-image-bd{
  18.         position:relative;
  19.         z-index:1;
  20.         margin:0 auto;
  21.         height:750px;
  22.         text-align:center;
  23.         overflow:hidden;
  24. }

  25. .album-image{
  26.         position:absolute;
  27.         z-index:2;
  28.         top:50%;
  29.         left:50%;
  30. }

  31. .album-image-ft{
  32.         margin:0 auto;
  33.         height:50px;
  34.         line-height:50px;
  35.         text-align:center;
  36.         overflow:hidden;
  37. }

  38. #album-image-ft{
  39.         font-size:12px;
  40. }

  41. .album-image-nav{
  42.         position:absolute;
  43.         z-index:2;
  44.         top:0;
  45.         left:0;
  46.         margin:0;
  47.         padding:0;
  48.         width:980px;
  49.         height:750px;
  50.         overflow:hidden;
  51. }

  52. .album-image-nav-left-block{
  53.         position:relative;
  54.         z-index:1;
  55.         float:left;
  56.         margin:0;
  57.         width:50%;
  58.         height:750px;
  59.         list-style-type:none;
  60.         overflow:hidden;
  61. }

  62. .album-image-nav-right-block{
  63.         position:relative;
  64.         z-index:1;
  65.         float:left;
  66.         margin:0;
  67.         width:50%;
  68.         height:750px;
  69.         list-style-type:none;
  70.         overflow:hidden;
  71. }

  72. .album-image-btn-prev:link,.album-image-btn-prev:visited,.album-image-btn-prev:hover{
  73.         position:absolute;
  74.         z-index:2;
  75.         top:50%;
  76.         left:0;
  77.         margin:-40px 0 0 0;
  78.         width:40px;
  79.         height:80px;
  80.         line-height:60px;
  81.         font-size:100px;
  82.         color:#999;
  83.         background-color:#333;
  84.         opacity: 0.7;
  85.         filter:alpha(opacity=70);
  86.         text-decoration:none;
  87.         text-align:center;
  88.         overflow:hidden;
  89. }

  90. .album-image-btn-next:link,.album-image-btn-next:visited,.album-image-btn-next:hover{
  91.         position:absolute;
  92.         z-index:2;
  93.         top:50%;
  94.         right:0;
  95.         margin:-40px 0 0 0;
  96.         width:40px;
  97.         height:80px;
  98.         line-height:60px;
  99.         font-size:100px;
  100.         color:#999;
  101.         background-color:#333;
  102.         opacity: 0.7;
  103.         filter:alpha(opacity=70);
  104.         text-decoration:none;
  105.         text-align:center;
  106.         overflow:hidden;
  107. }

  108. .album-image-btn-prev:hover,.album-image-btn-next:hover{
  109.         color:#FFF;
  110.         background-color:#000;
  111. }

  112. .album-image-loading-overlay{
  113.         position:absolute;
  114.         z-index:4;
  115.         top:0;
  116.         left:0;
  117.         margin:0;
  118.         width:980px;
  119.         height:750px;
  120.         background-color:#FFF;
  121.         opacity: 0.6;
  122.         filter:alpha(opacity=60);
  123.         overflow:hidden;
  124. }

  125. .album-image-loading-overlay img{
  126.         position:absolute;
  127.         z-index:4;
  128.         top:50%;
  129.         left:50%;
  130.         margin:-50px  0 0 -50px;
  131.         width:100px;
  132.         height:100px;
  133. }

  134. .album-carousel{
  135.         margin:0 auto;
  136.         width:980px;
  137.         height:80px;
  138.         overflow:hidden;
  139. }

  140. .album-carousel-btn-prev:link,.album-carousel-btn-prev:visited,.album-carousel-btn-prev:hover{
  141.         float:left;
  142.         margin:0;
  143.         width:50px;
  144.         height:80px;
  145.         line-height:70px;
  146.         text-align:center;
  147.         font-size:80px;
  148.         text-decoration:none;
  149.         color:#999;
  150.         overflow:hidden;
  151. }

  152. .album-carousel-btn-next:link,.album-carousel-btn-next:visited,.album-carousel-btn-next:hover{
  153.         float:right;
  154.         margin:0;
  155.         width:50px;
  156.         height:80px;
  157.         line-height:70px;
  158.         text-align:center;
  159.         font-size:80px;
  160.         text-decoration:none;
  161.         color:#999;
  162.         overflow:hidden;
  163. }

  164. .album-carousel-btn-prev:hover,.album-carousel-btn-next:hover{
  165.         color:#F00;
  166.         background-color:#F4F4F4;
  167. }

  168. .album-carousel-zone{
  169.         position:relative;
  170.         z-index:1;
  171.         float:left;
  172.         margin:0;
  173.         width:880px;
  174.         height:80px;
  175.         background-color:#FFF;
  176.         overflow:hidden;
  177. }

  178. .album-carousel-list{
  179.         position:absolute;
  180.         z-index:2;
  181.         top:0;
  182.         left:0;
  183.         margin:0;
  184.         padding:0;
  185.         width:1760px;
  186.     height:80px;
  187.         overflow:hidden;
  188. }

  189. .album-carousel-thumb{
  190.         position:relative;
  191.         z-index:3;
  192.         float:left;
  193.         margin:0;
  194.         list-style-type:none;
  195.         width:80px;
  196.         height:80px;
  197.         overflow:hidden;
  198. }

  199. .album-carousel-thumb a:link,.album-carousel-thumb a:visited,.album-carousel-thumb a:hover{
  200.         position:absolute;
  201.         z-index:2;
  202.         top:0;
  203.         left:0;
  204.         width:80px;
  205.         height:80px;
  206.         border:3px solid #FFF;
  207.         overflow:hidden;
  208. }

  209. .album-carousel-thumb-selected a:link,.album-carousel-thumb-selected a:visited,.album-carousel-thumb-selected a:hover,.album-carousel-thumb a:hover{
  210.         border:3px solid #F00;
  211. }

  212. .album-carousel-thumb img{
  213.         position:absolute;
  214.         z-index:1;
  215.         display:block;
  216.         top:-37px;
  217.         left:-80px;
  218.         width:230px;
  219.         height:144px;
  220.         opacity:0.5;
  221.         filter:alpha(opacity=50);
  222. }

  223. .album-carousel-thumb-selected a:link img,.album-carousel-thumb-selected a:visited img,.album-carousel-thumb-selected a:hover img,.album-carousel-thumb a:hover img{
  224.         opacity:1;
  225.         filter:alpha(opacity=100);
  226. }

  227. .album-download:link,.album-download:visited,.album-download:hover{
  228.         position:absolute;
  229.         z-index:3;
  230.         top:10px;
  231.         right:10px;
  232.         margin:0;
  233.         height:28px;
  234.         line-height:28px;
  235.         font-size:12px;
  236.         padding-left:30px;
  237.         text-decoration:none;
  238.         background:transparent url(../samples/img/button-bg-comments.png) 0 -137px no-repeat;
  239.         overflow:hidden;
  240. }

  241. .album-download:hover{
  242.         background-position: 0 -282px;
  243.         color:#FFF;
  244. }

  245. .album-download span{
  246.         display:block;
  247.         background:transparent url(../samples/img/button-bg-comments.png) 100% -50px;
  248.         padding-right:20px;
  249. }

  250. .album-download:hover span{
  251.         background-position: 100% -456px;
  252. }

  253. .hide{
  254.         display:none;
  255. }
复制代码
回复 支持 1 反对 1

使用道具 举报

发表于 2014-6-3 17:52:38 | 显示全部楼层
高手!先膜拜下,啥时候我这菜鸟也能写出这些东西呢,看得眼都花了,愁啊~
回复 支持 1 反对 0

使用道具 举报

 楼主| 发表于 2014-6-3 17:43:16 | 显示全部楼层
如果你仔细看过的CSS代码,你会发现我的缩略图的处理稍微有点不同,这个是最近用百度图片时看到它的处理方式,模仿的。就是只显示图片的中心位置的图片。
  1. .album-carousel-thumb{
  2.         position:relative;
  3.         z-index:3;
  4.         float:left;
  5.         margin:0;
  6.         list-style-type:none;
  7.         width:80px;
  8.         height:80px;
  9.         overflow:hidden;
  10. }

  11. .album-carousel-thumb a:link,.album-carousel-thumb a:visited,.album-carousel-thumb a:hover{
  12.         position:absolute;
  13.         z-index:2;
  14.         top:0;
  15.         left:0;
  16.         width:80px;
  17.         height:80px;
  18.         border:3px solid #FFF;
  19.         overflow:hidden;
  20. }

  21. .album-carousel-thumb-selected a:link,.album-carousel-thumb-selected a:visited,.album-carousel-thumb-selected a:hover,.album-carousel-thumb a:hover{
  22.         border:3px solid #F00;
  23. }

  24. .album-carousel-thumb img{
  25.         position:absolute;
  26.         z-index:1;
  27.         display:block;
  28.         top:-37px;
  29.         left:-80px;
  30.         width:230px;
  31.         height:144px;
  32.         opacity:0.5;
  33.         filter:alpha(opacity=50);
  34. }

  35. .album-carousel-thumb-selected a:link img,.album-carousel-thumb-selected a:visited img,.album-carousel-thumb-selected a:hover img,.album-carousel-thumb a:hover img{
  36.         opacity:1;
  37.         filter:alpha(opacity=100);
  38. }
复制代码
至于Carsouel特效的原理,大家自己看看我的Carousel代码,或者去Google一下吧
回复 支持 1 反对 0

使用道具 举报

 楼主| 发表于 2014-6-3 17:37:39 | 显示全部楼层
本帖最后由 yaohaixiao 于 2014-6-3 18:11 编辑

文件下载: jAlbum.zip (3.86 MB, 下载次数: 746)
回复 支持 1 反对 0

使用道具 举报

 楼主| 发表于 2014-6-3 17:30:32 | 显示全部楼层
HTML 代码
  1. <div class="album" id="album">
  2.          <div class="album-image-md" id="album-image-md">
  3.                   <p class="album-image-bd"><img src="img/01.jpg" class="album-image" id="album-image" alt="相册图片-示例图片(1)" width="674" height="750" /></p>          
  4.                    <p class="album-image-ft" id="album-image-ft">相册图片-示例图片(1)</p>
  5.                   <a class="album-download" id="album-download" href="img/01.jpg" target="_blank"><span>下载图片</span></a>
  6.                   <ul class="album-image-nav hide" id="album-image-nav">
  7.                             <li class="album-image-nav-left-block" id="album-image-nav-left-block"><a href="#prev-image" class="album-image-btn-prev" id="album-image-btn-prev">‹</a></li>
  8.                           <li class="album-image-nav-right-block" id="album-image-nav-right-block"><a href="#next-image" class="album-image-btn-next" id="album-image-btn-next">›</a></li>
  9.                   </ul>
  10.                   <p class="album-image-loading-overlay hide" id="album-image-loading-overlay"><img src="img/loading.gif" alt="loading..." width="100" height="100" /></p>
  11.          </div>
  12.          <div class="album-carousel" id="album-carousel">
  13.                    <a href="#prev-group" class="album-carousel-btn-prev" id="album-carousel-btn-prev">‹</a>
  14.                   <div class="album-carousel-zone" id="album-carousel-zone">
  15.                   <ul class="album-carousel-list" id="album-carousel-list">
  16.                             <li class="album-carousel-thumb album-carousel-thumb-selected"><a href="img/01.jpg"><img src="img/s-01.jpg" alt="相册图片-示例图片(1)" width="230" height="144" /></a></li>
  17.                             <li class="album-carousel-thumb"><a href="img/02.jpg"><img src="img/s-02.jpg" alt="相册图片-示例图片(2)" width="230" height="144" /></a></li>
  18.                             <li class="album-carousel-thumb"><a href="img/03.jpg"><img src="img/s-03.jpg" alt="相册图片-示例图片(3)" width="230" height="144" /></a></li>
  19.                             <li class="album-carousel-thumb"><a href="img/04.jpg"><img src="img/s-04.jpg" alt="相册图片-示例图片(4)" width="230" height="144" /></a></li>
  20.                             <li class="album-carousel-thumb"><a href="img/05.jpg"><img src="img/s-05.jpg" alt="相册图片-示例图片(5)" width="230" height="144" /></a></li>
  21.                             <li class="album-carousel-thumb"><a href="img/06.jpg"><img src="img/s-06.jpg" alt="相册图片-示例图片(6)" width="230" height="144" /></a></li>
  22.                             <li class="album-carousel-thumb"><a href="img/07.jpg"><img src="img/s-07.jpg" alt="相册图片-示例图片(7)" width="230" height="144" /></a></li>
  23.                             <li class="album-carousel-thumb"><a href="img/08.jpg"><img src="img/s-08.jpg" alt="相册图片-示例图片(8)" width="230" height="144" /></a></li>
  24.                             <li class="album-carousel-thumb"><a href="img/09.jpg"><img src="img/s-09.jpg" alt="相册图片-示例图片(9)" width="230" height="144" /></a></li>
  25.                             <li class="album-carousel-thumb"><a href="img/10.jpg"><img src="img/s-10.jpg" alt="相册图片-示例图片(10)" width="230" height="144" /></a></li>
  26.                             <li class="album-carousel-thumb"><a href="img/11.jpg"><img src="img/s-11.jpg" alt="相册图片-示例图片(11)" width="230" height="144" /></a></li>
  27.                             <li class="album-carousel-thumb"><a href="img/12.jpg"><img src="img/s-12.jpg" alt="相册图片-示例图片(12)" width="230" height="144" /></a></li>
  28.                             <li class="album-carousel-thumb"><a href="img/13.jpg"><img src="img/s-13.jpg" alt="相册图片-示例图片(13)" width="230" height="144" /></a></li>
  29.                             <li class="album-carousel-thumb"><a href="img/14.jpg"><img src="img/s-14.jpg" alt="相册图片-示例图片(14)" width="230" height="144" /></a></li>
  30.                             <li class="album-carousel-thumb"><a href="img/15.jpg"><img src="img/s-15.jpg" alt="相册图片-示例图片(15)" width="230" height="144" /></a></li>
  31.                             <li class="album-carousel-thumb"><a href="img/16.jpg"><img src="img/s-16.jpg" alt="相册图片-示例图片(16)" width="230" height="144" /></a></li>
  32.                             <li class="album-carousel-thumb"><a href="img/17.jpg"><img src="img/s-17.jpg" alt="相册图片-示例图片(17)" width="230" height="144" /></a></li>
  33.                             <li class="album-carousel-thumb"><a href="img/18.jpg"><img src="img/s-18.jpg" alt="相册图片-示例图片(18)" width="230" height="144" /></a></li>
  34.                             <li class="album-carousel-thumb"><a href="img/19.jpg"><img src="img/s-19.jpg" alt="相册图片-示例图片(19)" width="230" height="144" /></a></li>
  35.                             <li class="album-carousel-thumb"><a href="img/20.jpg"><img src="img/s-20.jpg" alt="相册图片-示例图片(20)" width="230" height="144" /></a></li>
  36.                             <li class="album-carousel-thumb"><a href="img/21.jpg"><img src="img/s-21.jpg" alt="相册图片-示例图片(21)" width="230" height="144" /></a></li>
  37.                             <li class="album-carousel-thumb"><a href="img/22.jpg"><img src="img/s-22.jpg" alt="相册图片-示例图片(22)" width="230" height="144" /></a></li>
  38.                   </ul>
  39.                   </div>
  40.                    <a href="#next-group" class="album-carousel-btn-next" id="album-carousel-btn-next">›</a>
  41.          </div>
  42. </div>
复制代码
回复 支持 1 反对 0

使用道具 举报

发表于 2014-6-3 18:03:22 | 显示全部楼层
这是我可望而不可求的js面向对象编程啊
回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-6-3 18:10:13 | 显示全部楼层
不要意思,之前等比缩放的计算方法有点问题,请下载最新的jAlbum.zip文件,我已经在上面更新了
回复 支持 反对

使用道具 举报

发表于 2014-6-3 20:50:54 | 显示全部楼层
怎么老是处于loading状态?
回复 支持 反对

使用道具 举报

发表于 2014-6-3 20:51:59 | 显示全部楼层
yaohaixiao 发表于 2014-6-3 18:10
不要意思,之前等比缩放的计算方法有点问题,请下载最新的jAlbum.zip文件,我已经在上面更新了

为何textarea设置为可编辑的?
回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-6-4 08:59:13 | 显示全部楼层
loading的状态我看看,可能是我的便宜空间速度太慢的原因,我先看看,谢谢了!
回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-6-4 09:33:02 | 显示全部楼层
loading我基本可以确定是我的空间访问的问题,没有办法,买的便宜货,如果大家在本地测试的时候还发现有一直loading的BUG,请通知我!

另外,Carousel 里的缩略图我谢了TODO,不过本人测试使用delegate反而不太方便获取选中图片的索引值。jQuery的delegate如果提供一个代理对象的索引值就完美了。
回复 支持 反对

使用道具 举报

发表于 2014-6-6 17:33:12 | 显示全部楼层
支持一下,顺便mark
回复 支持 反对

使用道具 举报

发表于 2014-6-9 10:07:48 | 显示全部楼层
浏览器兼容性如何呢?
回复 支持 反对

使用道具 举报

发表于 2014-6-9 10:54:23 | 显示全部楼层
图片很性感
回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-6-10 09:36:02 | 显示全部楼层
未注册 发表于 2014-6-9 10:07
浏览器兼容性如何呢?

谁试谁知道!
回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-6-10 10:08:28 | 显示全部楼层

代码可以烂点,妹子一定要性感啊!
回复 支持 反对

使用道具 举报

发表于 2014-6-11 15:26:59 | 显示全部楼层
IE8,一直处于LOGING状态,且缩略图border有问题(right、bottom未显)
回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-9-1 15:18:54 | 显示全部楼层
IE8 的loading问题是proload的时候的代码兼容的问题
回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-9-1 15:20:52 | 显示全部楼层

  1. /**
  2.                  * 更新大图片和图片说明
  3.                  * @method change
  4.                  */
  5.                 change: function(){
  6.                         var Album = this,
  7.                         currentItem = Album.currentItem,
  8.                         image = Album.getImage(),
  9.                         title = Album.getTitle(),
  10.                         overlay = Album.getOverlay(),
  11.                         btnDownload = Album.getBtnDownload(),
  12.                         src = currentItem.find("a:first").attr("href"),
  13.                         alt = currentItem.find("img:first").attr("alt"),
  14.                         percent = 0,
  15.                         preloader = new Image(),
  16.                         loadingImage = function(evt){
  17.                                
  18.                                 var width = preloader.width,
  19.                                     height = preloader.height,
  20.                                         maxWidth = Album.getMaxWidth(),
  21.                                         maxHeight = Album.getMaxHeight();
  22.                                
  23.                                 // 获得图片的宽/高的比率
  24.                                 percent = width / height;
  25.                                
  26.                                 // 根据图片实际大小,等比缩放图片
  27.                                 // 图片的宽度大于 maxWidth
  28.                                 if (width > maxWidth) {
  29.                                         // 图片按照最大宽度显示(缩放)
  30.                                         // 图片的高度在maxHeight以内
  31.                                         width = maxWidth;
  32.                                         height = width / percent;
  33.                                        
  34.                                         // 按最大宽度缩放后,图片的高度仍超过maxHeight
  35.                                         // 这是要图片应该是一个纵向高度比较长的图片
  36.                                         if (height > maxHeight) {
  37.                                                 // 这里要将之前的最大宽度再按图片的长宽比来缩小
  38.                                                 // 这时的图片是高度等于maxHeight的
  39.                                                 // 而宽度是小于maxWidth的缩略图
  40.                                                 percent = maxHeight / height;
  41.                                                 width = width * percent;
  42.                                                 height = maxHeight;
  43.                                         }
  44.                                 }
  45.                                 else {
  46.                                         // 图片的原始宽度小于等于maxWidth
  47.                                         if (width <= maxWidth) {
  48.                                                 // 高度超过maxHeight,再等比调整图片高度
  49.                                                 if (height > maxHeight) {
  50.                                                     percent = maxHeight / height;
  51.                                                         width = width * percent;
  52.                                                         height = maxHeight;
  53.                                                 }
  54.                                         }
  55.                                 }
  56.                                
  57.                                 // 图片缩放和调整显示位置
  58.                                 image.animate({
  59.                                         "width": width + PX,
  60.                                         "height": height + PX
  61.                                         //"margin-left": -(width / 2) + PX,
  62.                                         //"margin-top": -(height / 2) + PX
  63.                                 }, 500, function(){
  64.                                         // 更新图片路径和图片alt属性
  65.                                         image.attr({
  66.                                                 "src": src,
  67.                                                 "alt": alt
  68.                                         });
  69.                                         // 更新图片说明文字
  70.                                         title.html(alt);
  71.                                         // 更新下载图片的链接路径
  72.                                         btnDownload.attr("href", src);
  73.                                        
  74.                                         // 隐藏loading图片的遮罩层
  75.                                         overlay.addClass(CLS_HIDE);
  76.                                         Album.isloading = false;
  77.                                 });
  78.                         };
  79.                        
  80.                         // 开始显示loading
  81.                         overlay.removeClass(CLS_HIDE);
  82.                         this.isloading = true;
  83.                        
  84.                         // 必须使用 preloader 来实现图片的load事件
  85.                         // preloader = new Image() 创建一个新的Image对象
  86.                         // 给 preloader 设置加载图片的路径
  87.                         preloader.src = src;                       

  88.             // hack for ie8
  89.             if(preloader.complete){
  90.                 loadingImage();
  91.                         }
  92.             else{
  93.                         // 之后就可以开始使用load事件,获得新的图片的实际尺寸
  94.                         // img标签是一个替换元素,我们不能在一开始就获得图片的实际大小
  95.                         // 必须是图片下载(load)完成后,才能获得实际大小
  96.                         $(preloader).load(loadingImage);
  97.                         }
  98.                         return this;
  99.                 },
复制代码
回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-9-1 15:36:36 | 显示全部楼层
http://pic.chetuan.com/21516/0/moren.html

这里是论坛的一位网友在利用Album特效改写的效果,这里就修复了 IE8 loading 的问题。另外,为了处理他这种切换不同的相册的 ajax 加载,在事件绑定时也hack了一下:

  1. // 鼠标点击图片左边区域,查看上一张图片
  2.                         prevBlock.unbind().click(function(evt){
  3.                                 Album.prev();
  4.                                
  5.                                 evt.preventDefault();
  6.                                 evt.stopPropagation();
  7.                         });
  8.                        
  9.                         // 鼠标点击图片右边区域,查看下一张图片
  10.                         nextBlock.unbind().click(function(evt){
  11.                                 Album.next();
  12.                                
  13.                                 evt.preventDefault();
  14.                                 evt.stopPropagation();
  15.                         });
  16.                        
  17.                         // 鼠标点击上一张按钮,查看上一张图片
  18.                         btnPrev.unbind().click(function(evt){
  19.                                 Album.prev();
  20.                                
  21.                                 evt.preventDefault();
  22.                                 evt.stopPropagation();
  23.                         });
  24.                        
  25.                         // 鼠标点击下一张按钮,查看下一张图片
  26.                         btnNext.unbind().click(function(evt){
  27.                                 Album.next();
  28.                                
  29.                                 evt.preventDefault();
  30.                                 evt.stopPropagation();
  31.                         });
复制代码
先 unbind()处理,移除掉相关组件的事件处理器。
回复 支持 反对

使用道具 举报

发表于 2014-12-29 11:49:25 | 显示全部楼层
标记标记标记标记标记
回复 支持 反对

使用道具 举报

发表于 2015-1-4 07:26:56 | 显示全部楼层
好贴收藏!
回复 支持 反对

使用道具 举报

发表于 2015-7-23 17:01:15 | 显示全部楼层
我来学习下的
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )

GMT+8, 2021-1-20 11:10 , Processed in 0.082606 second(s), 13 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表