jQuery点击图片放大显示原图效果

发布时间：2023-09-06 01:43责任编辑：熊小新关键词：jQuery

HTML部分：
<div ></div>

JS代码部分：

//内容页图片点击放大效果

var imgBoxMod=$(".ctnlist .text img");

imgPop(imgBoxMod);

//内容页图片点击放大效果函数主体开始

function imgPop(imgBoxMod){

imgBoxMod.each(function(){

//超过最大尺寸时自动缩放内容页图片尺寸

var ctnImgWidth=$(this).width();

if(ctnImgWidth>618){

$(this).width(618);

}

//点击图片弹出层放大图片效果

$(this).click( function(){

$("#append_parent").html("<div js plain">imgzoom"><div js plain">imgzoom_zoomlayer" js plain">zoominner"><p><span js plain">y"><a title="在新窗口打开" target="_blank" js plain">imglink" js plain">imgzoom_imglink" href="">在新窗口打开</a><a title="关闭" js plain">imgclose">关闭</a></span></p><div js plain">imgzoom_img" js plain">hm"><img src="" js plain">imgzoom_zoom" style="cursor:pointer"></div></div></div><div js plain">imgzoom_cover"></div>"); //生成HTML代码

var domHeight =$(document).height(); //文档区域高度

$("#imgzoom_cover").css({"display":"block","height":domHeight});

var imgLink=$(this).attr("src");

$("#imgzoom_img #imgzoom_zoom").attr("src",imgLink);

$("#imgzoom").css("display","block");

imgboxPlace();

})

//关闭按钮

$("#append_parent .imgclose").live(‘click‘,function(){

$("#imgzoom").css("display","none");

$("#imgzoom_cover").css("display","none");

})

//新窗口打开图片

$("#imgzoom_imglink").live(‘click‘,function(){

var imgLink=$("#imgzoom_zoom").attr("src");

$("#imgzoom_imglink").attr("href",imgLink);

})

//弹出窗口位置

function imgboxPlace(){

var cwinwidth=$("#imgzoom").width();

var cwinheight=$("#imgzoom").height();

var browserwidth =$(window).width();//窗口可视区域宽度

var browserheight =$(window).height(); //窗口可视区域高度

var scrollLeft=$(window).scrollLeft(); //滚动条的当前左边界值

var scrollTop=$(window).scrollTop(); //滚动条的当前上边界值

var imgload_left=scrollLeft+(browserwidth-cwinwidth)/2;

var imgload_top=scrollTop+(browserheight-cwinheight)/2;

$("#imgzoom").css({"left":imgload_left,"top":imgload_top});

}

//内容页图片点击放大效果函数主体结束

CSS样式部分：

/* 图片放大弹出层 */

.zoominner {background: none repeat scroll 0 0 #FFFFFF; padding: 5px 10px 10px; text-align: left;}

.zoominner p {height:30px; _position:absolute; _right:2px; _top:5px;}

.zoominner p a { background: url("../images/imgzoom_tb.gif") no-repeat scroll 0 0 transparent; float: left; height: 17px; line-height: 100px; margin-left: 10px; overflow: hidden; width: 17px;}

.zoominner p a.imgadjust {background-position: -40px 0;}

.zoominner p a.imgclose { background-position: -80px 0; cursor:pointer;}

.y {float: right; margin-bottom:10px;}

.ctnlist .text img{ cursor:pointer;}

#imgzoom_cover{background-color:#000000; filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity:0.7; position:absolute; z-index:800; top:0px; left: 0px; width:100%; display:none;}

#imgzoom{ display:none; z-index:801; position:absolute;}

#imgzoom_img{_width:300px; _height:200px; min-width:300px; min-height:200px; background:url(../images/imageloading.gif) center center no-repeat;}

#imgzoom_zoomlayer{ _width:300px; _height:200px; _position:relative; _padding-top:30px; min-width:300px; min-height:200px;}

效果：

效果演示页：http://www.ipsfan.com/koutu/2011-10-02/77.html

http://rt.ipsfan.com/blog-6-41.html

jQuery点击图片放大显示原图效果

原文地址：https://www.cnblogs.com/hedianzhan/p/8459283.html

jQuery点击图片放大显示原图效果

知识推荐