前回の記事では、画像コレクションの表示を実現しました。この記事では、前回の記事の内容をカプセル化し、実装効果にいくつかの最適化を加えました。以下では、具体的なアイデアについては説明しません。参考までにコードを掲載します。
1. imglist.css
rree
html, body, .modal-bg { height: 100%; margin: 0; padding: 0; font-size: 13px; font-weight: bold; color: #fff;}.modal-bg{ position: absolute; left: 0px; top: 0px; width: 100%; background: #48525e; opacity: 0.4; z-index: 10;}.modal{ position: relative; z-index: 99; opacity: 1; top: 15%; left: 40%; width: 600px; height: 400px;}.modal .title .tips-bg{ position: absolute; bottom: 0px; left: 0px; background: #48525e; width: 100%; height: 50px; opacity: 0.8;}.modal .title .tips{ position: absolute; bottom: 13px; left: 10px; font-family: "Arial"; font-weight: bold; font-size: 20px;}.modal .title .close{ background: url(../img/close.png) no-repeat; width: 27px; height: 27px; position: absolute; top: 5px; right: 5px;}.modal .title .close:hover{ cursor: pointer;}.container{ position: absolute; top: 200px; text-align: center; width: 100%; z-index: 5;}.image-list{ margin-left: 40%; position: relative;}#prev{ display: none; width: 45px; height: 50px; background: url(../img/prev.png);}#next{ width: 45px; height: 50px; background: url(../img/next.png);}#prev:hover,#next:hover{ cursor: pointer;}.page-num{ position: absolute; right: 8px; bottom: 15px; border: 2px solid #fff; font-weight: bold; background: #666666; color: #fff; border-radius:15px; text-align: center; padding: 3px; width: 15px; font-size: 13px;}.thumb-a{ display:inline-block; padding:4px; margin:0 0.5rem 1rem 0.5rem 1rem; line-height:0; -webkit-transition:background-color 0.1s ease-out; -moz-transition:background-color 0.1s ease-out; -o-transition:background-color 0.1s ease-out; transition:background-color 0.1s ease-out; -webkit-border-radius:6px; -moz-border-radius:6px; -ms-border-radius:6px; -o-border-radius:6px; border-radius:6px}.thumb-a:hover{ background-color:#4ae; cursor: pointer;}.thumb-a-hide{ display: none;}.thumb-img{ -webkit-border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; -o-border-radius:5px; border-radius:5px}(function($){ $.fn.imgList = function(options){ var defaults = {}; var options = $.extend(defaults, options); var container=$(this); var imgUrls = options.imgurls; var autoPlay = options.autoplay; var thumbWidth = options.thumbwidth, thumbHeight = options.thumbheight, detailWidth = options.detailwidth,detailHeight = options.detailheight; var length,imgIndex=1; length = imgUrls.length; var play; var imgList = $("<div></div>").addClass("image-list").css("width",thumbWidth+"px"); $(".image-list").live("mouseenter",function(){ play = clearInterval(play); divCtrl.show(); }); $(".image-list").live("mouseleave",function(){ play = setInterval(playImg,3000); divCtrl.hide(); }); var divPageNum = $("<div></div>").addClass("page-num").html(imgIndex); divPageNum.appendTo(imgList); var divCtrl = $("<div></div>").css("width","100%").css("height","100%").hide(); var divPrev = $("<div></div>").attr("id","prev"), divNext = $("<div></div>").attr("id","next"); divPrev.css("position","absolute"), divNext.css("position","absolute"); divPrev.css("top",(thumbHeight/2-25)+"px"), divNext.css("top",(thumbHeight/2-25)+"px"); divPrev.css("left","-10px"), divNext.css("right","-12px"); divPrev.on("click",function(){ if(imgIndex>1){ imgIndex=imgIndex-1; } for(var i=0;i<length;i++){ $("#img"+(i+1)).addClass("thumb-a-hide"); } $("#img"+imgIndex).removeClass("thumb-a-hide"); divPageNum.html(imgIndex); if(imgIndex===length){ $("#next").hide(); } else{ $("#next").show(); } if(imgIndex===1){ $("#prev").hide(); } else{ $("#prev").show(); } }); divNext.on("click",function(){ if(imgIndex<length){ imgIndex=imgIndex+1; } for(var i=0;i<length;i++){ $("#img"+(i+1)).addClass("thumb-a-hide"); } $("#img"+imgIndex).removeClass("thumb-a-hide"); divPageNum.html(imgIndex); if(imgIndex===length){ $("#next").hide(); } else{ $("#next").show(); } if(imgIndex===1){ $("#prev").hide(); } else{ $("#prev").show(); } }); divPrev.appendTo(divCtrl); divNext.appendTo(divCtrl); divCtrl.appendTo(imgList); imgList.appendTo(container); for(var i= 0;i<length;i++){ var aImg = $("<a></a>").attr("id","img"+(i+1)).addClass("thumb-a"); if(i>0){ aImg.addClass("thumb-a-hide"); } var img = $("<img height='"+thumbHeight+"' width='"+thumbWidth+"'/>").addClass("thumb-img"); img .attr("src",imgUrls[i]); img.appendTo(aImg); aImg.appendTo(imgList); aImg.on("click",function(){ play = clearInterval(play); var winWidth = $(window).width(),winHeight = $(window).height(); var modalBg = $("<div></div>"); modalBg.addClass("modal-bg"); modalBg.appendTo($('body')); var modal = $("<div></div>"); modal.addClass("modal"); modal.css("position","absolute") .css("top",(winHeight-detailHeight)/2+"px") .css("left",(winWidth-detailWidth)/2+"px"); var titleTipsBg = $("<div></div>").addClass("tips-bg"); var titleTips = $("<a></a>").addClass("tips").html("I am a Chinese."); var titleClose = $("<a></a>").addClass("close"); var title = $("<div></div>"); title.addClass("title"); title.append(titleTipsBg) .append(titleTips) .append(titleClose); titleClose.on("click",function(){ modalBg.hide(); modal.hide(); }); title.appendTo(modal); var img = $("<img />"); img.attr("width",detailWidth) .attr("height",detailHeight) .attr("src","img/demopage/image-"+imgIndex+".jpg"); var imgDiv = $("<div></div>").append(img); imgDiv.appendTo(modal); modal.appendTo($('body')); }); } if(autoPlay){ play = setInterval(playImg,3000); } function playImg(){ if(imgIndex===length){ imgIndex=0; } divNext.click(); } }})(jQuery);
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
