JS滾輪控制圖片縮放大小和拖動的實例代碼

來源：懂視網責編：小采時間：2020-11-27 22:03:47

JS滾輪控制圖片縮放大小和拖動的實例代碼

JS滾輪控制圖片縮放大小和拖動的實例代碼:具體代碼如下所示： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Document</title> <style> .dragAble { position: relat

推薦度：

點擊下載本文 文檔為doc格式

導讀JS滾輪控制圖片縮放大小和拖動的實例代碼:具體代碼如下所示： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Document</title> <style> .dragAble { position: relat

具體代碼如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 .dragAble {
 position: relative;
 cursor: move;
 }
 .img-con {
 position: relative;
 width: 713px;
 height: 455px;
 overflow: hidden;
 border: 1px solid red;
 }
 </style>
</head>
<body>
 <p class="img-con"><img src="http://img03.tooopen.com/uploadfile/downs/images/20110714/sy_20110714135215645030.jpg" class="dragAble" /></p>
 <script type="text/javascript" charset="utf-8">
 window.onload = function() {
 var oImg = document.getElementsByTagName("img")[0];
 function fnWheel(obj, fncc) {
 obj.onmousewheel = fn;
 if (obj.addEventListener) {
 obj.addEventListener('DOMMouseScroll', fn, false);
 }
 function fn(ev) {
 var oEvent = ev || window.event;
 var down = true;
 if (oEvent.detail) {
 down = oEvent.detail > 0
 } else {
 down = oEvent.wheelDelta < 0
 }
 if (fncc) {
 fncc.call(this, down, oEvent);
 }
 if (oEvent.preventDefault) {
 oEvent.preventDefault();
 }
 return false;
 }
 };
 fnWheel(oImg, function(down, oEvent) {
 var oldWidth = this.offsetWidth;
 var oldHeight = this.offsetHeight;
 var oldLeft = this.offsetLeft;
 var oldTop = this.offsetTop;
 var scaleX = (oEvent.clientX - oldLeft) / oldWidth; //比例
 var scaleY = (oEvent.clientY - oldTop) / oldHeight;
 if (down) {
 this.style.width = this.offsetWidth * 0.9 + "px";
 this.style.height = this.offsetHeight * 0.9 + "px";
 } else {
 this.style.width = this.offsetWidth * 1.1 + "px";
 this.style.height = this.offsetHeight * 1.1 + "px";
 }
 var newWidth = this.offsetWidth;
 var newHeight = this.offsetHeight;
 this.style.left = oldLeft - scaleX * (newWidth - oldWidth) + "px";
 this.style.top = oldTop - scaleY * (newHeight - oldHeight) + "px";
 });
 }
 <!--
 //拖拽
 var ie = document.all;
 var nn6 = document.getElementByIdx && !document.all;
 var isdrag = false;
 var y, x;
 var oDragObj;
 function moveMouse(e) {
 if (isdrag) {
 oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y) + "px";
 oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x) + "px";
 return false;
 }
 }
 function initDrag(e) {
 var oDragHandle = nn6 ? e.target : event.srcElement;
 var topElement = "HTML";
 while (oDragHandle.tagName != topElement && oDragHandle.className != "dragAble") {
 oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;
 }
 if (oDragHandle.className == "dragAble") {
 isdrag = true;
 oDragObj = oDragHandle;
 nTY = parseInt(oDragObj.style.top + 0);
 y = nn6 ? e.clientY : event.clientY;
 nTX = parseInt(oDragObj.style.left + 0);
 x = nn6 ? e.clientX : event.clientX;
 document.onmousemove = moveMouse;
 return false;
 }
 }
 document.onmousedown = initDrag;
 document.onmouseup = new Function("isdrag=false");
 </script>
</body>
</html>

只縮放

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img border="0" src="http://img03.tooopen.com/uploadfile/downs/images/20110714/sy_20110714135215645030.jpg" onmousewheel="return rollImg(this)">
</body>
<script language="javascript">
function rollImg(o){
 /* 獲取當前頁面的縮放比
 若未設置zoom縮放比，則為默認100%，即1，原圖大小
 */ 
 var zoom=parseInt(o.style.zoom)||100;
 /* event.wheelDelta 獲取滾輪滾動值并將滾動值疊加給縮放比zoom
 wheelDelta統一為±120，其中正數表示為向上滾動，負數表示向下滾動
 */
 zoom+=event.wheelDelta/12;
 /* 如果縮放比大于0，則將縮放比加載到頁面元素 */
 if (zoom>0) o.style.zoom=zoom+'%';
 /* 如果縮放比不大于0，則返回false，不執行操作 */
 return false;
}
</script>
</html>

總結

以上所述是小編給大家介紹的JS滾輪控制圖片縮放大小和拖動的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com