Phiên bản đầy đủ: jsB@nk » Hình ảnh » Hiệu ứng lọc khi kéo thả ảnh
URL: https://www.javascriptbank.com/drag-n-drop-with-special-dragging-effect.html
Hiệu ứng làm cho các ảnh trong trang web có thể được di chuyển bằng cách kéo thả, đồng thời trong khi kéo thì ảnh đuợc áp dụng hiệu ứng lọc.
Phiên bản đầy đủ: jsB@nk » Hình ảnh » Hiệu ứng lọc khi kéo thả ảnh
URL: https://www.javascriptbank.com/drag-n-drop-with-special-dragging-effect.html
<STYLE type=text/css>#picture1 {LEFT: 20px; POSITION: absolute; TOP: 10px}#picture2 {LEFT: 170px; POSITION: absolute; TOP: 10px}#picture3 {LEFT: 290px; POSITION: absolute; TOP: 10px}#picture4 {LEFT: 440px; POSITION: absolute; TOP: 10px}#picture5 {LEFT: 520px; POSITION: absolute; TOP: 10px}</STYLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><SCRIPT language=JavaScript>var isNav, isIEif (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) {obj.moveTo(x,y)} else {obj.filter = "invert()"obj.pixelLeft = xobj.pixelTop = y}}var selectedObjvar offsetX, offsetYfunction 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)) {selectedObj = testObjsetZIndex(selectedObj, 100)return}}} else {var imgObj = window.event.srcElementif (imgObj.parentElement.id.indexOf("picture") != -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 (document.all) {selectedObj.filter = ""}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 = release}</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=picture1><IMG name=picturePic1 src="photo2.jpg"></DIV><DIV id=picture2><IMG name=picturePic2 src="photo7.jpg"></DIV><DIV id=picture3><IMG name=picturePic3 src="photo3.jpg"></DIV><DIV id=picture4><IMG name=picturePic4 src="logojs.gif"></DIV><DIV id=picture5><IMG name=picturePic5 src="photo6.jpg"></DIV></BODY><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->