鼠标自由拖动文字移动


JavaScript 控制鼠标随意拖动文字，就像拖动一个层窗口一样，想拖哪儿就拖哪，你还可以对字体、字体大小进行重定义等操作，通过这个拖动程序，你会了解到JS如何获取鼠标位置、判断鼠标是否按下、应用event对象中的srcElement属性获取当前事件的对象等。

答案：<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>鼠标自由拖动文字移动</title>
<style>
.move_out{position:relative;cursor:hand}
</style>
</head>
<script language="JavaScript">
var move_out=false; //定义变量，值为false
var z,x,y;	//定义变量
function move(){//创建函数
if(event.button==move_out){ //判断当前鼠标是否是左键按下状态
z.style.pixelLeft=temporarily1+event.clientX-x; //获取当前鼠标的位置
z.style.pixelTop=temporarily2+event.clientY-y; //获取当前鼠标的位置
return false;
}
}
function down(){// 创建自定义函数，实现文字的移动
  	if(event.srcElement.className=="move_out"){//应用event对象中的srcElement属性获取当前事件的对象
    	move_out=true;
     	z=event.srcElement;
     	temporarily1=z.style.pixelLeft; 
     	temporarily2=z.style.pixelTop;
     	x=event.clientX; //获取鼠标在窗口中的X位置
     	y=event.clientY;//获取鼠标在窗口中的Y位置
     	document.onmousemove=move; //当鼠标移动时执行move()函数
   	}else{
		move_out=false;
	}
}
document.onmousedown=down;//当鼠标按下时执行down()函数
</script>
<body>
<font color=0066cc size= 12 class="move_out"> 试试吧，鼠标放这里可拖动哦~</font> 
</body>
</html>

上一个：Marquee 公告滚动代码
下一个：新浪的一个多行文字滚动切换代码

更多图片编程知识: