可拖动图片
来源:互联网 发布:js美化工具 编辑:程序博客网 时间:2024/06/11 00:53
最近在看javascript,用javascript实现了可拖动图片。可以直接把以下代码复制,使用。只需将图片的src更改成你自己的图片的src即可。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
#div1{
overflow:hidden;
position:absolute;
width:400px;
height:200px;
left:100px;
top:100px;
border:5px solid #000;
}
img{
border:1px solid #000;
}
</style>
<script type="text/javascript">
//<![CDATA[
var dragObject = null;
var mouseOffset = null;
document.onmousemove = mouseMove;
document.onmouseup = mouseUp;
function mousePoint(x,y){
this.x = x;
this.y = y;
}
function mousePosition(evnt){
var x = parseInt(evnt.clientX);
var y = parseInt(evnt.clientY);
return new mousePoint(x,y);
}
function getMouseOffset(target,evnt){
evnt = evnt || window.event;
var mousePos = mousePosition(evnt);
var x = mousePos.x - target.offsetLeft;
var y = mousePos.y - target.offsetTop;
return new mousePoint(x,y);
}
function mouseUp(evnt){
dragObject = null;
}
function mouseMove(evnt){
if(!dragObject)return;
evnt = evnt || window.event;
var mousePos = mousePosition(evnt);
if(dragObject){
dragObject.style.position = 'absolute';
dragObject.style.top = mousePos.y -mouseOffset.y + "px";
dragObject.style.left = mousePos.x -mouseOffset.x + "px";
return false;
}
}
function makeDraggable(item){
if(item){
item = document.getElementById(item);
item.onmousedown = function(evnt){
dragObject = this;
mouseOffset = getMouseOffset(this,evnt);
return false;
}
}
}
//]]>
</script>
</HEAD>
<BODY onload="makeDraggable('img1');">
<div id="div1">
<img id="img1" src="img/test.BMP"/>
</div>
</BODY>
</HTML>
- 可拖动图片
- 鼠标悬停商品图片,图片放大,并且可拖动
- jquery弹出可拖动对话框+无刷新图片上传
- android浮层 图片拖动并且可点击
- jquery插件实现图片可拖动的购物车代码
- 创建可拖动控件
- 可拖动的DIV
- JavaScript可拖动DIV
- JavaScript可拖动DIV
- JavaScript可拖动DIV
- 可拖动的div
- js可拖动层
- 可拖动的div
- 创建可拖动控件
- 可拖动的层
- 可拖动层代码
- JavaScript可拖动DIV
- 可拖动的控件
- Oralce sqlplus优化
- 算法导论第十三章--红黑树C++代码实现
- Access数据库如何获取刚添加记录的ID(主键,自动编号)
- VerticalSeekBar 垂直拖动条的实现
- 关于计算几何
- 可拖动图片
- 博客新开致辞
- c程序按行读取文件
- 数据挖掘
- 如何学习总线技术
- 在 CentOS 6.2 上安装和配置 KVM
- 关于openstack项目不错的个人blog和站点 http://bbs.linuxtone.org/thread-16007-1-1.html
- 实现单链表的逆置
- Java基础第十天学习日记_包、jar包