页面效果如下:
完整代码如下:
<!DOCTYPE html> <html> <head> <title>Test</title> </head> <body> <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/3c6d55fbb2fb4316352d920a22a4462309f7d394.jpg" class="pop_img" width="100"/> <img src="https://www.baidu.com/img/bd_logo1.png" class="pop_img" width="100"/> <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1467616821&di=75b53e3cd8ea11fc5175c58b3b80c79f&src=http://imga1.pic21.com/bizhi/130925/01465/s01.jpg" class="pop_img" width="100"/> <img src="http://cdn.duitang.com/uploads/item/201408/09/20140809142509_hj8Tf.thumb.700_0.png" class="pop_img" width="100"/> <img src="http://www.ce.cn/cysc/mobile/paper/200807/01/W020080701559328475897.jpg" class="pop_img" width="100"/> <script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script> </body> </html> <script type="text/javascript"> var utils = { /* 图片弹窗默认宽度600 高度400 */ createImg:function(src){ var browW = $(window).width()-100;//浏览器宽度 var browH = $(window).height();//浏览器高度 var styleW = 600;//蒙版宽度 var styleH = 400;//蒙版高度 var imgW = 0;//图片显示宽度 var imgH = 0;//图片显示高度 var left = 0;//图片距离左侧距离 var top = 0;//图片距离顶部距离 var baseScale = 2;//单次滚轮方法倍率百分比单位 var _left = ($(window).width() - 600)/2;//蒙版距离左侧距离 var _top = ($(window).height() - 400)/2;//蒙版距离顶部距离 var imgtemp = new Image();//创建一个image对象 imgtemp.onload = function(){//图片加载完成后执行 var _stemp = this;//将当前指针复制给新的变量,不然会导致变量共用 var realWidth = this.width;//图片真实宽度 var realHeight = this.height;////图片真实高度 if(realWidth >= realHeight){//宽屏图片 if(realWidth<=600){//宽度小于600的图 if(realHeight <= 400){ imgW = realWidth; imgH = realHeight; left = (600-realWidth)/2; top = (400-realHeight)/2; }else{ imgH = 400; imgW = (400/realHeight)*realWidth; left = (600 - imgW)/2; } }else{//宽度大于600的图 styleW = browW; styleH = browH; _left = 50; _top = 0; if(realWidth<=browW){//宽度小于浏览器的宽度 if(realHeight <= browH){ imgW = realWidth; imgH = realHeight; left = (browW-realWidth)/2; top = (browH-realHeight)/2; }else{ imgH = browH; imgW = (browH/realHeight)*realWidth; left = (browW - imgW)/2; } }else{//宽屏图片 if(realHeight <= browH){ imgW = browW; imgH = realHeight*(imgW/realWidth); top = (browH - imgH)/2; }else{ if((browW/realWidth)*realHeight >= browH){ imgH = browH; imgW = (imgH/realHeight)*realWidth; left = (browW - imgW)/2; }else{ imgW = browW; imgH = (imgW/realWidth)*realHeight; top = (browH - imgH)/2; } } } } }else{//竖屏图片 if(realHeight <= 400){ imgW = realWidth; imgH = realHeight; left = (600-realWidth)/2; top = (400-realHeight)/2; }else{//高度大于400的图 styleW = browW; styleH = browH; _left = 50; _top = 0; if(realHeight <= browH){ imgW = realWidth; imgH = realHeight; left = (browW-realWidth)/2; top = (browH-realHeight)/2; }else{//高度大于浏览器高度 imgH = browH; imgW = (imgH/realHeight)*realWidth; left = (browW - imgW)/2; } } } //这里创建弹窗 var html = []; html.push(‘<style type="text/css">‘); html.push(‘#dynamic-close{text-decoration:none;}‘); html.push(‘#dynamic-close:hover{text-decoration:none;background:#f00!important;}‘); html.push(‘</style>‘); html.push(‘<div id="dynamicImage" style="width:‘+styleW+‘px;height:‘+styleH+‘px;background:rgba(0,0,0,.3);position:fixed;top:‘+_top+‘px;left:‘+ _left+‘px;z-index:11111;box-shadow: 0px 0px 10px #000;border-radius:5px;overflow:hidden;">‘); html.push(‘ <img src="‘+ src +‘" style="width:‘+ imgW +‘px;height:‘+ imgH +‘px;position:absolute;top:‘+ top +‘px;left:‘+ left +‘px;" />‘); html.push(‘ <a href="javascript:;" id="dynamic-close" style="width:60px;height:60px;text-align:center;background:#000;font-size:40px;color:#fff;line-height:60px;position:absolute;top:5px;right:5px;border-radius:30px;" title="关闭">✕</a>‘); html.push(‘ <span id="loading_tip" style="background:rgba(0,0,0,.7);border-radius:5px;width:100px;height:30px;font-size:14px;color:#fff;line-height:30px;text-align:center;position:absolute;top:50%;left:50%;margin-top:-15px;margin-left:-50px;z-index:1111;display:none;">100%</span>‘); html.push(‘</div>‘); $(‘body‘).append(html.join(‘‘)); $(‘#dynamic-close‘).on(‘click‘,function(){ $(this).parent().remove(); }); var percentDefault = 100; var timer = null; function countImg(direction){ clearTimeout(timer); var baseW = Math.floor(parseFloat(imgW/50)); var baseH = Math.floor(parseFloat(imgH/50)); var img = $(‘#dynamicImage img‘); var width = parseFloat(img.css(‘width‘)); var height = parseFloat(img.css(‘height‘)); var top = parseFloat(img.css(‘top‘)); var left = parseFloat(img.css(‘left‘)); var loadingTip = $(‘#loading_tip‘); loadingTip.fadeIn(200); if(direction == 1){ img.css({ width:(width+baseW)+‘px‘, height:(height+baseH)+‘px‘, top:(top-baseH/2)+‘px‘, left:(left-baseW/2)+‘px‘ }) percentDefault = percentDefault+2; loadingTip.text(percentDefault+‘%‘); }else{ if(percentDefault == 6){ return; } img.css({ width:(width-baseW)+‘px‘, height:(height-baseH)+‘px‘, top:(top+baseH/2)+‘px‘, left:(left+baseW/2)+‘px‘ }) percentDefault = percentDefault-2; loadingTip.text(percentDefault+‘%‘); } timer = setTimeout(function(){ loadingTip.fadeOut(200); },1000); } function scrollFunc(e){ if (e.wheelDelta) { //判断浏览器IE,谷歌滑轮事件 if (e.wheelDelta > 0) { //当滑轮向上滚动时 countImg(-1); } if (e.wheelDelta < 0) { //当滑轮向下滚动时 countImg(1); } } else if (e.detail) { //Firefox滑轮事件 if (e.detail> 0) { //当滑轮向上滚动时 countImg(-1); } if (e.detail< 0) { //当滑轮向下滚动时 countImg(1); } } } /*注册滚轮事件*/ if(document.addEventListener){//火狐 document.addEventListener(‘DOMMouseScroll‘,scrollFunc,false); } //W3C window.onmousewheel=document.onmousewheel = scrollFunc; } imgtemp.src = src;//指定url } } </script> <script> $(‘body‘).dblclick(function(e){ var e = e || window.event; var target = e.target || e.srcElement; if(target.nodeName == ‘IMG‘ && $(target).hasClass(‘pop_img‘)){ if($(‘#dynamicImage‘).length>0){ $(‘#dynamicImage‘).remove(); } var _this = $(target); utils.createImg(_this.attr(‘src‘)); $(‘#dynamicImage‘).draggable(); } }); </script>
代码可以直接运行
时间: 2024-10-10 22:47:09