js仿QQ实现图片缩放功能_autojsqq强制聊天资源-CSDN文库

共8个文件

jpg：5个

png：2个

html：1个

图片缩放

仿QQ图片缩放

图片放大缩小

5星 · 超过95%的资源需积分: 9 126 浏览量 2013-08-20 15:36:18 上传评论收藏 341KB ZIP 举报

在JavaScript编程领域，实现类似QQ的图片缩放功能是一项常见的需求，这主要涉及到网页的交互体验和图片处理技术。本文将详细讲解如何使用JavaScript来创建一个具有双击放大、滚轮缩放功能的图片查看器。我们需要理解基本的HTML结构。在页面中，图片通常作为一个`<img>`元素存在，我们可以通过设置`src`属性来指定图片的URL。为了实现双击放大效果，我们需要监听`dblclick`事件，当用户双击图片时触发相应的处理函数。例如： ```html <img id="image" src="path/to/your/image.jpg" /> ``` 接着，我们来处理JavaScript部分。创建一个`zoomImage`函数，用于初始化图片缩放功能： ```javascript function zoomImage(imgElement) { // 存储原始宽高 imgElement.dataset.originalWidth = imgElement.naturalWidth; imgElement.dataset.originalHeight = imgElement.naturalHeight; // 添加双击事件监听 imgElement.addEventListener('dblclick', toggleZoom); // 添加滚轮事件监听 imgElement.addEventListener('wheel', handleWheel); } ``` 在`toggleZoom`函数中，我们将切换图片的缩放状态，可以使用CSS变换（`transform`）来实现放大和缩小： ```javascript function toggleZoom(event) { let img = event.target; if (img.style.transform === 'scale(1)') { img.style.transform = 'scale(1.2)'; } else { img.style.transform = 'scale(1)'; } } ``` 为了实现滚轮缩放，我们需要在`handleWheel`函数中捕捉滚轮事件的delta值，并据此调整图片的缩放比例： ```javascript function handleWheel(event) { let img = event.target; let scale = img.style.transform.replace('scale(','').replace(')','').split(',')[0] || 1; let newScale = scale + (event.deltaY > 0 ? -0.1 : 0.1); // 防止过度缩放 if (newScale < 0.5) newScale = 0.5; if (newScale > 2) newScale = 2; img.style.transform = `scale(${newScale})`; // 阻止默认的页面滚动行为 event.preventDefault(); } ``` 别忘了在页面加载完成后调用`zoomImage`函数，传入我们的图片元素： ```javascript document.addEventListener('DOMContentLoaded', function() { let image = document.getElementById('image'); zoomImage(image); }); ``` 以上代码实现了基本的图片双击放大和滚轮缩放功能。当然，为了提供更好的用户体验，你可能还需要添加一些额外的细节，比如图片居中、边界检测以及动画效果等。在实际项目中，你也可以考虑使用现有的库，如`react-responsive-images`或`vue-image-zoom`等，它们提供了更丰富的功能和优化。通过这个例子，我们可以了解到JavaScript在网页动态效果中的应用，以及如何利用CSS3的`transform`属性进行图片缩放。在实际开发中，这种技术常用于图片查看器、画廊应用等场景，提升用户的交互体验。

资源推荐

资源详情

资源评论

收起资源包目录

zoom_image.zip （8个子文件）

zoom_image

images

cat51.jpg 57KB

cat67.jpg 105KB

cat01.jpg 57KB

close_hover.png 4KB

cat68.jpg 45KB

cat69.jpg 68KB

close_layer.png 4KB

zoom_image.html 8KB

<!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"> .tab_lay_a01{-moz-opacity: 0.8; opacity:.50;filter: alpha(opacity=50); height:10px; width:10px; background:#616161;} .tab_lay_a02{-moz-opacity: 0.8; opacity:.50;filter: alpha(opacity=50); height:10px; background:#616161;} </style> <script type="text/javascript"> //获取图片原始宽高 function getImg_W_H(){ var img = new Image(); img.src = this.src; w_init = img.width; h_init = img.height; } </script> </head> <body> <div style="padding-top:30px;"> <img src="images/cat01.jpg" onload="getImg_W_H.call(this);" height="180" title="点击放大" onclick="getImg_W_H.call(this);PhotoSize.init();showZoomDiv.call(this);"/> <img src="images/cat51.jpg" onload="getImg_W_H.call(this);" height="180" title="点击放大" onclick="getImg_W_H.call(this);PhotoSize.init();showZoomDiv.call(this);"/> <img src="images/cat67.jpg" onload="getImg_W_H.call(this);" height="180" title="点击放大" onclick="getImg_W_H.call(this);PhotoSize.init();showZoomDiv.call(this);"/> <img src="images/cat68.jpg" onload="getImg_W_H.call(this);" height="180" title="点击放大" onclick="getImg_W_H.call(this);PhotoSize.init();showZoomDiv.call(this);"/> <img src="images/cat69.jpg" onload="getImg_W_H.call(this);" height="180" title="点击放大" onclick="getImg_W_H.call(this);PhotoSize.init();showZoomDiv.call(this);"/> <img src="http://i2.sinaimg.cn/ast/2012/1212/U7132P54DT20121212112206.jpg" height="180" title="点击放大" onclick="getImg_W_H.call(this);PhotoSize.init();showZoomDiv.call(this);"/> </div>  <div id="focusphoto_div" style="display:none; position:absolute; z-index:9999; top:10px; width:100%;text-align:center; margin:0 auto;"> <table cellpadding="0" cellspacing="0"> <tr> <td class="tab_lay_a01"></td> <td class="tab_lay_a02" ></td> <td class="tab_lay_a01"><div style="float: left; z-index:9999; margin-left:-15px; vertical-align:bottom; position:absolute; "> <img src="images/close_layer.png" onclick="closeDiv();" style="cursor:pointer;" title="关闭" onmouseover="this.src='images/close_hover.png';" onmouseout="this.src='images/close_layer.png';"/> </div></td> </tr> <tr> <td class="tab_lay_a01">  </td> <td> <div id="multipleVal" style="z-index:9998; position:absolute; width:100px;height:30px;line-height:30px; border:1pt solid #BEBEBE;margin:0 auto;color:#FFF;font-weight:bold;font-size:18px;background:#000000;filter: alpha(opacity=40);;font-family:Georgia, serif;">100 %</div> <img id="focusphoto" style="cursor:move;border:2px solid #FFF;" src="" title="滑动鼠标滚轮进行图片缩放，双击可关闭" onmousewheel="scrollFunc()" ondblclick="closeDiv();" onmousedown="drag('focusphoto_div',event)" /> </td> <td class="tab_lay_a01">  </td> </tr> <tr> <td class="tab_lay_a01"></td> <td class="tab_lay_a02"></td> <td class="tab_lay_a01"></td> </tr> </table> </div>  </body> <script type="text/javascript"> /** 以下层拖拽特效js */ function drag(elementToDrag,event){ var elementToDrag = document.getElementById(elementToDrag); var startX=event.clientX,startY=event.clientY; var origX=elementToDrag.offsetLeft,origY=elementToDrag.offsetTop; var deltaX=startX-origX,deltaY=startY-origY; if(document.addEventListener){ document.addEventListener("mousemove",moveHandler,true); document.addEventListener("mouseup",upHandler,true); } else{ elementToDrag.setCapture(); elementToDrag.attachEvent("onmousemove",moveHandler); elementToDrag.attachEvent("onmouseup",upHandler); elementToDrag.attachEvent("onlosecapture",upHandler); } if(event.stopPropagation) {event.stopPropagation();} else{event.cancelBubble=true;} if(event.preventDefault){ event.preventDefault();} else {event.returnValue=false;} function moveHandler(e){ if(!e) e=window.event; elementToDrag.style.left=(e.clientX-deltaX)+"px"; elementToDrag.style.top=(e.clientY-deltaY)+"px"; if(e.stopPropagation){e.stopPropagation();} else{ e.cancelBubble = true;} } function upHandler(e){ if(!e) e=window.event; if(document.removeEventListener){ document.removeEventListener("mouseup",upHandler,true); document.removeEventListener("mousemove",moveHandler,true); } else{ elementToDrag.detachEvent("onlosecapture",upHandler); elementToDrag.detachEvent("onmouseup",upHandler); elementToDrag.detachEvent("onmousemove",moveHandler); elementToDrag.releaseCapture(); } if(e.stopPropagation){ e.stopPropagation();} else{ e.cancelBubble=true;} } } /** 以下是图片缩放js */ var w_init =0; //图片初始宽度记录 var h_init=0;//图片初始高度记录 var t_init = 50; //缩放层初始距离顶部的top值 var l_init = 350;//缩放层初始距离左边的left值 var PhotoSize = { zoom: 0, // 缩放率 count: 0, // 缩放次数 cpu: 0, // 当前缩放倍数值 elem: "", // 图片节点 focusphotoDiv:"",//缩放图片的外框div层 photoWidth: 0, // 图片初始宽度记录 photoHeight: 0, // 图片初始高度记录 init: function(){ this.elem = document.getElementById("focusphoto"); this.focusphotoDiv=document.getElementById("focusphoto_div"); this.focusphotoDiv.style.top = t_init +"px"; this.focusphotoDiv.style.left = l_init +"px"; this.focusphotoDiv.style.width = w_init + 3 +"px"; this.focusphotoDiv.style.height = h_init+ 3 +"px"; this.zoom = 1; // 设置基本参数 this.count = 0; this.cpu = 1; }, action: function(x){ this.count = this.count + x; // 添加记录 if(this.count < 0){ this.count = 0; } if(this.count > 40){ this.count = 40; } this.cpu = (this.zoom + this.count/10)*100; if(this.cpu > 500){ this.cpu= 500; }else if(this.cpu < 100){ this.cpu= 100; } var tempWidth = w_init * this.cpu/100; var tempHeight = h_init * this.cpu/100; var minWidth = w_init; //最大宽度 var minHeight = h_init; //最小高度 this.elem.style.width = tempWidth +"px"; this.elem.style.height = tempHeight +"px"; this.focusphotoDiv.style.width = tempWidth + 3 +"px"; this.focusphotoDiv.style.height = tempHeight + 3 +"px"; document.getElementById("multipleVal").innerText = parseInt(this.cpu)+" %"; if(x<0&&(tempWidth<minWidth)&&(tempHeight<minHeight)){ this.elem.style.width = minWidth + "px"; this.elem.style.height = minHeight +"px"; this.focusphotoDiv.style.width = minWidth + 3 +"px"; this.focusphotoDiv.style.height = minHeight + 3 +"px"; document.getElementById("multipleVal").innerText = 100+"%"; } } }; // 启动放大缩小效果,用onload方式加载，防止第一次点击获取不到图片的宽高 function showZoomDiv(){ document.getElementById("focusphoto").src=this.src; document.getElementById("focusphoto").style.width = w_init +"px"; document.getElementById("focusphoto").style.height = h_init +"px"; document.getElementById("focusphoto_div").style.width = w_init+ 3 +"px"; document.getElementById("focusphoto_div").style.height = h_init + 3 +"px"; document.getElementById("focusphoto_div").style.top = t_init +"px"; document.getElementById("focusphoto_div").style.left = l_init +"px"; document.getElementById("multipleVal").innerText ="100 %"; showOrHidden('focusphoto_div','block'); } function showOrHidden(id,displayVal){ document.getElementById(id).style.display = displayVal; } /** *关闭缩放div，并清空内容 */ function closeDiv(){ showOrHidden('focusphoto_div','none'); if(w_init

评论收藏

内容反馈