點選檢視大圖，大圖上帶上一張 、下一張功能（粗糙版）
阿新 • • 發佈：2019-01-28
js片段：
//掃描件檢視大圖、 和左右瀏覽 $.scanFile={ view:function(obj,imgName,imgPath){ //點選檢視大圖 var _that=$(obj); var newIndex=_that.parents('li').index(); //定義內容 var str="<div class='scanBigPic'>\n\ <div class='wrap'>\n\ <img src=${imgUrl}data/upfiles/information/${loanDetail.proID}/"+ $(obj).parents('li').find('.bigPic').attr('value') +" /> \n\ <span class='close' title='關閉'></span>\n\ <p class='imgName'>"+$(obj).parents('li').find('.inp2').attr('value')+"</p>\n\ <a href='javascript:;' class='leftBtn viewBtn'></a>\n\ <a href='javascript:;' class='rightBtn viewBtn'></a>\n\ </div>\n\ </div>"; //先刪除再追加並新增遮罩層 $('.scanBigPic').remove(); $("<div id='mask'> </div>").appendTo('body');//遮罩層 $('#mask').css({'width':$(document).width(),'height':$(document).height()}); $(str).appendTo('body'); $('.scanBigPic').css({'top':$(window).scrollTop()+'px'}); $(window).scroll(function(){ $('#mask').css({'width':$(document).width(),'height':$(document).height()}); }); //大圖的左邊按鈕事件 $('.scanBigPic').delegate('.leftBtn','click',function(){ $('.scanBigPic .rightBtn').show(); newIndex--; if(newIndex<0){ newIndex=0; $(this).undelegate('click'); alert("已經是第一張了！"); } $('.scanBigPic img').attr({"src":"${imgUrl}data/upfiles/information/${loanDetail.proID}/"+$('.saomiaoCont li').eq(newIndex).find('.bigPic').val()}) $('.scanBigPic .imgName').html($('.saomiaoCont li').eq(newIndex).find('.inp2').val()); }); //大圖的右邊按鈕事件 $('.scanBigPic .rightBtn').live('click',function(){ $('.scanBigPic .leftBtn').show(); newIndex++; if(newIndex > ($('.saomiaoCont li').length-1) ){ newIndex= ($('.saomiaoCont li').length-1); alert("已經是最後一張了！"); } $('.scanBigPic img').attr({"src":"${imgUrl}data/upfiles/information/${loanDetail.proID}/"+$('.saomiaoCont li').eq(newIndex).find('.bigPic').val()}) $('.scanBigPic .imgName').html($('.saomiaoCont li').eq(newIndex).find('.inp2').val()); }); //大圖片上的關閉按鈕 $('.scanBigPic .close').live('click',function(){ $(this).parents('.scanBigPic').remove(); $('#mask').remove(); }); }, slide:function(objLi,mainCell,leftBtn,rightBtn,cilentWidth){ var diff = $(objLi).length*$(objLi).width() - cilentWidth; var t; var speed=10; //速度 //動態設定移動層的寬度 $(mainCell).css({'width':$(objLi).length*$(objLi).width()+'px'}) //alert($('.saomiaoCont ul').width()); //判斷maincell的寬度如果和可視寬度一樣則不顯示左右滑動按鈕 if(parseInt($(mainCell).width())<=cilentWidth){ $(leftBtn).hide(); $(rightBtn).hide(); }else{ $(leftBtn).show(); $(rightBtn).show(); } $(rightBtn).mouseover(function(){ if ( parseInt($(mainCell).css('marginLeft')) > -diff ) { t=setInterval(function(){ $(mainCell).stop().animate({'marginLeft':'-='+speed+'px'},1,function(){ if (parseInt($(mainCell).css('marginLeft')) <= -diff ) { clearInterval(t); } }); },25); }; }).mouseout(function(){ clearInterval(t); }); $(leftBtn).mouseover(function(){ if ( parseInt($(mainCell).css('marginLeft')) < 0 ) { t=setInterval(function(){ $(mainCell).stop().animate({'marginLeft':'+='+speed+'px'},1,function(){ if ( parseInt($(mainCell).css('marginLeft')) >=0 ) { clearInterval(t); } }); },25); }; }).mouseout(function(){ clearInterval(t); }); } }
html片段：
<div class="saomiaoCont mt10"> <ul class="clearfix" style="width: 738px; "> <li> <img src="http://192.168.1.112:8080/yxhtWeb/data/upfiles/information/1339/thumbnail/13391386041707687.png" alt="" onclick="$.scanFile.view(this,'6','13391386041707687.png')"> <input class="bigPic" type="hidden" name="urlImg" value="13391386041707687.png"> <input class="inp2" type="hidden" name="urlName" value="6"> </li> <li> <img src="http://192.168.1.112:8080/yxhtWeb/data/upfiles/information/1339/thumbnail/13391386041708171.png" alt="" onclick="$.scanFile.view(this,'1','13391386041708171.png')"> <input class="bigPic" type="hidden" name="urlImg" value="13391386041708171.png"> <input class="inp2" type="hidden" name="urlName" value="1"> </li> <li> <img src="http://192.168.1.112:8080/yxhtWeb/data/upfiles/information/1339/thumbnail/13391386041708375.png" alt="" onclick="$.scanFile.view(this,'2','13391386041708375.png')"> <input class="bigPic" type="hidden" name="urlImg" value="13391386041708375.png"> <input class="inp2" type="hidden" name="urlName" value="2"> </li> <li> <img src="http://192.168.1.112:8080/yxhtWeb/data/upfiles/information/1339/thumbnail/13391386041708546.png" alt="" onclick="$.scanFile.view(this,'3','13391386041708546.png')"> <input class="bigPic" type="hidden" name="urlImg" value="13391386041708546.png"> <input class="inp2" type="hidden" name="urlName" value="3"> </li> <li> <img src="http://192.168.1.112:8080/yxhtWeb/data/upfiles/information/1339/thumbnail/13391386041708703.png" alt="" onclick="$.scanFile.view(this,'4','13391386041708703.png')"> <input class="bigPic" type="hidden" name="urlImg" value="13391386041708703.png"> <input class="inp2" type="hidden" name="urlName" value="4"> </li> <li> <img src="http://192.168.1.112:8080/yxhtWeb/data/upfiles/information/1339/thumbnail/13391386041708875.png" alt="" onclick="$.scanFile.view(this,'5','13391386041708875.png')"> <input class="bigPic" type="hidden" name="urlImg" value="13391386041708875.png"> <input class="inp2" type="hidden" name="urlName" value="5"> </li> </ul> <a class="leftBtn btn" href="javascript:" style="display: none; "></a> <a class="rightBtn btn" href="javascript:" style="display: none; "></a> </div>
css片段：
.scanCont{width:978px;border:1px solid #ccc;min-height:220px;} .scanCont ul li{width:180px;float:left;margin:-1px 0 15px 18px;position:relative;padding:20px;border-top:1px dashed #ccc;} .scanCont ul li:hover{background:#F4EED6;} .scanCont ul li img{display:block;margin:0 auto;vertical-align:middle;width:150px;padding:0 15px;background:#fff;height:120px;} .scanCont .inp2{width:115px;height:20px; border:1px solid #ddd; line-height:20px; padding:0 10px;} .scanCont .closeBtn{position:absolute;top:25px;right:25px;display:none;width:19px;height:19px;cursor:pointer;background:url(../images/scanClose.png) no-repeat;font-size:20px;} .scanBigPic {position:absolute;width:650px;height:898px;left:50%;margin-left:-325px;border:1px solid #ccc;z-index:1005;display:block;} .scanBigPic .wrap{width:650px;height:897px;positoin:relative;background:#fff;} .scanBigPic .wrap img{width:650px;height:897px;background:url(../images/loading_scanBigPic.gif) center center no-repeat;} .scanBigPic .wrap .close{position:absolute;width:19px;height:19px;top:10px;right:10px;background:url(../images/scanClose.png) no-repeat;} .scanBigPic .imgName{position:absolute;bottom:0;left:0;font-size:16px;color:#333;} #mask{position:absolute;top:0;left:0;background:#000;opacity:0.6;filter:alpha(opacity=60);z-index:1004;} .scanBigPic .viewBtn{display: block;width: 38px;height: 55px;background: url(../images/jinduBtn.png) no-repeat;opacity: 0.2;filter: alpha(opacity=20);overflow: hidden;position: absolute;top:421px;cursor: pointer;} .scanBigPic .leftBtn{left:0;} .scanBigPic .rightBtn{right:0;background-position: right 0;}