图片随意移动，可以拖动图片

<HTML> <HEAD> <META http-equiv='Content-Type' content='text/html; charset=gb2312'> <TITLE>图片随意移动，可以拖动图片</TITLE> </HEAD> <BODY bgcolor="#fef4d9" onLoad="init()"> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> #plane1 {position:absolute; left:290; top:170; width:121; z-index:0} #plane2 {position:absolute; left:400; top:250; width:118; z-index:0}</style> <SCRIPT LANGUAGE="JavaScript"> //Modified by the CoffeeCup HTML Editor++ //http://www.coffeecup.com // Global variables for platform branching var isNav, isIE if (parseInt(navigator.appVersion) >= 4) { if (navigator.appName == "Netscape") { isNav = true } else { isIE = true } } // ***Begin CSS custom API Functions*** // Set zIndex property function setZIndex(obj, zOrder) { obj.zIndex = zOrder } // Position an object at a specific pixel coordinate function shiftTo(obj, x, y) { if (isNav) { obj.moveTo(x,y) } else { obj.pixelLeft = x obj.pixelTop = y } } // ***End API Functions*** // Global holds reference to selected element var selectedObj // Globals hold location of click relative to element var offsetX, offsetY // Find out which element has been clicked on function setSelectedElem(evt) { if (isNav) { // declare local var for use in upcoming loop var testObj // make copies of event coords for use in upcoming loop var clickX = evt.pageX var clickY = evt.pageY // loop through all layers (starting with frontmost layer) // to find if the event coordinates are in the layer for (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)) { // if so, then set the global to the layer, bring it // forward, and get outa here selectedObj = testObj setZIndex(selectedObj, 100) return } } } else { // use IE event model to get the targeted element var imgObj = window.event.srcElement // make sure it's one of our planes if (imgObj.parentElement.id.indexOf("plane") != -1) { // then set the global to the style property of the element, // bring it forward, and say adios selectedObj = imgObj.parentElement.style setZIndex(selectedObj,100) return } } // the user probably clicked on the background selectedObj = null return } // Drag an element function dragIt(evt) { // operate only if a plane is selected if (selectedObj) { if (isNav) { shiftTo(selectedObj, (evt.pageX - offsetX), (evt.pageY - offsetY)) } else { shiftTo(selectedObj, (window.event.clientX - offsetX), (window.event.clientY - offsetY)) // prevent further system response to dragging in IE return false } } } // Set globals to connect with selected element function engage(evt) { setSelectedElem(evt) if (selectedObj) { // set globals that remember where the click is in relation to the // top left corner of the element so we can keep the element-to-cursor // relationship constant throughout the drag if (isNav) { offsetX = evt.pageX - selectedObj.left offsetY = evt.pageY - selectedObj.top } else { offsetX = window.event.offsetX offsetY = window.event.offsetY } } // block mouseDown event from forcing Mac to display // contextual menu. return false } // Restore elements and globals to initial values function release(evt) { if (selectedObj) { setZIndex(selectedObj, 0) selectedObj = null } } // Turn on event capture for Navigator function setNavEventCapture() { if (isNav) { document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP) } } // Assign event handlers used by both Navigator and IE (called by onLoad) function init() { if (isNav) { setNavEventCapture() } // assign functions to each of the events (works for both Navigator and IE) document.onmousedown = engage document.onmousemove = dragIt document.onmouseup = release } </SCRIPT> <DIV ID=plane1><IMG NAME="planePic1" SRC="http://www.webasp.net/images/logo.gif" mce_SRC="http://www.webasp.net/images/logo.gif" BORDER=0></DIV> <DIV ID=plane2><IMG NAME="planePic1" SRC="http://www.webasp.net/images/logos.gif" mce_SRC="http://www.webasp.net/images/logos.gif" BORDER=0></DIV> </BODY></HTML>

(from:http://www.webasp.net/javascript/1/250.htm)

<HTML> <HEAD> <META http-equiv='Content-Type' content='text/html; charset=gb2312'> <TITLE>页面上可以用鼠标拖动的图片</TITLE> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">#floater { position: absolute; left: 500; top: 146; width: 125; visibility: visible; z-index: 10; }</style> </HEAD> <BODY > <div ID="floater" style="left: 590px; top: 158px"> <p align="center"><img SRC="http://www.webasp.net/images/logo.gif" mce_SRC="http://www.webasp.net/images/logo.gif" alt="中国WEB开发者网络"><br> <font color="#FF8040">中国WEB开发者网络</font></p> </div><mce:script LANGUAGE="JavaScript"> function heartBeat() { if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; } if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; } if(diffY != lastScrollY) { percent = .1 * (diffY - lastScrollY); if(percent > 0) percent = Math.ceil(percent); else percent = Math.floor(percent); if(IE) document.all.floater.style.pixelTop += percent; if(NS) document.floater.top += percent; lastScrollY = lastScrollY + percent; } if(diffX != lastScrollX) { percent = .1 * (diffX - lastScrollX); if(percent > 0) percent = Math.ceil(percent); else percent = Math.floor(percent); if(IE) document.all.floater.style.pixelLeft += percent; if(NS) document.floater.left += percent; lastScrollX = lastScrollX + percent; } }   function checkFocus(x,y) { stalkerx = document.floater.pageX; stalkery = document.floater.pageY; stalkerwidth = document.floater.clip.width; stalkerheight = document.floater.clip.height; if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) return true; else return false; } function grabIt(e) { if(IE) { whichIt = event.srcElement; while (whichIt.id.indexOf("floater") == -1) { whichIt = whichIt.parentElement; if (whichIt == null) { return true; } } whichIt.style.pixelLeft = whichIt.offsetLeft; whichIt.style.pixelTop = whichIt.offsetTop; currentX = (event.clientX + document.body.scrollLeft); currentY = (event.clientY + document.body.scrollTop); } else { window.captureEvents(Event.MOUSEMOVE); if(checkFocus (e.pageX,e.pageY)) { whichIt = document.floater; StalkerTouchedX = e.pageX-document.floater.pageX; StalkerTouchedY = e.pageY-document.floater.pageY; } } return true; } function moveIt(e) { if (whichIt == null) { return false; } if(IE) { newX = (event.clientX + document.body.scrollLeft); newY = (event.clientY + document.body.scrollTop); distanceX = (newX - currentX); distanceY = (newY - currentY); currentX = newX; currentY = newY; whichIt.style.pixelLeft += distanceX; whichIt.style.pixelTop += distanceY; if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop; if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft; if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20; if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5; event.returnValue = false; } else { whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY); if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset; if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset; if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17; if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17; return false; } return false; } function dropIt() { whichIt = null; if(NS) window.releaseEvents (Event.MOUSEMOVE); return true; }  if(NS) { window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN); window.onmousedown = grabIt; window.onmousemove = moveIt; window.onmouseup = dropIt; } if(IE) { document.onmousedown = grabIt; document.onmousemove = moveIt; document.onmouseup = dropIt; } if(NS || IE) action = window.setInterval("heartBeat()",1); // --></mce:script> </BODY></HTML>

(from:http://www.webasp.net/javascript/1/272.htm)

图片随意移动，可以拖动图片相关推荐

vue H5(移动端)双指放大图片，单指拖动图片，等图片操作，使用viewerjs
1.npm 引入 npm install v-viewer --save 2.main.js配置 import Viewer from 'v-viewer' import 'viewerjs/dist ...
如何去掉图片多余的部分？图片裁剪功能如何用？
作为一名新媒体小编,每天都会接触到大量的图片,在使用的过程中会遇到图片带有水印或者是多余的地方想要将他去掉的时候,应该如何裁剪呢?下面,我为大家分享一款在线制作照片(https://www.yasuo ...
图片随意移动，可以拖动图片计算
<HTML> <HEAD> <META http-equiv='Content-Type' content='text/html; charset=gb2312'> ...
android 自由缩放图片大小,android Matrix实现图片随意放大缩小或拖动
本文实例为大家分享了android Matrix图片随意放大缩小和拖动的具体代码,供大家参考,具体内容如下 step1:新建一个项目DragAndZoom,并准备一张照片放在res/drawable- ...
用鼠标拖动图片的JS代码
代码简介: 用鼠标拖动一个图片移动,就像拖动一个层一样,这是一个JS拖动类代码,你可以无限制的增加图片,代码复用率比较高. 代码内容: View Code <html><HEAD&g ...
Android深入浅出系列之实例应用—简单的手指拖动图片，图片滑来滑去显示应用Gallery和BaseAdapter以及ImageView的使用...
前言我们现在在随便一个手机上用手指在屏幕上滑来滑都可以去拖动图片,其实在Android里这很简单,下面我就给大家具体讲解一下. 思路我们首先需要Gallery这个对象,俗称画廊对象,大家都知道 ...
基于js鼠标拖动图片排序
分享一款基于js的图片排序效果.鼠标拖动图片,重新排列图片的排列顺序.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线 ...
java 拖动图片放大_Android 图片拖拽、放大缩小的自定义控件
需求:像相册中的图片跟随手指拖动,双指的放大和缩小,相册中拖出范围之后有弹回的动画,感觉上很圆润,很舒服,我写的例子中并没有加动画思路:1.自定义DragImageView.java 2.自定义中先 ...
Android 小項目之---Iphone拖动图片特效 (附源码)
曾经被Iphone用手指在屏幕上滑来滑去拖动图片的操作方式吸引吗?在Android里头,这并不是什么难事. 所需要的技术点如下:Android.content.Context .Android.wid ...

图片随意移动，可以拖动图片

图片随意移动，可以拖动图片相关推荐

最新文章

热门文章