Article Directory
When a page does not appear Wheel
1.1 renderings
A red square with the mouse to move the page
The overall realization of ideas: the mouse will coordinate the assignment of property for the div, div coordinate change property values
1.2 implementation code
1.CSS and div Code
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
/**
* 开启box1绝对定位,脱离文档流
* 这样box1才能移动
*/
position: absolute;
}
</style>
<body>
<div id="box1"></div>
</body>
2.JS Code
<script type="text/javascript">
window.onload=function(){
//获取box1对象
var box1=document.getElementById("box1");
//为整个文档绑定鼠标事件
document.onmousemove=function(event){
//解决浏览器兼容问题
event = event || window.event;
//获取鼠标坐标
var left = event.clientX;
var top = event.clientY;
//设置Div偏移量，相对于整个页面
box1.style.left=left+"px";
box1.style.top = top+"px";
}
}
</script>
Second, when the page appears wheel
2.1 on rollers knowledge
When the page appears wheel
- When the page is greater than the actual page display
- Like when writing this blog, the content a bit more, the whole is greater than the content of the page currently displayed page appears wheel
The example explained using FIG.
Red for the display window, blue for the contents of the window
There was a problem wheel slide
- The mouse relative to the display window as the origin
- div relative to the contents of the window as the origin
Look at how to solve the following:
2.2 code implementation (browser compatibility issues)
1.IE8 and more than Google, Firefox
- pageX and pageY can get coordinates relative to the current page
Specific code
body of code
<body style="height: 1000px; width: 1200px;">
<div id="box1"></div>
</body>
By setting inline styles to make the page appear Wheel
JS code to achieve the effect of
<script type="text/javascript">
window.onload=function(){
//获取box1对象
var box1=document.getElementById("box1");
//为整个文档绑定鼠标事件
document.onmousemove=function(event){
//解决浏览器兼容问题
event = event || window.event;
//IE8及以上 谷歌,火狐浏览器
//获取鼠标坐标
var left = event.pageX;
var top = event.pageY;
//设置Div偏移量，相对于整个页面
box1.style.left=left+"px";
box1.style.top = top+"px";
}
}
</script>
2. IE8 compatible with all browsers to find a common approach
Important ways: div offset = offset + mouse wheel slide distance
Specific code
Body and CSS code unchanged
JS code
<script type="text/javascript">
window.onload=function(){
//获取box1对象
var box1=document.getElementById("box1");
//为整个文档绑定鼠标事件
document.onmousemove=function(event){
//解决浏览器兼容问题
event = event || window.event;
//获取滚动条滚动的距离
/*
* 谷歌浏览器认为浏览器的滚动条是body的,可以通过body.scrollTop来获取
* 火狐浏览器认为浏览器的滚动条是html的
*/
var st = document.body.scrollTop ||document.documentElement.scrollTop;
var sl = document.body.scrollLeft ||document.documentElement.scrollLeft;
//client为显示窗口坐标
var left = event.clientX;
var top = event.clientY;
//设置div的偏移量
box1.style.left = left+sl+"px";
box1.style.top = top+st+"px";
}
}
</script>
