js小实例
共含有三个
- 滑动滚动条，获取到当前的x和y坐标，并显示
- div跟随鼠标移动
- 拖拽
实例一：滑动滚动条，获取到当前的x和y坐标，并显示
实现效果
实现核心代码
<script type="text/javascript">
window.onload = function(){
/*
当鼠标在areaDiv中移动时，在showMsg中显示鼠标的坐标
*/
// 1 先获取两个Div
var areaDiv = document.getElementById('areaDiv');
var showMsg = document.getElementById('showMsg');
// 2 当鼠标在areaDiv中移动时，事件才触发
areaDiv.onmousemove = function(event){
// 在showMsg中显示坐标
// console.log('X:'+event.clientX +', Y:' + event.clientY);
var x = event.clientX;
var y = event.clientY;
showMsg.innerHTML = '(X:'+ x+', Y:' + y +')';
};
};
</script>
实例二：div跟随鼠标移动
实现效果
核心代码
<script type="text/javascript">
window.onload = function(){
/*
使得div随着鼠标移动
*/
// 1 先获取box1
var box1 = document.getElementById('box1');
// 2 绑定鼠标移动事件
document.onmousemove = function(event){
// 2.1获取鼠标坐标
// event.pageX / pageY 获取鼠标相对于当前页面的坐标
var left = event.pageX;
var top = event.pageY;
// 2.2设置div的偏移量
box1.style.left = left + 'px';
box1.style.top = top + 'px';
};
};
</script>
实例三：拖拽
实现效果
实现核心代码
<script type="text/javascript">
window.onload = function(){
/*
* 拖拽box1元素
* - 拖拽的流程
1.当鼠标在被拖拽元素上按下时，开始拖拽
2.当鼠标移动时被拖拽元素开始跟随鼠标移动
3.当鼠标松开时，被拖拽元素固定在当前位置
*/
var box1 = document.getElementById('box1');
// 为box1绑定一个鼠标按下事件
box1.onmousedown = function(event){
/*
- div的偏移量 鼠标.clientX - 元素.offsetLeft
- div的偏移量 鼠标.clientY - 元素.offsetTop
*/
var ol = event.clientX - box1.offsetLeft;
var ot = event.clientY - box1.offsetTop;
// 为documnet绑定一个onmousemove事件
document.onmousemove = function(event){
// 当鼠标移动时被拖拽元素开始跟随鼠标移动
// - 先获取鼠标的坐标
/*
此处可以保证鼠标点击哪则鼠标显示就落在哪
*/
var left = event.clientX - ol;
var top = event.clientY - ot;
console.log('left:',left,'top:',top);
// 修改box1的位置
box1.style.left = left +'px';
box1.style.top = top +'px';
};
document.onmouseup = function(){
// 当鼠标松开时，被拖拽元素固定在当前位置
// - 取消document.onmousemove事件
document.onmousemove = false;
};
/*
- 当拖拽一个网页的内容时，浏览器会默认去搜索引擎中搜索内容，此时会导致拖拽功能的异常，这是浏览器的默认行为。
- 如果不希望发生这个行为，可以通过return false 来取消默认行为。
*/
return false;
};
};
</script>