div中添加多张img图片,点击img跳转页面查看大图
来源:互联网 发布:其待君王乎 编辑:程序博客网 时间:2024/05/21 22:46
var imgList = $.trim(that.find("td").eq(10).text()).split(";");var myDiv = document.getElementById("imgShow");for(var i=0; i < imgList.length; i++){ var img = document.createElement("img"); img.setAttribute("class", "newImg"); img.width =460; img.src = imgList[i]; img.onclick=function() {
var _this = $(this);//将当前的pimg元素作为_this传入函数imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);/*if(this.width == 460){ this.width+=200;} else { this.width = 460;}*//*this.style.zoom= 2;window.open(this.src);*/
} myDiv.appendChild(img);}
function imgShow(outerdiv, innerdiv, bigimg, _this){ var src = _this.attr("src");//获取当前点击的pimg元素中的src属性 $(bigimg).attr("src", src);//设置#bigimg元素的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});//设置#innerdiv的top和left属性 $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg }); $(outerdiv).click(function(){//再次点击淡出消失弹出层 $(this).fadeOut("fast"); });}
<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2000;width:100%;height:100%;display:none;"> <div id="innerdiv" style="position:absolute;"> <img id="bigimg" style="border:5px solid #fff;" src="" /> </div></div>
阅读全文
1 0
- div中添加多张img图片,点击img跳转页面查看大图
- div中添加<img>后图片下方多出3px空白
- jsp中点击<img>放大图片
- <img>标签,添加图片
- div 中img 居中
- DIV CSS图片_CSS img
- jsp页面中添加img标签图片显示为一个叉的解决思路
- 点击图片,查看大图
- PS_BaseUse_打开多张img
- jquery控制页面 div块中所有img 宽度
- 如何解决div中img图片下方空白问题
- img在div中居中
- div中img显示问题
- CSS-大图片img在父级容器div中居中的妙招
- myImage负责往页面中添加img标签
- div中img图片下方空白问题,div高度不等于img图片的高度,会留出几个像素
- 动态往div里添加img
- HTML:img标签usemap,一个图片中添加多个链接
- html中a链接的javascript确认框
- 测试
- 单调队列优化动态规划
- Ajax中POST和GET的区别
- 虚拟机执行命令提示 : Redirecting to /bin/systemctl restart sshd.service
- div中添加多张img图片,点击img跳转页面查看大图
- 每日一练11
- 神奇的Maven <resource>标签
- Linux 下清空或删除大文件内容的5中方法
- 权限 和 依赖
- 【解决】无法连接 MKS:套接字连接尝试次数太多正在放弃
- spring contrallor类的方法的3种返回值
- Java IO----磁盘IO工作机制
- JQuery3.1.1源码解读(十一)【event-main】