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代码如下:
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DHTML简单动画一title>
<link rel="stylesheet" type="text/css" href="css/reset-min.css" />
<style type="text/css">
.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;}
.cont ul.nav{height: 40px;position: absolute;top:0px;left:0px; background:#ccc;bottom: 0px;opacity: .75;-moz-opacity:.75;filter: alpha(opacity=75);}
.cont ul.nav li{width: 100px;height:40px; float: left;line-height: 40px;}
.cont ul.nav li a{font-size: 20px;text-align:center;text-decoration: none;display: block;width: 100px;height: 40px;}
style>
<script type="text/javascript">
(function(){
function dr(){
var img = document.getElementById("img");
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();
}
})();
script>
head>
<body>
<div class="cont" id="cont">
<ul id="img">
<li><img src="img/img1.jpg" />li>
<li><img src="img/img1.jpg" />li>
ul>
div>
body>
html>
阅读(911) | 评论(0) | 转发(0) |