首页 > 代码库 > 点击出大图
点击出大图
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < html xmlns = "http://www.w3.org/1999/xhtml" > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" /> < title >无标题文档</ title > < style type = "text/css" > .close{ width:30px; height:30px; background:url(images/close_3.png) no-repeat 0 0; position:fixed; top:5px; right:30px; _position:absolute; _top:expression(documentElement.scrollTop+5+"px"); cursor:pointer;} .close:hover{ background:url(images/close_3.png) no-repeat -30px 0;} </ style > < script type = "text/javascript" charset = "utf-8" src = "js/jquery2.1.1.min.js" ></ script > < script type = "text/javascript" > function imgShow(_this){ var src = _this.attr("src"); $("#bigimg").attr("src", src); $("< img />").attr("src", src).load(function(){ var windowW = $(window).width(); var windowH = $(window).height(); var realWidth = this.width; var realHeight = this.height; var imgWidth, imgHeight; var scale = 0.8; if(realHeight>windowH*scale) { imgHeight = windowH*scale; imgWidth = imgHeight/realHeight*realWidth; if(imgWidth>windowW*scale) { imgWidth = windowW*scale; } } else if(realWidth>windowW*scale) { imgWidth = windowW*scale; imgHeight = imgWidth/realWidth*realHeight; } else { imgWidth = realWidth; imgHeight = realHeight; } $("#bigimg").css("width",imgWidth); var w = (windowW-imgWidth)/2; var h = (windowH-imgHeight)/2; $("#innerdiv").css({"top":h, "left":w}); $("#outerdiv").fadeIn("fast"); }); } </ script > </ head > < body > < img src = "images/n_2a.jpg" width = "100px" height = "100px" onclick = "imgShow($(this))" /> < div id = "outerdiv" style = "position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:999;width:100%;height:100%;display:none;" > < a class = "close" onclick = "$(‘#outerdiv‘).fadeOut(‘fast‘);" ></ a > < div id = "innerdiv" style = "position:absolute;" >< img id = "bigimg" style = "border:5px solid #fff;" src = "" /></ div > </ div > </ body > </ html >
点击出大图
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。