JavaScript demo—移动文字
Posted songdongdong6
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript demo—移动文字相关的知识，希望对你有一定的参考价值。
文字跟随鼠标移动的实例
- <!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>??
以上是关于JavaScript demo—移动文字的主要内容，如果未能解决你的问题，请参考以下文章