|
|
Img 图像拖拽功能的实现
|
||||||||||||||||||||||||||||||||||||||||||||||||||||
广告招租，e-mail:yesize@hotmail.com 基本知识 SP(active server pages)是一种服务器端脚本编写环境，使用ASP可以组合HTML页、脚本命令(VbScript, JavaScript)以创建交互的Web页和基于Web的功能强大的应用程序。ASP很容易学习掌握，即使您是一个编程经验并不丰富的程序员。如果您是位具有一定编程经验的HTML编写人员，您会发现ASP脚本提供了创建交互页的简便方法。在学会使用 Microsoft Active Server Pages 后，就可以使用自己的 Web 服务器创建并运行动态的交互式 Web 站点。您可以用 VBScript 创建脚本，也可以用 JavaScript。 在用HTML制作主页时，设计者可以把一些小程序嵌入其页中，在运行的时候，这些小程序就被下载执行。JavaScript就是这样一种语言。它是一种不严格的以Java为基础的被解释的语言。JavaScript程序被存储在HTML页中的资源窗体中，在运行时，具有JavaScript的页（.asp）被下载到浏览器并且JavaScript被解释和运行。 这次向大家介绍如何用JavaScript语言实现图像的拖拽，并且跟踪该图像的位置。这种方法很实用。当用户移动图像之后系统能够自动地判断出每个图像的位置，并且将其保存起来。在数据库操作中，由用户自己制定审批顺序就是一个例子。如图1所示。 实现方法 一、做出四幅Img图像 首先在画笔工具中做出几幅图像，然后在Frontpage 98中插入这几幅图像，注意：您必须设置出图像的name属性，在后面我们会用到这一属性。 二、分别创建三个函数 下面具体介绍这三个函数： A．DoMouseDown函数 当鼠标左键按下时执行该函数。 函数功能描述：如果鼠标左键被按下，并且选中的对象类型是“IMG”图像，则取出所选图像的name属性。存入变量CurElement，得到当前对象。 源代码： function doMouseDown() { if ((event.button==1) && (event.srcElement.tagName==IMG)) CurElement = event.srcElement; } B. DoMouseMove函数 当鼠标左键按下并且移动时执行该程序。 函数功能描述：当鼠标左键按在一个“IMG”图像上，并且鼠标在移动时，得到图像的左上点位置坐标。 源代码： function doMouseMove(){ if ((event.button==1) && (CurElement!=null)) { // position IMG newleft= event.clientX-document.all.OuterDiv.offsetLeft-(CurElement.offsetWidth/2)； //自动调整图像横坐标位置 if (newleft<0) newleft=0 CurElement.style.pixelLeft=newleft； newtop=event.clientY-document.all.OuterDiv.offsetTop-(CurElement.offsetHeight/2)； //自动调整图像纵坐标位置 if (newtop<0) newtop=0 curElement.style.pixelTop= newtop； event.returnValue = false； event.cancelBubble = true； } //把当前图像的位置存入相应变量中 if (CurElement.name==wlf ){ wx=newleft; wy=newtop; } if (CurElement.name==czh ){ cx=newleft; cy=newtop; } if (CurElement.name==pxy ){ px=newleft; py=newtop; } if (CurElement.name==sl ){ sx=newleft; sy=newtop; } } 由于每一个图像有一个name，因此每移动完毕一个图像后，根据当前图像名字，把该图像的坐标保存在一对变量中。 C.函数new Function(curElement=null) 函数功能：通过把变量CurElement置为空来释放当前对象。 三、调用函数 按顺序执行以下函数： Var curElement,wx,wy,cx,cy,sx,sy,px,py; document.onmousedown = DoMouseDown; document.onmousemove = DoMouseMove; document.onmouseup = new Function(CurElement =null) 用户每次用鼠标左键选中一幅图像时，DoMouseDown函数执行，CurElement得到当前图像。当鼠标移动时，DoMouseMove函数执行。当鼠标左键松开后，DoMouseMove函数失效，CurElement为空，这样就完成了用鼠标拖拽图像的过程。
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||
加入最爱
热门小游戏分类 
