Js HTML DOM动画

来源:http://www.chinese-glasses.com 作者:Web前端 人气:146 发布时间:2020-03-14
摘要:基础页面  知识要点 客户端javascript程序员对CSS感兴趣的是因为样式可以通过脚本编程。脚本化css启用了一系列有趣的视觉效果。例如:可以创建动画让文档从右侧“滑入”。创造这些

基础页面

 知识要点

10bet 1

客户端javascript程序员对CSS感兴趣的是因为样式可以通过脚本编程。脚本化css启用了一系列有趣的视觉效果。例如:可以创建动画让文档从右侧“滑入”。创造这些效果的javascript和css技术在以前统称为动态HTML(DHTML).而现在,这个技术术语已经不流行了。

为了理解CSS脚本化,我们必须CSS的基础和最常用的样式属性。

为了演示如何通过 JavaScript 来创建 HTML 动画,我们将使用一张简单的网页:

1.CSS概述

HTML的视觉显示包含很多变量:字体,颜色、间距等。css标准列举了这些变量,称为样式属性。

紧跟属性名的是冒号和值。多个属性时用分号隔开。CSS忽略了/* 和 */之间的注释,但是它不支持//后面的注释。

两种方式将一组定义视觉表现的CSS属性和对于的HTML元素关联在一起。第一种是通过给每个单独的HTML元素设置style属性的方式,称为内联样式。

尽管如此,通常将单独的HTML元素和CSS样式表分开,并把他们定义在一个样式表(stylesheet)中会更有用,样式表通过选择器将一组样式属性和使用选择器(selector)描述的一组HTML元素关联在一起。

CSS样式表的基本元素是样式规则,它们由选择器和包裹在一对{}中的css属性和值所组成。每个样式表可以包含任意数量的样式规则。在<style>标签使用或者保存为单独文件并通过<link>引入。

实例

1.1.层叠

回想下,在CSS的“C”代表了“层叠”、该术语指定了应用于文档中任何给定元素的样式规则是各个“来源”的“层叠”效果:

  • web浏览器的默认样式表
  • 文档的样式表
  • 每个独立的HTML元素的style属性 

style属性的样式表覆盖了样式表中的样式,并且文档的样式表中的样式覆盖了浏览器的默认样式。

为了显示文档元素,web浏览器“必须”组合元素的style属性。计算结果是一组实际用于显示元素的样式属性和值。这组值就是元素的“计算样式”(computed style)。

!DOCTYPE htmlhtmlbodyh1我的第一部 JavaScript 动画/h1div 我的动画在这里。/div/body/html

1.2.CSS历史

CSS历史是一个相对较老的标准,CSS1在1996年12月被采纳,它定义了具体的颜色,字体,外边距,边框和其它的旗本样式。该标准的第二版css2在1998年被采纳,定义了很多高级特性,最著名的就是元素的绝对定位。css2.1澄清和更正了css2,并且它删除了浏览器供应商从未实现的功能。现在的浏览器基本上都完全支持css2.1,但是低于IE8的IE还有一些遗漏问题。在css后续的工作中,针对版本3,CSS规范意见拆分成各种各样的专门化模块,分别来通过标准化进程。可以通过http://www.w3.org/Style/CSS/current-work找到css规范和工作草案。

创建动画容器

1.3.复合属性

某些经常在一起使用的样式属性可以组合起来使用一个特殊的复合属性。例如font-family、font-size、font-weight属性可以用font的复合属性一次性设置。

所有动画都应该与容器元素关联。

1.4.非标准属性

当浏览器厂商实现非标准CSS属性时,他们将属性名前加了一个厂商前缀。Firefox使用-moz-,Chrome使用-wibkit-,而IE则使用-ms-,它们甚至用这种方式来实现将来会标准化的属性。

在不同的浏览器中不同名字的CSS属性一起工作,你可以能发现一个属性定义一个类方式比较好:

.radius10{
  border-radius:10px; /*针对现代浏览器*/
  -moz-border-radius:10px; /*针对firefox 3.x*/
  -webkit-border-radius:10px; /*针对safari 3.2和4*/
}

像这样定义一个类叫“radios10”,可以将它添加到任意需要10像素圆角的元素的类上。

实例

1.5.CSS举例

 

div id ="container" div id ="animate"我的动画在这里。/div/div

2.重要的css属性

对于客户端程序员来说,最重要的css特性是那些指定文档中每个元素的可见性、尺寸和精确定位的属性。其它css属性允许指定堆叠的次序、透明度、裁剪区域、外边距、内边距、边框、颜色。为了脚本化css。理解这些样式属性的工作原理是非常重要的。

10bet 2

10bet,为元素添加样式

2.1.用css定位元素

CSS的position指定了应用到元素上的定位类型,如下是4个可能出现的属性值:

  • static:默认属性.指定元素按照常规的文档内容流。静态定位的元素不能使用top,left和类似其它的属性定位。如果想对该文档元素使用css定位技术,必须将position属性值设置为除此之外的其它3个属性值。
  • absolute:该值指定元素是相对于它包含的元素进行定位。相对于所有其它的元素,绝对定位的元素是独立定位的,它不是静态定位的元素中文档流的一部分。它的定位要么是相对于最近定位祖先元素,要么是相对于文档本身。
  • fixed:该值的定位元素是相对于浏览器窗口进行定位的。固定定位的元素始终显示在那里。固定定位的元素和其它元素是独立的。不是文档流的一部分。除了ie6不支持外 ,其它现代的浏览器都支持它。
  • relative:当position属性设置为relative,元素会按照常规的文档流进行布局,它的定位相对于它文档流中的位置进行调整。系统保留着元素正常文档流中的空间。不会因为要填充空间将其各边合拢。也不会将新的元素从新的位置“推开”。

一旦设置了元素的position属性为除了static以外的值,就可以通过元素的left,top,right,bottom属性的一些组合指定元素的位置。

如果元素使用绝对定位,它的top和left属性应该解释为它是相对于其position属性设置为除static值以外的祖先元素。如果绝对定位的元素没有定位过的祖先,则使用文档坐标进行度量——就是相对于文档左上角的偏移量。如果想相对于一个属于常规文档流中的容器绝对定位一个元素,则将容器的position指定为relative,top和left指定为0px。这就让容器变成了动态定位,但它仍留在文档流中原来的位置。

指定元素的宽度可以用width,另一种方法是同时指定left和right属性,高度也一样。如果同时指定left、right和width,那么width属性将覆盖right属性,height属性优先于bottom属性。

<head>
    <meta charset="utf-8">
</head>
<style type="text/css">
    .out{position: relative;left: 0;right: 0;width: 500px;height: 500px;background: #ccc;}
    .in{position: absolute;left: 100px;right: 100px;top: 100px;bottom: 100px;width: 200px;background: #aaa;}
</style>
<body>
    <div class="out">
        <div class="in">绝对定位</div>
    </div>
</body>

单位:px、in、cm、pt、em等等。

1.第三个维度

上面讲的是在二维坐标中指定X和Y坐标,z-index定义第三个维度:允许指定元素的堆叠次序。默认为0,可以是正负整数。如果重叠元素的z-index值一样,则按照在文档中出现的顺序绘制,即最后一个重叠的元素显示在最上面。

注意:z-index只对兄弟元素应用堆叠效果。

非定位元素(例如,默认使用position:static定位)总是以防止重叠的方式进行布局,因为z-index属性不会应用到他们上面。尽管如此,它们默认的z-index值为0,这意味着z-index为正值的定位元素显示在常规文档流的上面,而z-index为负直的定位元素显示在常规文档流的下面。

2.CSS定位示例:文本阴影

CSS3有text-shadow属性可以产生文本阴影效果,用CSS定位也可以实现,只要重复输出这段文本并重新定义一下样式:

<body>
    <!-- text-shadow属性 -->
    Shadowed

    <!-- 利用定位 -->

        Shadowed

            Shadowed


</body>

应该通过 style = "position: relative" 创建容器元素。

2.2.边框,外边距,内边距

边框样式border,指定边框的样式、样式和厚度,也可以单独指定。

在CSS3中可以用border-radius指定圆角,也可以设置单独的圆角。

margin和padding属性。

应该通过 style = "position: absolute" 创建动画元素。

2.3.CSS盒模型和定位细节

以上描述的margin,border和padding等样式属性在脚本化时很可能不经常使用。因为他们是CSS盒模型(box model)的一部分

left和top属性指定了从容器边框内侧到定位元素边框外侧的距离。这些属性不是从容器内容区域的左上角开始度量的,而是从容器内边距的左上角开始的。同样,right和bottom属性是从容器内边距的右下角开始度量的。

有一个例子说明这点。假设已创建一个在内容区域四周有10px padding和5px border的动态定位的容器元素。假设一个定位的子元素将left设为0px,则子元素会靠在容器左边框的右边,覆盖了容器的内边距。所以如果要这样做的话需要设置left为10px。

边框盒模型和box-sizing属性

标准CSS盒模型规定width和height样式属性给定内容区域尺寸,而且不包含内边距和边框。可以称此为“内容盒模型”。在老版的IE和新版的CSS都有一些例外 ,在IE6之前和当IE6-8在怪异模式下,显示一个页面(页面缺少<!DOCTYPE>或有一个不严格的doctype时),width和height属性确是包含内边距和边框宽度的。

但是这样也有用,所以CSS3引进了box-sizing属性,默认值是content-box,它指定执行页面的标准盒模型,如果替换为box-sizing:border-box,浏览器将会为那个元素应用IE的盒模型,即:width和height包含边框和内边框。当想以百分比形式为元素设置总体尺寸,又想以像素指定边框和内边距时,边框盒模型特别有用。

<div style="box-sizing:border-box;width: 50%;padding: 10px;border: 2px solid red;"></div>

box-sizing属性在当今的浏览器中都支持,但是还没不带前缀通用地实现。可以在chrome和safari中使用-webikit-box-sizing,在firefox中,使用-moz-box-sizing。在IE后等其他浏览器更高的版本中,可以使用不带前缀的box-sizing。

在CSS3中一个可选方案是使用盒子尺寸的计算值:

<div style="width: calc(50%-12px);padding:10px;border: solid red 2px;"></div>

在IE9中支持使用calc()计算css的值。在Firefox4中为-moz-calc()。

本文由10bet发布于Web前端,转载请注明出处:Js HTML DOM动画

关键词:

最火资讯