点击小图显示大图JS代码

发布时间:2016-07-08 18:27 | 人气数:1370
HTML代码:
<img onclick="imgClick(this.src)" src="{$item.logo_url}" style="width:110px;height:45px">
<div class="previewimgpeanl">
    <div class="pipt"><a href="javascript:closePreview();">关闭</a></div>
    <div class="pipi"><img src=""></div>
</div>

JS代码:

function imgClick(url){
    $(".pipi img").attr("src",url);
    var topv =$(document).scrollTop()+200;
    var left = $(".previewimgpeanl").width()/2;
    $(".previewimgpeanl").css({'margin-left':-left+"px",'top':topv});
    openPreview();
}
function openPreview(){
    $(".previewimgpeanl").show();
}
function closePreview(){
    $(".previewimgpeanl").hide();
}

关键词:图片, jquery, 显示大图, jq