关闭

点击查看大图,大图上带上一张 、下一张功能(粗糙版)

7730人阅读 评论(0) 收藏 举报
分类:

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;}




0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1592195次
    • 积分:11579
    • 等级:
    • 排名:第1319名
    • 原创:202篇
    • 转载:74篇
    • 译文:0篇
    • 评论:108条
    友情链接
    最新评论