Phiên bản đầy đủ: jsB@nk » Hình ảnh » Xem ảnh » Xem ảnh qua kính
URL: https://www.javascriptbank.com/magic-picture-effect.html
Hiệu ứng làm cho ảnh bạn cần xem ẩn bên dưới lớp nền của trang web. Bạn chỉ có thể xem qua ảnh này bằng cách giữ và kéo rê ô vuông đến những nơi cần xem.
Phiên bản đầy đủ: jsB@nk » Hình ảnh » Xem ảnh » Xem ảnh qua kính
URL: https://www.javascriptbank.com/magic-picture-effect.html
<STYLE type=text/css>A {COLOR: #000000}A:visited {COLOR: #000000}A:active {COLOR: #000000}A:hover {COLOR: #ff0000}.baselinestyle {FONT-FAMILY: Verdana; FONT-SIZE: 8pt; LEFT: 10px; POSITION: absolute; TOP: 200px; WIDTH: 240pt}</STYLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->
<SCRIPT language=JavaScript>// Magic picture effect scriptvar isNav, isIEvar offsetX, offsetYvar selectedObj var dragimg_width=64var dragimg_height=64var dragimg_startx=410var dragimg_starty=80var clipLeft=dragimg_startxvar clipTop=dragimg_startyvar clipRight=clipLeft+dragimg_widthvar clipBottom=clipTop+dragimg_heightif (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)document.bgimage.clip.top=ydocument.bgimage.clip.left=xdocument.bgimage.clip.bottom=y+dragimg_heightdocument.bgimage.clip.right=x+dragimg_width}else {clipTop=yclipLeft=xclipBottom=y+dragimg_heightclipRight=x+dragimg_widthdocument.all.bgimage.style.clip="rect("+clipTop+" "+clipRight+" "+clipBottom+" "+clipLeft+")"obj.pixelLeft = xobj.pixelTop = 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=="picture1")) {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 (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) {clipTop=dragimg_startyclipLeft=dragimg_startxclipBottom=clipTop+dragimg_heightclipRight=clipLeft+dragimg_widthdocument.all.picture1.style.posLeft=dragimg_startxdocument.all.picture1.style.posTop=dragimg_startydocument.all.bgimage.style.posLeft=0document.all.bgimage.style.posTop=0document.all.bgimage.style.clip="rect("+clipTop+" "+clipRight+" "+clipBottom+" "+clipLeft+")"}if (document.layers) {document.bgimage.clip.left=dragimg_startxdocument.bgimage.clip.right=clipLeft+dragimg_widthdocument.bgimage.clip.top=dragimg_startydocument.bgimage.clip.bottom=clipTop+dragimg_heightdocument.picture1.left=dragimg_startxdocument.picture1.top=dragimg_startydocument.bgimage.left=0document.bgimage.top=0}}// - 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=bgimage style="LEFT: 0px; POSITION: absolute; TOP: -3000px"> <IMG name=bgimagpic src="pic191.jpg" width="600" height="414"></DIV><DIV id=picture1 style="LEFT: 0px; POSITION: absolute; TOP: -3000px; wdith: 100%;"> <IMG name=picturePic1 src="dragpic271.gif" width="64" height="64"></DIV><DIV class=baselinestyle id=redirtext><b>Drag the image to experience the new magic unveiling effect.</b></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/dragpic271.gif