<!DOCTYPE?html>??
<!--设计一个文字跟随鼠标移动的实例-->??
<!--?position?规定元素的定位类型?absolute?生成绝对定位的元素，相对于?static?定位以外的第一个父元素进行定位。??
????????????????????????????????fixed??生成绝对定位的元素，相对于浏览器窗口进行定位。??
????????????????????????????????relative?生成相对定位的元素，相对于其正常位置进行定位。??
????????????????????????????????static?默认值。没有定位，元素出现在正常的流中??
????????????????????????????????inherit?规定应该从父元素继承?position?属性的值。??
????cursor?规定要显示的光标的类型（形状）?hand为手型??
????font-family?字体类型??
????<font>?规定文本的字体、字体尺寸、字体颜色。??
????pixelLeft?距离左侧的位置??
????event.srcElement：表示的当前的这个事件源。??
????event.srcElement.parentNode：表示当前事件源的父节点。??
????parentNode：父节点，也就是上一层的节点。可以是任何一个标签。??
????event.srcElement.firstChild：当前事件的第一个节点，如果节点是input，通过event.srcElement.firstChild.value就可以获取此input的值。??
????event.srcElement.parentElement：是指在鼠标所在对象的上一个对象。??
????event.srcElement.children：当前节点下对象的个数，有多个的话就是个数组，如当前节点下有2个input的对象，要获取这两个可以用event.srcElement.children[0]?与?event.srcElement.children[1]分别获取。??
??????
?
-->??
<html>??
????<head>??
????????<meta?charset="utf-8">??
????????<title>跟随鼠标移动文字</title>??
????????<style>??
????????????.move_out{??
????????????????position:?relative;??
????????????????cursor:?hand;??
????????????????font-family:?"华为行楷";??
????????????}??
????????</style>??
????</head>??
????<script?language="JavaScript">??
????????var?move_out=false;??
????????var?x,y,z;??
????????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"){??
????????????????move_out=true;??
????????????????z=event.srcElement;??
????????????????temporarily1=z.style.pixelLeft;??
????????????????temporarily2=z.style.pixelTop;??
????????????????x=event.clientX;??
????????????????y=event.clientY;??
????????????????document.onmousemove=move;//当鼠标移动时执行move函数??
????????????}??
????????????else{??
????????????????move_out=false;??
????????????????}??
????????}??
????????document.onmousedown=down;//当鼠标被按下时执行down函数??
??????????
?
????</script>??
????<body>??
????????<font?color="aquamarine"?size="5"?class="move_out">需要移动的文字</font>??
????</body>??
??
?
</html>??
