JS實(shí)現(xiàn)放大、縮小及拖拽圖片的方法【可兼容IE、火狐】
本文實(shí)例講述了JS實(shí)現(xiàn)放大、縮小及拖拽圖片的方法。分享給大家供大家參考,具體如下:
var divId; var v_left; var v_top; window.onload=function(){ divId = document.getElementById("block1"); var height1 = images1.height;//圖片的高度 var width1 = images1.width;//圖片的寬度 v_left=(document.body.clientWidth-width1)/2; v_top=(document.body.clientHeight-height1)/2; divId.style.left=v_left; divId.style.top=v_top; } drag = 0; move = 0; // 拖拽對(duì)象 var ie = document.all; var nn6 = document.getElementById && !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; //document.onmouseup=MUp;// 事件會(huì)在鼠標(biāo)按鍵被松開時(shí)發(fā)生 return false; } } document.onmousedown = initDrag; document.onmouseup = new Function("isdrag=false"); //上下左右移動(dòng) function clickMove(s) { if (s == "up") { dragObj.style.top = parseInt(dragObj.style.top) + 100; } else { if (s == "down") { dragObj.style.top = parseInt(dragObj.style.top) - 100; } else { if (s == "left") { dragObj.style.left = parseInt(dragObj.style.left) + 100; } else { if (s == "right") { dragObj.style.left = parseInt(dragObj.style.left) - 100; } } } } } //縮小倍數(shù) function smallit() { //將圖片縮小,失去熱點(diǎn) height1 = images1.height; width1 = images1.width; images1.height = height1 / 1.1; images1.width = width1 / 1.1; } //放大倍數(shù) function bigit() { /*//將圖片放大,不失熱點(diǎn) var zoom = parseInt(images1.style.zoom, 10) || 100; zoom += event.wheelDelta / 12; if (zoom > 0) { images1.style.zoom = (zoom+10) + "%"; }*/ //將圖片放大,失去熱點(diǎn) height1 = images1.height; width1 = images1.width; images1.height = height1 * 1.1; images1.width = width1 * 1.1; } //還原 function realsize() { images1.style.zoom=100+"%"; images1.height = images2.height; images1.width = images2.width; divId.style.left=v_left; divId.style.top=v_top; } function featsize() { var width1 = images2.width; var height1 = images2.height; var width2 = 360; var height2 = 200; var h = height1 / height2; var w = width1 / width2; if (height1 < height2 && width1 < width2) { images1.height = height1; images1.width = width1; } else { if (h > w) { images1.height = height2; images1.width = width1 * height2 / height1; } else { images1.width = width2; images1.height = height1 * width2 / width1; } } block1.style.left = 0; block1.style.top = 0; } //鼠標(biāo)滾輪放大縮小 function bbimg(o) { /*var eleLeft; var eleTop; if(document.documentElement){ eleLeft = document.documentElement.scrollLeft; eleTop = document.documentElement.scrollTop; } else{ eleLeft = document.body.scrollLeft; eleTop = document.body.scrollTop; } v_left+=eleLeft; v_top+=eleTop; //divId.style.left=v_left; //divId.style.top=v_top; alert(document.documentElement.scrollTop +"----xxx"+document.body.scrollTop+window.pageyoffset);*/ var zoom = parseInt(o.style.zoom, 10) || 100; zoom += event.wheelDelta / 12; if (zoom > 0) { o.style.zoom = zoom + "%"; } return false; }
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript切換特效與技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript中json操作技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
JS將網(wǎng)址url轉(zhuǎn)化為JSON格式的方法
這篇文章主要介紹了JS將網(wǎng)址url轉(zhuǎn)化為JSON格式的方法,需要的朋友可以參考下2018-07-07JavaScript實(shí)現(xiàn)矩形塊大小任意縮放
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)矩形塊大小任意縮放,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08javascript中IE瀏覽器不支持NEW DATE()帶參數(shù)的解決方法
在火狐下 可以正常取得時(shí)間,在IE7下 卻是 NaN。糾結(jié)老長(zhǎng)時(shí)間,放棄了new date 然后再老外的論壇中找了一段段代碼可以兼容所有瀏覽器的格式化日期代碼2012-03-03CocosCreator通用框架設(shè)計(jì)之網(wǎng)絡(luò)
這篇文章主要介紹了CocosCreator通用框架設(shè)計(jì)之網(wǎng)絡(luò),詳細(xì)講解了WebSocket的原理和使用方法,對(duì)WebSocket感興趣的同學(xué),一定要看一下2021-04-04Javascript 創(chuàng)建類并動(dòng)態(tài)添加屬性及方法的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)硪黄狫avascript 創(chuàng)建類并動(dòng)態(tài)添加屬性及方法的簡(jiǎn)單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10