<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd>
<html>
<head>
<title>全屏可拖动的图片</title>
<!--设置style 的类型 查找到 dragem图片-->
<style type="text/css">
.tuodong{position:relative;}
</style>
<!--定义脚本的类型-->
<script language="javascript" type="text/javascript">
<!--将页面内所有元素的一个集合定义到 ie 将里面所有id集合定义到nn6里 将否 定义到 isdrag里面 定义 x y 定义 doby-->
var ie=document.all;
var nn6=document.getElementById && !document.all;
var isdrag=false;
var x,y;
var dobj;
<!--定义一个movemouse拖曳鼠标时触发的事件函数(e值)-->
function movemouse(e)
{
<!--判断isdrag-->
if (isdrag)
{
<!--将获取鼠标指针位置相对的左坐标的id放进dobj风格左里 下面就是将高放进dobj风格top里-->
dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
<!--返回值 false否-->
return false;
}
}
<!--创建一个selectmouse查询鼠标的函数(e值)-->
function selectmouse(e)
{
<!--将产生这个事件的源对象 放进 fobj里-->
var fobj = nn6 ? e.target : event.srcElement;
<!--将将里面所有id集合定义到html 和 body 放进topelement里-->
var topelement = nn6 ? "html" : "body";
<!--循环fobj的名字 不等于 topelement 并且 fobj的类名 不等于 图片名-->
while (fobj.tagName != topelement && fobj.className != "tuodong")
{
<!--fobj 等于 fobj的 fobj parentNode 的获取某个元素的父节点 parentElement在 DOM 层次结构定义的上下级关系-->
fobj = nn6 ? fobj.parentNode : fobj.parentElement;
}
<!--判断fobj的类名等于 图片名-->
if (fobj.className=="tuodong")
{
<!--isdrag 等于 是 doby 等于 fobj tx等于将dobj左的风格 parseInt 解析一个字符串，并返回一个整数 解析dobj高定义到 ty-->
isdrag = true;
dobj = fobj;
tx = parseInt(dobj.style.left+0);
ty = parseInt(dobj.style.top+0);
<!--获得鼠标的高坐标放进x 获得鼠标的左坐标放进y-->
x = nn6 ? e.clientX : event.clientX;
y = nn6 ? e.clientY : event.clientY;
<!--获得要执行的事件是鼠标拖动事件-->
document.onmousemove=movemouse;
<!--返回值 否-->
return false;
}
}
document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");
</script>
</head>
<body>
<!--定义一个div的id 插入一个图片 类型名tuodong-->
<div id="tupian"><img src="图片111.jpg" class="tuodong"></div>
</body>
</html>
12月26图片拖动(第53天学习)
猜你喜欢
转载自xjwolaile.iteye.com/blog/1754629
今日推荐
周排行