JS滾輪控制圖片縮放大小和拖動(dòng)的實(shí)例代碼
具體代碼如下所示:
<!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){ /* 獲取當(dāng)前頁(yè)面的縮放比 若未設(shè)置zoom縮放比,則為默認(rèn)100%,即1,原圖大小 */ var zoom=parseInt(o.style.zoom)||100; /* event.wheelDelta 獲取滾輪滾動(dòng)值并將滾動(dòng)值疊加給縮放比zoom wheelDelta統(tǒng)一為±120,其中正數(shù)表示為向上滾動(dòng),負(fù)數(shù)表示向下滾動(dòng) */ zoom+=event.wheelDelta/12; /* 如果縮放比大于0,則將縮放比加載到頁(yè)面元素 */ if (zoom>0) o.style.zoom=zoom+'%'; /* 如果縮放比不大于0,則返回false,不執(zhí)行操作 */ return false; } </script> </html>
總結(jié)
以上所述是小編給大家介紹的JS滾輪控制圖片縮放大小和拖動(dòng)的實(shí)例代碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
初學(xué)js插入節(jié)點(diǎn)appendChild insertBefore使用方法
由于可見(jiàn)insertBefore()方法的特性是在已有的子節(jié)點(diǎn)前面插入新的節(jié)點(diǎn)但是兩種情況結(jié)合起來(lái)發(fā)現(xiàn)insertBefore()方法插入節(jié)點(diǎn),是可以在子節(jié)點(diǎn)列表的任意位置。2011-07-07JavaScript實(shí)現(xiàn)的鼠標(biāo)響應(yīng)顏色漸變效果完整實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的鼠標(biāo)響應(yīng)顏色漸變效果,涉及javascript面向?qū)ο蠹笆录O(jiān)聽(tīng)、響應(yīng)機(jī)制相關(guān)操作技巧,需要的朋友可以參考下2017-02-0230分鐘快速實(shí)現(xiàn)小程序語(yǔ)音識(shí)別功能
最近需要在小程序上實(shí)現(xiàn)語(yǔ)音識(shí)別,將需要用到的功能都總結(jié)下,供大家參考。語(yǔ)音識(shí)別用的是科大訊飛,文中給出了詳細(xì)的實(shí)現(xiàn)方法介紹,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11ASP中進(jìn)行HTML數(shù)據(jù)及JS數(shù)據(jù)編碼函數(shù)
在有些時(shí)候我們無(wú)法控制亂碼的出現(xiàn), 比如發(fā)送郵件的時(shí)候有些郵件顯示亂碼, 比如Ajax返回?cái)?shù)據(jù)總是亂碼. 怎么辦?2009-11-11