1.回显图片
$("#yl").append("" + "<div class='imgDiv' style='width:350px; height:170px;float:left'" + " ondblclick='trouble_event.imgbig(this);'>" + "<img title='双击可查看大图' src='"+src+"' width='100%' height='100%' id='imgsrc' />" + " <a href='#'>" + "<img name='"+ data+"' onclick='trouble_event.deleteImg(this);' " +"src='删除图片地址' class='delet/>"+ "</a>" + "</div>");2.放大图片的遮罩层
<!-- 放大遮罩层 --><div id='bigimg' onclick='trouble_event.closeimg();'></div>3.放大预览函数
imgbig: function(e) { //放大预览图片 var imgsrc = $(e).find('#imgsrc').attr('src'); $("#bigimg").css("display","block"); $("#bigimg").html("<img src="+imgsrc+" />"); }, closeimg: function () { //关闭放大预览页面 $("#bigimg").css("display","none"); },4.删除函数：
deleteImg: function(e){ var imgsrc = $(e).offsetParent().find('img').attr('src'); var name= $(e).attr('name'); $.ajax({ url:web_path+"/rest/tdxxcGLS/delImg", type:'GET', data:{imgsrc:imgsrc,name:name}, error:function(){ mx.indicate("info", "请求失败"); }, success:function(data){ $(e).offsetParent().remove(); mx.indicate("info", "删除成功"); } }) },5.放大缩小函数：
var myimage = document.getElementById("ylimg"); if (myimage.addEventListener) { // IE9, Chrome, Safari, Opera myimage.addEventListener("mousewheel", trouble_event.MouseWheelHandler, false); // Firefox myimage.addEventListener("DOMMouseScroll", trouble_event.MouseWheelHandler, false); } // IE 6/7/8 else myimage.attachEvent("onmousewheel", trouble_event.MouseWheelHandler); MouseWheelHandler : function(e) { // cross-browser wheel delta var e = window.event || e; // old IE support var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); var myimage = document.getElementById("ylimg"); myimage.style.width = Math.max(200, Math.min(1200, myimage.width + (30 * delta))) + "px"; return false; } ,6.一些样式
/*=============上传图片样式====================*/ #bigimg { width: 80%; height: 800px; right:180px; background: white; top: 60px; /* left:450px; */ position: fixed; display: none; overflow: auto; } #bigimg img { width: 80%; margin-top: 0px; margin-left: 150px; /* height: 800px; */ /* position: fixed; */ left: 0; right: 0; top: 0; cursor: pointer; } .imgDiv { display: inline-block; position: relative; overflow:hidden; } /*设置动画执行的时间为0.6s*/ .imgDiv #imgsrc{ transition: all 0.6s; } /* 设置图片按照比例放大1.2倍*/ .imgDiv #imgsrc:hover { transform: scale(1.5); } /*鼠标移入时改变下属删除标签的样式 透明变成不透明 */ .imgDiv:hover .delete{ opacity: 1; } .imgDiv .delete { position: absolute; top: 0px; right: 0px; width: 20px; height: 20px; /*设置动画执行的时间为0.6s*/ transition: all 0.6s; opacity: 0; } /* 设置图片按照比例放大1.2倍*/ .imgDiv .delete:hover{ transform: scale(1.2); } /* 实现放大预览图片居中*/ #bigimg img{ display:inline-block; /*设置元素绝对定位*/ position:absolute; /*top 50%*/ top: 50%; /*left 50%*/ left: 50%; /*css3 transform 实现*/ transform: translate(-62%, -50%); } /*============================== */
