Phiên bản đầy đủ: jsB@nk » Hình ảnh » Xem ảnh » Phóng to/thu nhỏ ảnh khi kéo thả chuột
URL: https://www.javascriptbank.com/smart-image-resizer.html
Hiệu ứng cung cấp cho người lướt web khả năng phóng to/thu nhỏ ảnh bằng cách giữ và kéo rê con trỏ chuột vào góc phải-dưới của ảnh, trên vị trí được chỉ định.
Phiên bản đầy đủ: jsB@nk » Hình ảnh » Xem ảnh » Phóng to/thu nhỏ ảnh khi kéo thả chuột
URL: https://www.javascriptbank.com/smart-image-resizer.html
<STYLE type=text/css>.baselinestyle {COLOR: #ffffff; FONT-FAMILY: Verdana; FONT-SIZE: 8pt; LEFT: 10px; POSITION: absolute; TOP: 180px}</STYLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><SCRIPT language=JavaScript>// Smart image resizer script// CONFIGURATION:// Copy the two <DIV>-blocks just below the body-tag of this webpage.// Paste them below the body tag of your webpage.// Do not change them!!!// Put the image "grip201.gif" in the same directory as the script.// Configure the following variables:// URL of the image to resize (put the image in the same directory// as the script)var imgsrc="logojs.gif"// the width and height of the image to resize (pixels)var resizeimg_width=480var resizeimg_height=280// the distance of the image to the left margin (pixels)var resizeimg_startx=10// the distance of the image to the top margin (pixels)var resizeimg_starty=10// At the beginning the image will be displayed smaller than the original size:// 2 means 2 times smaller, 3 means 3 times smaller, 4 means 4 times smaller and so on.var startsize=4// No need to change the variables belowvar gripimg_startx=Math.ceil(resizeimg_width/startsize)+resizeimg_startx-15var gripimg_starty=Math.ceil(resizeimg_height/startsize)+resizeimg_starty-15var preloadimg=new Image()preloadimgsrc=imgsrcvar isNav, isIEvar offsetX, offsetYvar selectedObj if (parseInt(navigator.appVersion) >= 4) {if (navigator.appName == "Netscape") {isNav = true} else {isIE = true}}function setZIndex(obj, zOrder) {obj.zIndex = zOrder}function shiftTo(obj, x, y) {if (isNav) {if (document.layers) {document.resizeimagediv.document.write("<img src="+imgsrc+" width="+(-resizeimg_startx+x+15)+" height="+(-resizeimg_starty+y+15)+">")document.resizeimagediv.document.close()}document.gripimagediv.left=xdocument.gripimagediv.top=y}else {resizeimagediv.innerHTML="<img src="+imgsrc+" width="+(-resizeimg_startx+x+15)+" height="+(-resizeimg_starty+y+15)+">"document.all.gripimagediv.style.posLeft=xdocument.all.gripimagediv.style.posTop=y}}function setSelectedElem(evt) {if (isNav) {var testObjvar clickX = evt.pageXvar clickY = evt.pageYfor (var i = document.layers.length - 1; i >= 0; i--) {testObj = document.layers[i]if ((clickX > testObj.left) && (clickX < testObj.left + testObj.clip.width) && (clickY > testObj.top) && (clickY < testObj.top + testObj.clip.height) && (testObj.name=="gripimagediv")) {selectedObj = testObjsetZIndex(selectedObj, 100)return}}} else {var imgObj = window.event.srcElementif (imgObj.parentElement.id.indexOf("gripimage") != -1) {selectedObj = imgObj.parentElement.stylesetZIndex(selectedObj,100)return}}selectedObj = nullreturn}function dragIt(evt) {if (selectedObj) {if (isNav) {shiftTo(selectedObj, (evt.pageX - offsetX), (evt.pageY - offsetY))} else {shiftTo(selectedObj, (window.event.clientX - offsetX), (window.event.clientY - offsetY))return false}}}function engage(evt) {setSelectedElem(evt)if (selectedObj) {if (isNav) {offsetX = evt.pageX - selectedObj.leftoffsetY = evt.pageY - selectedObj.top} else {offsetX = window.event.offsetXoffsetY = window.event.offsetY}}return false}function release(evt) {if (selectedObj) {setZIndex(selectedObj, 0)selectedObj = null}}function setNavEventCapture() {if (isNav) {document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)}}function init() {if (isNav) {setNavEventCapture()}document.onmousedown = engagedocument.onmousemove = dragItdocument.onmouseup = releaseif (document.all) {resizeimagediv.innerHTML="<img src="+imgsrc+" width="+Math.ceil(resizeimg_width/startsize)+">"document.all.resizeimagediv.style.posLeft=resizeimg_startxdocument.all.resizeimagediv.style.posTop=resizeimg_startydocument.all.gripimagediv.style.posLeft=gripimg_startxdocument.all.gripimagediv.style.posTop=gripimg_starty}if (document.layers) {document.resizeimagediv.document.write("<img src="+imgsrc+" width="+Math.ceil(resizeimg_width/startsize)+">")document.resizeimagediv.document.close()document.resizeimagediv.left=resizeimg_startxdocument.resizeimagediv.top=resizeimg_startydocument.gripimagediv.left=gripimg_startxdocument.gripimagediv.top=gripimg_starty}}// - End of JavaScript - --></SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><BODY onload=init()><DIV id=resizeimagediv style="POSITION: absolute; TOP: -3000px"></DIV><DIV id=gripimagediv style="POSITION: absolute; TOP: -3000px"> <IMG name=gripimage src="grip201.gif" width="15" height="15"></DIV></BODY><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->
http://javascriptbank.com/javascript/image/grip201.gif