JavaScript DHTML
童鞋们在使用JavaScript时，应该运用最多的地方就是编写DHTML效果程序，首先，我们要明确几个概念。
任何支持style的HTML元素
在JavaScript中都有一个对于的style属性。而我们则是使用这个style属性来编写DHTML程序。以及四个属性来操作元素偏移量，分别是
offsetHeight、offsetWidth、offsetLeft、offsetTop。下面，我用一个实例来阐述，编写DHTML程序，所需要
的准备。
结构：
<div class="cont" id="cont">
<ul id="img">
<li><img src="img/img1.jpg" />li>
<li><img src="img/img1.jpg" />li>
ul>
div>
样式：
.cont{width: 936px;height: 485px;box-shadow: #000 0 0 10px; margin: 0 auto;margin-top:20px;position: relative;overflow: hidden;}
.cont ul{position: absolute;width: 10000px;}
.cont ul li{width: 936px;height: 485px;float: left;}
脚本：
(
function(){
//动画计算
function dr(){
var img = document.getElementById("img"
);
//var MX = img.offsetLeft;
var MX =
parseInt(img.style.left);
if (MX<936
) {
MX--
;
}
if (MX==936||MX==(-936
)) {
return true;
}
img.style.left = MX +"px"
;
setTimeout(dr,10
);
}
//初始化
function de(){
var img = document.getElementById("img"
);
img.style.position = "absolute"
;
img.style.top = "0px"
;
img.style.left = "0px"
;
setTimeout(dr,10
);
}
window.onload =
function(){
de();
}
})();
在编写DHTML程序时，需要用到position: absolute;
overflow:hidden;属性。我们需要设置一个父容器，比如class="cont"这个容器，我们还需要通过样式，设置它的固定宽与
高，position属性为相对定位，还需要设置再内容超出时，我们需要截断的overflow:hidden;属性。于是，我们的父容器就搭建好了。
在这段图片向左滑动的效果中，我们需要初始化ul，把必要的属性设置上去，于是，我们就需要用style这个属性了。
var img = document.getElementById("img");
img.style.position = "absolute"; //设置为绝对定位
img.style.top = "0px"; //设置初始化的top值为零
img.style.left = "0px"; //设置初始化的left值为零
在初始化完成之后，紧接着我们需要通过一些计算，来达到，我们的目的。注：初始化与计算函数，是需要分开写在不同的函数中的。一样我们要获取这个
ul的id，通过一个变量，来接收它的初始left值，在img.style.left中，它返回的值是带有px的一个string类型，所以还需要转
换，通过parseInt()来转换为相应的number类型数值。在外部，我们还需要计算好当它滑动完成之后，显示第二个li中内容所需要的数值，也就
是一个li的宽度，接着，我们进行计算。
if(MX<936){
MX++;
}
当MX得到的初始化left值与936比对，如果小于它，则MX自加一。接着，我们要把新的MX值，赋值给img的left。
img.style.left =
MX+"px";注：MX现在是number类型的数值，在样式中是需要px来定义的，所以再连接一个px的字符串。最后，我们通过setTimeout
函数来重复调用，每多少毫秒，left会自加1，于是，我们需要的DHTML效果出现了，你看动画，是不是，就如此的简单。
这是一个举一反三的例子，我们可以向左滑动，也可以向右滑动，还可以opactyi来渐变显示与隐藏，以及各种有意思的动画。整体dom代码如下：
阅读(842) | 评论(0) | 转发(0) |
