代码改变世界

js 关于拖拽的初步学习

2011-09-19 10:24  呦菜  阅读(234)  评论(0)  编辑  收藏  举报

最近有在网上开了关于js模拟滚动条的，发现我对这些一无所知，连起码的dom属性都不了解，所以想以js的拖拽开始学习，慢慢进步~~~

首先需要了解各个相关属性：

scrollWidth:

    说明： scrollWidth是用来获取元素的实际内容的宽度。也可以说是scrollWidth能够返回整个网页或元素的可是宽度以后，加上滚动条滚动的距离值。

    语法：s = element.scrollWidth;

   实例：

View Code 
<!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;

   实例：

View Code 
<!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;

实例：

View Code 
<!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;

实例：

View Code 
<!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

实例：

View Code 
<!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和火狐又完全一样了