Chinaunix首页 | 论坛 | 博客
  • 博客访问: 769423
  • 博文数量: 372
  • 博客积分: 10063
  • 博客等级: 中将
  • 技术积分: 4220
  • 用 户 组: 普通用户
  • 注册时间: 2012-02-24 11:36
文章分类

全部博文(372)

文章存档

2012年(372)

分类: 虚拟化

2012-04-21 22:14:48

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>
复制代码
阅读(626) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~