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

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

原生js常用事件:

当网页加载时候:

onload和onunload事件

<body onload="checkCookies()">

或者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>

当输入字段被改变时候:

<input type="text" id="fname" onchange="upperCase()">

当提交表单时候:

鼠标点击事件:

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事件

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>鼠标事件(跟随鼠标移动)</title>
    <style type="text/css">
        body {width:2000px;height:2000px;
        }
        div {width:50px;height:50px;position:absolute;left:0px; top:0px;background-color:red;
        }
            div img {width:50px;height:50px;
            }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var div1 = document.getElementsByTagName("div")[0];
            function getXY(eve) {
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
                return {x : scrollLeft + eve.clientX,y : scrollTop + eve.clientY };
            }
            document.onmousemove = function (ev) {
                var oEvent = ev || event;
                var pos = getXY(oEvent);
                div1.style.left = pos.x + "px";;
                div1.style.top = pos.y + "px";
            };
        };
    </script>
</head>
<body>
    <div>
        <img src="images/01.jpg" alt="阳光" /></div>
</body>
</html>

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 我可以提供一些指引:要实现拖拽div,你首先需要监听div的mousedown,mouseup和mousemove事件。然后记录鼠标的坐标,并通过改变div的CSS left和top属性来实现div的拖拽。 ### 回答2: 原生 JavaScript 可以使用一些事件和方法来实现拖拽 div 的功能。以下是一个简单的示例: 首先,在 HTML 中添加一个可拖拽的 div 元素: ``` <div id="draggableDiv" draggable="true">可拖拽的 div</div> ``` 在 JavaScript 中,我们可以通过监听一些事件来实现拖拽的效果。首先,我们需要监听 div 的 mousedown 事件,当鼠标按下时开始拖拽。然后,我们需要监听鼠标移动事件来更新 div 的位置。最后,在鼠标抬起时停止拖拽。 ``` const draggableDiv = document.getElementById('draggableDiv'); let offsetX, offsetY; draggableDiv.addEventListener('mousedown', (event) => { offsetX = event.clientX - draggableDiv.offsetLeft; offsetY = event.clientY - draggableDiv.offsetTop; document.addEventListener('mousemove', onMouseMove); document.addEventListener('mouseup', onMouseUp); }); function onMouseMove(event) { draggableDiv.style.left = event.clientX - offsetX + 'px'; draggableDiv.style.top = event.clientY - offsetY + 'px'; } function onMouseUp() { document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mouseup', onMouseUp); } ``` 在上面的代码中,我们通过计算鼠标点击位置与 div 左上角的偏移量,然后通过监听鼠标移动事件来更新 div 的位置。鼠标移动事件会不断触发,从而使得 div 跟随鼠标移动移动。最后,当鼠标抬起时,我们需要移除事件监听,停止拖拽。 通过以上代码,我们就可以实现一个简单的原生 JavaScript 拖拽 div效果。当鼠标按下 div移动时,div 会跟随鼠标移动移动,当鼠标抬起时停止拖拽。 ### 回答3: 要实现拖拽div效果,可以使用原生JavaScript来完成。具体步骤如下: 1. 首先,在HTML中创建一个div元素,并给它设置一个id,用于后续的选择和操作。 ```html <div id="dragDiv">拖拽我</div> ``` 2. 在JavaScript中,创建一个变量来保存当前被拖拽的div元素。 ```javascript var dragElement = document.getElementById("dragDiv"); ``` 3. 添加mousedown事件监听器,当鼠标按下时,开始拖拽。 ```javascript dragElement.addEventListener("mousedown", dragStart); ``` 4. 在dragStart函数中,记录鼠标按下时的初始位置和div元素的初始位置。 ```javascript function dragStart(event) { event.preventDefault(); startX = event.clientX; startY = event.clientY; elementX = dragElement.offsetLeft; elementY = dragElement.offsetTop; document.addEventListener("mousemove", drag); document.addEventListener("mouseup", dragEnd); } ``` 5. 创建drag函数,在该函数中,根据鼠标移动的距离,更新div元素的位置。 ```javascript function drag(event) { var moveX = event.clientX - startX; var moveY = event.clientY - startY; dragElement.style.left = elementX + moveX + "px"; dragElement.style.top = elementY + moveY + "px"; } ``` 6. 创建dragEnd函数,在该函数中,移除鼠标移动和松开事件监听器。 ```javascript function dragEnd() { document.removeEventListener("mousemove", drag); document.removeEventListener("mouseup", dragEnd); } ``` 通过以上步骤,我们就可以实现一个简单的原生JavaScript拖拽div效果
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值