js 关于拖拽的初步学习
2011-09-19 10:24 呦菜 阅读(232) 评论(0) 编辑 收藏 举报最近有在网上开了关于js模拟滚动条的,发现我对这些一无所知,连起码的dom属性都不了解,所以想以js的拖拽开始学习,慢慢进步~~~
首先需要了解各个相关属性:
scrollWidth:
说明: scrollWidth是用来获取元素的实际内容的宽度。也可以说是scrollWidth能够返回整个网页或元素的可是宽度以后,加上滚动条滚动的距离值。
语法:s = element.scrollWidth;
实例:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js" language="javascript"></script>
<title>无标题文档</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#box{
width:150px;
height:100px;
border:3px solid #06C;
overflow:auto;
}
#topBar{
width:250px;
height:70px;
background:#FF9;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#box").mousedown(function(){
alert(this.scrollWidth);
});
});
</script>
</head>
<body>
<div id="box">
<div id="topBar">
</div>
</div>
</body>
</html>
此段代码中,#box的宽度原来为150px,但是其子元素topBar的宽度为250px,所以box的宽度为可见的宽度150px+滚动条滚动的值100px=250px.
clientWidth:
说明:clientWidth返回的是元素的可见宽度,不包括边框宽度和滚动条的宽度。
语法:s = = Element.clientWidth;
实例:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js" language="javascript"></script>
<title>无标题文档</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#box{
width:150px;
height:100px;
border:3px solid #06C;
overflow:auto;
margin:70px auto;
}
#topBar{
width:250px;
height:70px;
background:#FF9;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var documentWidth=document.documentElement.clientWidth;
alert(documentWidth);
});
</script>
</head>
<body>
</body>
</html>
此段代码在浏览器中的显示结果不同:
ie8:1436 火狐:1440
offsetWidth:
说明:offsetWidth返回的是实际可见的宽度,包括边框和内容空白补丁,任何超出元素范围的内容都将不被计算。
语法:s = = Element.clientWidth;
实例:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
/*注意该样式设置div的边框和宽度*/
#a{
width:20px;
border:1px solid;
}
</style>
<body>
<h3>注意在ie与ff浏览器中返回的值不同,因为ie里div宽度被撑大.ff则没有撑大.但他们返回的值是正确的.offsetWidth本身就是用来返回元素的可见宽度包括滚动条和边框</h3>
<div id="a">KangTao</div>
<script language="javascript">
var a = document.getElementById("a");
alert(a.offsetWidth);
</script>
</body>
</html>
此代码在火狐和ie中弹出的都为:22
但是,如果去除 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">,将会得到不一样的结果:
火狐下弹出仍为:22,但在ie下为:59,并且在屏幕的显示结果也不同,
scrollTop:
说明:scrollTop属性可以获取某网页或者元素滚动条向下拉动的值。
语法:s = element.scrollWidth;
实例:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#a{
border:1px solid;
overflow:auto;
width:150px;
height:150px;
}
</style>
</head>
<body>
<div id="a">
Web圈致力于javascript ajax dom html css网页设计手册教程的完善与讲解,提供最新的web2.0设计教程与原创作品,是各位学习javascript ajax dom html css的理想网站
</div>
你可以拉动滚动条,然后点击获取按扭<br/>
<input type="button" value="获取滚动条纵向位置" onclick="get_scrll()" />
<script language="javascript">
alert("默认的滚动条纵向位置:"+a.scrollTop);
function get_scrll(){
var a = document.getElementById("a");
alert("现在的滚动条纵向位置:"+a.scrollTop);
}
</script>
</body>
</html>
弹出相应的向上滚动的值。
clientX:
说明:clientX可以返回鼠标箭头在当前网页中的x坐标,水平位置。注意:该值不包括滚动条滚动的值,即如果元素内容超出浏览器宽度,向右拉滚动条,再把鼠标移动到最左边,显示的clientX值任然为0.在IE浏览器中可以直接使用event.clientX来返回该值.但在FF中必须使用参数传弟事件对像来获得该值.
语法:x=event.clientX || x=e.clientX
实例:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>clientX</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function showClientx(event)
{
x=event.clientX;
y=event.clientY;
$("#value").html("x:"+x+"y:"+y+"");
}
</script>
</head>
<body onmousemove="showClientx(event);">
<p>你好~~~~~~~~~~~~~~~~</p>
<div id="value"></div>
</body>
</html>
此段代码在火狐上运行时,x和y值在鼠标移动到整个浏览器页面时都可以显示,但是在ie下有不同,鼠标只有在移动到p和div部分时才会显示,其他部分数据不变,但当我把<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">去掉之后ie和火狐又完全一样了