原生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
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值