标签:scrolltop client har list dde src 鼠标 oct java
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img {
position: absolute;
top: 2px;
}
</style>
</head>
<body>
<img src="images/angel.gif" >
<script type="text/javascript">
//【案例】图片跟随鼠标移动
//案例需求:简单实现图片跟随鼠标移动的效果(不考虑兼容性)。
//案例分析:需要使用鼠标指针移动事件mousemove,每次鼠标移动,都会获得最新的鼠标指针坐标,
//把这个x和y坐标作为图片的top和left 值就可以实现图片的移动。
var img=document.querySelector(‘img‘);
document.addEventListener(‘mousemove‘,function one(e){
var x=e.pageX || e.clientX + (document.body.scrillLeft || document.documentElement.scrollLeft);
var y=e.pageY || e.clientY + (document.body.scrollTop || document.documentElement.scrollLeft);;
img.style.left=x+‘px‘;
img.style.top=y+‘px‘;
})
</script>
</body>
</html>
标签:scrolltop client har list dde src 鼠标 oct java
原文地址:https://www.cnblogs.com/nuanyan/p/14887405.html