JS（十一）

来源：互联网发布：淘宝加购怎么弄编辑：程序博客网时间：2024/05/29 08:55

事件对象（event）

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">#move{width: 300px;height: 150px;background-color: #00BFFF;}#show{width: 300px;height: 100px;background-color:#FF0000;margin: 20px 0px;}</style><script type="text/javascript">window.onload=function(){//当鼠标移到move div上的时候，在show div中显示鼠标指针的坐标；//获取divvar move=document.getElementById("move");var show=document.getElementById("show");//鼠标移动的事件 onmousemove事件//事件对象就是游览器在执行响应函数的时候，会将一个事件对象作为参数传递给当前的响应函数//事件对象封装了当前事件相关的所有信息：鼠标的坐标，键盘的按键//clientX,clientY,属性表示当前事件对象的,X,Y坐标;move.onmousemove=function(event){//在show中显示；//alert("（"+event.clientX+","+event.clientY+")");show.innerHTML="（"+event.clientX+","+event.clientY+")";}}</script></head><body><div id="move"></div><div id="show"></div></body></html>

练习

1：功能需求 div跟随着鼠标移动；

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1{width: 200px;height: 200px;background-color: red;/*开启了绝对定位的元素才能设置偏移量*/position: absolute;}</style><script type="text/javascript">//功能需求  div跟随着鼠标移动；window.onload=function(){//获取div;var box1=document.getElementById("box1");//console.log(box1);   //当鼠标在body中移动的时候，div跟随着鼠标移动；document.body表示body元素   //console.log(document.body);div的偏移量是相对于整个页面的，而我们clientX是相对于可见框的原点的   //在滚动条滚动的时候就会发生变化document.onmousemove=function(event){//解决兼容性问题；event=event||window.event;//获取游览器的垂直滚动条滚动的距离；//console.log(document.body.scrollTop);//document.body.scrollTop ,在chrome中游览器兼容其他游览器不兼容;//var st=document.documentElement.scrollTop||document.body.scrollTop;var st = document.body.scrollTop || document.documentElement.scrollTop;var sl = document.body.scrollLeft || document.documentElement.scrollLeft;//var left=event.clientX;//var top=event.clientY;                      var left=event.clientX;                      var top=event.clientY;//设置偏移量，前提是元素开启了定位，不然没有效果；event.clientX表示鼠标指针的坐标没有单位box1.style.left = left + sl + "px";box1.style.top = top + st + "px";}}</script></head><body style="height: 1000px;"><div id="box1"></div></body></html>

阅读全文

0 0