--------------------------------------------鼠标坐标位置-----------------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
#areaDiv {
border: 1px solid black;
width: 300px;
height: 50px;
margin-bottom: 10px;
}
#showMsg {
border: 1px solid black;
width: 300px;
height: 20px;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
* 当鼠标在areaDiv中移动时，在showMsg中来显示鼠标的坐标
*/
//获取两个div
var areaDiv = document.getElementById("areaDiv");
var showMsg = document.getElementById("showMsg");
/*
* onmousemove
* - 该事件将会在鼠标在元素中移动时被触发
*
* 事件对象
* - 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数,
* 在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标 键盘哪个按键被按下 鼠标滚轮滚动的方向。。。
*/
areaDiv.onmousemove = function(event){
/*
* 在IE8中，响应函数被处罚时，浏览器不会传递事件对象，
* 在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的
*/
/*if(!event){
event = window.event;
}*/
//解决事件对象的兼容性问题
event = event || window.event;
/*
* clientX可以获取鼠标指针的水平坐标
* cilentY可以获取鼠标指针的垂直坐标
*/
var x = event.clientX;
var y = event.clientY;
//alert("x = "+x + " , y = "+y);
//在showMsg中显示鼠标的坐标
showMsg.innerHTML = "x = "+x + " , y = "+y;
};
};
</script>
</head>
<body>
<div id="areaDiv"></div>
<div id="showMsg"></div>
</body>
</html>
----------------------------------------鼠标可见窗口--------------------------------------------------------
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
/*
* 开启box1的绝对定位
*/
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
* 使div可以跟随鼠标移动
*/
//获取box1
var box1 = document.getElementById("box1");
//绑定鼠标移动事件
document.onmousemove = function(event){
//解决兼容问题
event = event || window.event;
//获取滚动条滚动的距离
/*
* chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
* 火狐等浏览器认为浏览器的滚动条是html的，
*/
var st = document.body.scrollTop || document.documentElement.scrollTop;
var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
//var st = document.documentElement.scrollTop;
//获取到鼠标的坐标
/*
* clientX和clientY
* 用于获取鼠标在当前的可见窗口的坐标
* div的偏移量，是相对于整个页面的
*
* pageX和pageY可以获取鼠标相对于当前页面的坐标
* 但是这个两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用
*/
var left = event.clientX;
var top = event.clientY;
//设置div的偏移量
box1.style.left = left + sl + "px";
box1.style.top = top + st + "px";
};
};
</script>
</head>
<body style="height: 1000px;width: 2000px;">
<div id="box1"></div>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#a{
width: 400px;
height: 400px;
border: 1px solid black;
}
#c{
width: 20px;
height: 20px;
background: red;
float: left;
position: absolute;
}
#b{
margin-top: 20px;
width: 400px;
height: 50px;
border: 1px solid black;
}
</style>
<script>
window.οnlοad=function () {
var a=document.getElementById("a");
var b=document.getElementById("b");
a.οnmοusemοve=function (ev) {
// ev=event||window.event;
var y=ev.clientY;
var x=ev.clientX;
b.innerHTML="X="+x+",Y="+y;
};
var ma=document.body;
var c=document.getElementById("c");
var sl=ma.scrollTop||document.documentElement.scrollTop;
var st=ma.scrollLeft||document.documentElement.scrollLeft;
ma.οnmοusemοve=function (ev) {
var x1=ev.clientX;
var y1=ev.clientY;
c.style.top=y1+st+"px";
c.style.left=x1+sl+"px";
}
}
</script>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</body>
</html>
------------------------------------------------冒泡-----------------------------------------------------------------
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 200px;
height: 200px;
background-color: yellowgreen;
}
#s1{
background-color: yellow;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
* 事件的冒泡（Bubble）
* - 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
* - 在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡
*
*/
//为s1绑定一个单击响应函数
var s1 = document.getElementById("s1");
s1.onclick = function(event){
event = event || window.event;
alert("我是span的单击响应函数");
//取消冒泡
//可以将事件对象的cancelBubble设置为true，即可取消冒泡
event.cancelBubble = true;
};
//为box1绑定一个单击响应函数
var box1 = document.getElementById("box1");
box1.onclick = function(event){
event = event || window.event;
alert("我是div的单击响应函数");
event.cancelBubble = true;
};
//为body绑定一个单击响应函数
document.body.onclick = function(){
alert("我是body的单击响应函数");
};
};
</script>
</head>
<body>
<div id="box1">
我是box1
<span id="s1">我是span</span>
</div>
</body>
</html>
-----------------------------------------------------------------------------------------------
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
/*
* 开启box1的绝对定位
*/
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
* 使div可以跟随鼠标移动
*/
//获取box1
var box1 = document.getElementById("box1");
//绑定鼠标移动事件
document.onmousemove = function(event){
//解决兼容问题
event = event || window.event;
//获取滚动条滚动的距离
/*
* chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
* 火狐等浏览器认为浏览器的滚动条是html的，
*/
var st = document.body.scrollTop || document.documentElement.scrollTop;
var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
//var st = document.documentElement.scrollTop;
//获取到鼠标的坐标
/*
* clientX和clientY
* 用于获取鼠标在当前的可见窗口的坐标
* div的偏移量，是相对于整个页面的
*
* pageX和pageY可以获取鼠标相对于当前页面的坐标
* 但是这个两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用
*/
var left = event.clientX;
var top = event.clientY;
//设置div的偏移量
box1.style.left = left + sl + "px";
box1.style.top = top + st + "px";
};
var box2 = document.getElementById("box2");
box2.onmousemove = function(event){
event = event || window.event;
event.cancelBubble = true;
};
};
</script>
</head>
<body style="height: 1000px;width: 2000px;">
<div id="box2" style="width: 500px; height: 500px; background-color: #bfa;"></div>
<div id="box1"></div>
</body>
</html>
---------------------------------------------------------------------------------------------------------
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#info{
width: 300px;
height: 500px;
background-color: #bfa;
overflow: auto;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
* 当垂直滚动条滚动到底时使表单项可用
* onscroll
* - 该事件会在元素的滚动条滚动时触发
*/
//获取id为info的p元素
var info = document.getElementById("info");
//获取两个表单项
var inputs = document.getElementsByTagName("input");
//为info绑定一个滚动条滚动的事件
info.onscroll = function(){
//检查垂直滚动条是否滚动到底
if(info.scrollHeight - info.scrollTop == info.clientHeight){
//滚动条滚动到底，使表单项可用
/*
* disabled属性可以设置一个元素是否禁用，
* 如果设置为true，则元素禁用
* 如果设置为false，则元素可用
*/
inputs[0].disabled = false;
inputs[1].disabled = false;
}
};
};
</script>
</head>
<body>
<h3>欢迎亲爱的用户注册</h3>
<p id="info">
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
</p>
<!-- 如果为表单项添加disabled="disabled" 则表单项将变成不可用的状态 -->
<input type="checkbox" disabled="disabled" />我已仔细阅读协议，一定遵守
<input type="submit" value="注册" disabled="disabled" />
</body>
</html>
1632
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
