看看这篇http://www.walterzorn.com/dragdrop/dragdrop_e.htm#download
解决方案 »
- 求easyui ie7 下兼容性问题
- php处理完的数据打包传给html,怎么传script过去?
- 正则表达式高手进来帮个忙,倾家荡产求正则
- js IE8的地址栏和状态栏如何去掉??
- ExtJS中xtype为treecolunm的列如何添加表头下拉项
- 这小段代码出不了结果,咋回事
- 怎样使显示的日期自动更新
- 请问如何停止同一框架内另一页面的setTimeout函数??
- 如何把弹出窗口中单选框里的值传回主页面,而且主页面不能刷新
- 放分!不知道什么时候才能得一颗星!好累!但是心情好!
- 麻烦JS 高手给解释下 top.window.frames["iframe"].openSerial(); 是什么意思,谢谢
- javascript 如何实现周轮流值班表 。在线等!!!!!!!!!!!!!!!!1
<body onselectstart="return false">
<div id="abc"><FONT face="宋体"></FONT></div>
<script language="javascript">
var uiBox=function()
{
this.width=0;
this.height=0;
this.backGround="";
this.startPositionX=0;
this.startPositionY=0;
this.text=" ";
this.setProperty=function(bgPic,width,height,x,y)
{
this.backGround=bgPic;
this.width=width;
this.height=height;
this.startPositionX=x;
this.startPositionY=y;
}
}
var dragBox=function()
{
this.Super=uiBox;
this.Super();
this.element=document.createElement("div");
this.isDrag=false;
this.startX=0;
this.startY=0;
this.positionX=0;
this.positionY=0;
this.element.mousePF=0;
this.setPosition=function(left,top)
{
this.positionX=left;
this.positionY=top;
}
this.appendToElement=function(parentObj)
{
this.element.style.width=this.width+"px";
this.element.style.height=this.height+"px";
this.element.style.backgroundImage="url("+this.backGround+")";
this.element.style.backgroundPositionX=this.startPositionX;
this.element.style.backgroundPositionY=this.startPositionY;
this.element.style.backgroundRepeat="no-repeat";
this.element.style.position="absolute";
this.element.style.left=this.positionX+"px";
this.element.style.top=this.positionY+"px";
this.element.style.cursor="default";
parentObj.appendChild(this.element);
}
this.element.onmousedown=function()
{
this.isDrag=true;
this.startX=event.x;
this.startY=event.y;
this.positionX=parseInt(this.style.left);
this.positionY=parseInt(this.style.top);
}
this.element.onmouseup=function()
{
this.isDrag=false;
this.positionX=parseInt(this.style.left);
this.positionY=parseInt(this.style.top);
} this.element.onmouseout=function()
{
}
this.element.onmouseover=function()
{
}
var tmpBodyAction=document.body.onmousemove;
document.body.onmousemove=attacheMouseMoveFunction(tmpBodyAction,this)
var tmpBodyAction=document.body.onmouseup;
document.body.onmouseup=attacheMouseUpFunction(tmpBodyAction,this)}function attacheMouseMoveFunction(oFunction,obj)
{
return function()
{
try
{
oFunction();
}catch(e){}
if (obj.element.isDrag==true)
{
var dx=true;
var dy=true;
if (obj.element.positionX+event.x-obj.element.startX<0) dx=false;
if (obj.element.positionY+event.y-obj.element.startY<0) dy=false;
if (dx)
{
obj.element.style.left=(obj.element.positionX+event.x-obj.element.startX)+"px";
}
if (dy)
{
obj.element.style.top=(obj.element.positionY+event.y-obj.element.startY)+"px";
}
}
}
}function attacheMouseUpFunction(oFunction,obj)
{
return function()
{
try
{
oFunction();
}catch(e){}
obj.element.isDrag=false;
}
} onload=function()
{
var dObj=new dragBox();
dObj.setProperty("http://bbs.51js.com/images/default/logo.gif",200,100,-50,0);
dObj.setPosition(100,0);
dObj.appendToElement(document.getElementById("abc"));
var dObj2=new dragBox();
dObj2.setProperty("http://bbs.51js.com/images/default/logo.gif",200,100,-50,0);
dObj2.setPosition(200,400);
dObj2.appendToElement(document.getElementById("abc"));
} </script>
<div id="debug"></div>
</body>
这个可以实现等比例缩放。你结合一下看看效果<script language="JavaScript" type="text/javascript"> <!-- // 说明:用 JavaScript 实现网页图片等比例缩放
// 整理:http://www.CodeBit.cn function DrawImage(ImgD,FitWidth,FitHeight){ var image=new Image(); image.src=ImgD.src; if(image.width>0 && image.height>0){ if(image.width/image.height>= FitWidth/FitHeight){ if(image.width>FitWidth){ ImgD.width=FitWidth; ImgD.height=(image.height*FitWidth)/image.width; }else{ ImgD.width=image.width; ImgD.height=image.height; } } else{ if(image.height>FitHeight){ ImgD.height=FitHeight; ImgD.width=(image.width*FitHeight)/image.height; }else{ ImgD.width=image.width; ImgD.height=image.height; } } } } //--> </script>
<img src="C:\Documents and Settings\Administrator\桌面\我的文件\11.gif" alt="自动缩放后的效果" width="200" height="100"
onload="javascript:DrawImage(this,200,200);" />