클릭 하여 큰 그림 을 보고 큰 그림 에 한 장, 다음 기능 (거 친 판) 을 가 져 옵 니 다.
// 、
$.scanFile={
view:function(obj,imgName,imgPath){
//
var _that=$(obj);
var newIndex=_that.parents('li').index();
//
var str="<div class='scanBigPic'>
\
<div class='wrap'>
\
<img src=${imgUrl}data/upfiles/information/${loanDetail.proID}/"+ $(obj).parents('li').find('.bigPic').attr('value') +" />
\
<span class='close' title=' '></span>
\
<p class='imgName'>"+$(obj).parents('li').find('.inp2').attr('value')+"</p>
\
<a href='javascript:;' class='leftBtn viewBtn'></a>
\
<a href='javascript:;' class='rightBtn viewBtn'></a>
\
</div>
\
</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;}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.