Home >Web Front-end >HTML Tutorial >div box that follows the mouse movement_html/css_WEB-ITnose
div box that follows the mouse movement_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:43:351133browse
The event object event and the incoming parameter cv solve the compatibility problem
event.clientX and event.clientY get the coordinates relative to the page, when the scroll bar moves down , the positioning will be inaccurate, so the height of the scroll bar must be added
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>#div1{width:100px; height:100px; background:#0F0; position:absolute;}</style><script>function getPos(ev)//将鼠标定位定义成函数{ var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft; return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop};}document.onmousemove=function(ev)//给文档添加移动事件{ var oEvent=ev||event; var oDiv=document.getElementById('div1'); var pos=getPos(oEvent); oDiv.style.left=pos.x+'px';//为left赋值 oDiv.style.top=pos.y+'px';}</script></head><body><div id="div1"></div></body></html>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn