原生js实现div随鼠标移动效果

最新推荐文章于 2023-04-21 16:43:44 发布

u010513603

最新推荐文章于 2023-04-21 16:43:44 发布

阅读量5.2k

点赞数

分类专栏：原生js开发

本文链接：https://blog.csdn.net/u010513603/article/details/78542040

版权

原生js开发专栏收录该内容

8 篇文章 1 订阅

订阅专栏

原生js实例demos: http://pandoraui.github.io/learning-javascript/lesson2/10.html

原生js常用事件：

当网页加载时候：

onload和onunload事件

或者window.οnlοad=function(){}

当图像加载的时候：

当鼠标移动到元素上时候\当鼠标移除元素的时候：

onmouseover ommousein ommouseout

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<div οnmοuseοver="mOver(this)" οnmοuseοut="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
obj.innerHTML="Thank You"
}
function mOut(obj){
obj.innerHTML="Mouse Over Me"
}
</script>

</body>
</html>

当元素获取焦点\当元素失去焦点时候：

onfocus onblur

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function myFunction(x){
x.style.background="yellow";
}
</script>
</head>
<body>

输入你的名字: <input type="text" οnfοcus="myFunction(this)">
<p>当输入框获取焦点时，修改背景色（background-color属性）将被触发。</p>

</body>
</html>

当输入字段被改变时候：

当提交表单时候：

鼠标点击事件：

onmousedown onmouseup onclick

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 οnclick="changetext(this)">点击文本!</h1>
</body>
</html>

按键事件：

onkeydown

onkeyup

练手面试题

http://blog.csdn.net/jessiecoder/article/details/50864157

一、页面内有一个正方形元素实现对其拖拽和放下

鼠标点击位置坐标

相对于屏幕

如果是涉及到鼠标点击确定位置相对比较简单，获取到鼠标点击事件后，事件screenX，screenY获取的是点击位置相对于屏幕的左边距与上边距，不考虑iframe因素，不同游览器下表现的还算一致。

function getMousePos(event) {
      var e = event || window.event;
      return {'x':e.screenX,'y':screenY}
}

相对于游览器窗口

简单代码即可实现，然而这时还不够，因为绝大多数情况下我们希望获取鼠标点击位置相对于游览器窗口的坐标，event的clientX，clientY属性分别表示鼠标点击位置相对于文档的左边距，上边距。

function getMousePos(event) {
      var e = event || window.event;
      return {'x':e.clientX,'y':clientY}
}

相对于文档

clientX与clientY是获取相对于当前屏幕的坐标，忽略了页面滚动因素，这在很多环境下很有用，但当我们需要考虑页面滚动，也就是相对于文档（body元素）的坐标时怎么办呢？只要加上滚动的位移就可以了。

在chrome可以通过document.body.scrollLeft，document.body.scrollTop计算出页面滚动位移，而在IE下可以通过document.documentElement.scrollLeft，document.documentElement.scrollTop

function getMousePos(event) {
       var e = event || window.event;
       var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
       var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
       var x = e.pageX || e.clientX + scrollX;
       var y = e.pageY || e.clientY + scrollY;
       //alert('x: ' + x + '\ny: ' + y);
       return { 'x': x, 'y': y };
}

实例：div随着鼠标移动，在document上加mouseover事件

u010513603

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
原生js实现div随鼠标移动效果

原生js实例demos: http://pandoraui.github.io/learning-javascript/lesson2/10.html原生js常用事件：当网页加载时候：onload和onunload事件onload="checkCookies()">或者window.onload=function(){}当图像加载的时候：当鼠标移动到元素上时候
复制链接

扫一扫

专栏目录