《JavaScript Dom 编程艺术》读书笔记-第10章

时间：2024-08-15 22:06:15

用JS实现动画~内容包括：

1. 动画基础知识

2. 用动画丰富网页的浏览效果

动画就是让元素的位置随时间而不断变化。

位置：

//CSS
element{

position:absolute;

top: 50px;

left: 100px;

}
//dom
elem.style.position="absolute";
elem.style.left="400px";
elem.style.top="20px";

position

默认值：static

可能的值：absolute，生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位，元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定；fixed，生成绝对定位的元素，相对于浏览器窗口进行定位；relative，生成相对定位的元素，相对于其正常位置进行定位，因此，"left:20" 会向元素的 LEFT 位置添加 20 像素；static，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

时间

JavaScript函数setTimeout能够让某个函数在经过一段时间之后才开始执行。

setTimeout("function",interval)

让页面上的文字移动

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>Document</title>

 </head>

 <body>

  <p id="message">Whee!</p>

  <script src="1.js"></script>

 </body>

</html>
function positionMessage(){

    if (!document.getElementById)

    {

        return false

    }

    var elem=document.getElementById("message");

    elem.style.position="absolute";

    elem.style.left="400px";

    elem.style.top="20px";

    movement=setTimeout("moveMessage()",5000);

}

function moveMessage(){

    if (!document.getElementById) return false;

        if (!document.getElementById("message")) return false;

    var elem=document.getElementById("message");

    elem.style.left="200px";

}

如果希望是缓慢移动到目的地：

function moveMessage(){

    if (!document.getElementById)

    {

        return false

    }

    var elem=document.getElementById("message");

    var xpos=parseInt(elem.style.left);

    var ypos=parseInt(elem.style.top);

    if (xpos==200 && ypos==200){

        return true;

    }

    if (xpos<200)

    {

        xpos++;

    }

    if (xpos>200)

    {

        xpos--;

    }

    if (ypos>200)

    {

        ypos--;

    }

    if (ypos<200)

    {

        ypos++;

    }

    elem.style.left=xpos+"px";

    elem.style.top=ypos+"px";

    movement=setTimeout("moveMessage()",10)

}

抽象化：

function moveElement(element_ID,final_x,final_y,interval){

    if (!document.getElementById)

    {

        return false

    }

    var elem=document.getElementById(element_ID);

    if (elem.movement)

    {

        clearTimeout(elem.movement);

    }

    var xpos=parseInt(elem.style.left);

    var ypos=parseInt(elem.style.top);

    if (xpos==final_x && ypos==final_y){

        return true;

    }

    if (xpos<final_x)

    {

        xpos++;

    }

    if (xpos>final_x)

    {

        xpos--;

    }

    if (ypos>final_y)

    {

        ypos--;

    }

    if (ypos<final_y)

    {

        ypos++;

    }

    elem.style.left=xpos+"px";

    elem.style.top=ypos+"px";

    var repeat="moveElement('"+element_ID+"','"+final_x+"','"+final_y+"','"+interval+"')"

    elem.movement=setTimeout(repeat,interval)

}

实用的动画：

W3C在它们的Web Content Accessibility Guidelines（web内容可访问性指南）中给出建议：“除非浏览器允许用户冻结移动着的内容，否则就应该避免让内容在网页中移动。（优先级2）。如果网页上有移动着的内容，就应该用脚本或插件的机制允许用户冻结这种移动或动态的更新行为。”

这里的关键在于用户能不能控制，解决了这个问题，根据用户行为移动一个页面元素可能起到增强网页的效果。

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>web design</title>

  <link rel="stylesheet" href="2.css" media="screen"/>

 </head>

 <body>

 <h1> web design </h1>

<p>there are the things you should know.</p>

<ol id="linklist">

<li> <a href="structure.html">Structure</a>

</li>

<li><a href="presatation.html"> Presatation </a>

</li>

<li><a href="behavior.html"> Behavior </a>

</li>

</ol>

<!-- <div id="slideshow"> <img src="1.jpg" alt="building blocks of web design" id="preview" /> </div> --> 

<script src="moveElement.js"></script>

<script src="2.js"></script>

 </body>

</html>

希望为每个链接添加一个预览图片：

CSS的overflow 属性用来处理一个元素的尺寸超出其容器尺寸的情况。当一个元素包含的内容超过自身大小时，就会发生内容移除，这种情况你可以对内容进行“剪裁”，只让一部分内容可见。还可以通过overflow属性告诉浏览器是否需要显示滚动条，以便让给用户能够看到内容的其余部分。

overflow的属性可取值有4种：visible，hidden，scroll和auto

visible：不剪裁溢出的内容

hidden：隐藏溢出的内容

scroll：类似hidden，但显示一个滚动条以便让用户能够滚动看到全部内容。

auto：类似scroll，但浏览器只在确实发生溢出时才显示滚动条。内容没有溢出就不显示。

function prepareSlideShow(){

    //确保浏览器支持JavaScript

    if (!document.getElementsByTagName)

    {

        return false;

    }

    if (!document.getElementById)

    {

        return false;

    }

    //确保元素存在

    if (!document.getElementById("preview"))

    {

        return false;

    }

    if (!document.getElementById("linklist"))

    {

        return false;

    }

    //为图片应用样式

    var preview=document.getElementById("preview");

    preview.style.position="absolute";

    preview.style.left="0px";

    preview.style.top="0px";

    // 得到所有连接

    //var linklist=document.getElementById("linklist");

    var list=linklist.getElementsByTagName("a");

    //为每次的onmouseover提供动画效果

    for (var i=0;i<list.length ;i++ )

    {

        list[i].index=i+1

        list[i].onmouseover=function(){

            var left=-parseInt(this.index)*100;

            moveElement("preview",left,0,1)

        }

    }

}

如果把鼠标在链接之间快速移动，出现混乱的解决方案。以及改进动画效果。

function moveElement(element_ID,final_x,final_y,interval){

    if (!document.getElementById)

    {

        return false

    }

    var elem=document.getElementById(element_ID);

    if (elem.movement)

    {

        clearTimeout(elem.movement);

    }

    //方法一

    //if (!elem.style.left||!elem.style.top)

    //{

    //    return false；

    //}

    //方法二

    if (!elem.style.left)

    {

        elem.style.left="0px";

    }

    if (!elem.style.top)

    {

        elem.style.top="0px";

    }

    var xpos=parseInt(elem.style.left);

    var ypos=parseInt(elem.style.top);

    if (xpos==final_x && ypos==final_y){

        return true;

    }

    if (xpos<final_x)

    {

        var dist=Math.ceil((final_x-xpos)/10)

        xpos=xpos+dist;

    }

    if (xpos>final_x)

    {

        var dist=Math.ceil((xpos-final_x)/10)

        xpos=xpos-dist;

    }

    if (ypos>final_y)

    {

        var dist=Math.ceil((ypos-final_y)/10)

        ypos=ypos-dist;

    }

    if (ypos<final_y)

    {

        var dist=Math.ceil((final_y-ypos)/10)

        ypos=ypos+dist;

    }

    elem.style.left=xpos+"px";

    elem.style.top=ypos+"px";

    var repeat="moveElement('"+element_ID+"','"+final_x+"','"+final_y+"','"+interval+"')"

    elem.movement=setTimeout(repeat,interval)

}

<div id="slideshow"> <img src="1.jpg" alt="building blocks of web design" id="preview" /> </div>
只为了图片显示而存在，对于没有js支持的浏览器，以上内容有点多余。不如用js来生成它。

function prepareSlideShow(){

    var slideshow=document.createElement("div");

    slideshow.setAttribute("id","slideshow");

    var preview=document.createElement("img");

    preview.setAttribute("id","preview");

    preview.setAttribute("src","1.jpg");

    preview.setAttribute("alt","building blocks of web design");

    slideshow.appendChild(preview);

    var linklist=document.getElementById("linklist");

    insertAfter(slideshow,linklist)

    //确保浏览器支持JavaScript

    if (!document.getElementsByTagName)

    {

        return false;

    }

    if (!document.getElementById)

    {

        return false;

    }

    //确保元素存在

    if (!document.getElementById("preview"))

    {

        return false;

    }

    if (!document.getElementById("linklist"))

    {

        return false;

    }

    // 得到所有连接

    //var linklist=document.getElementById("linklist");

    var list=linklist.getElementsByTagName("a");

    //为每次的onmouseover提供动画效果

    for (var i=0;i<list.length ;i++ )

    {

        list[i].index=i+1

        list[i].onmouseover=function(){

            var left=-parseInt(this.index)*100;

            moveElement("preview",left,0,1)

        }

    }

}

function insertAfter(newElement,targetElement){

    var parent=targetElement.parentNode

    if (parent.lastChild==targetElement)

    {

        parent.appendChild(newElement);

    }else

        parent.insertBefore(newElement,targetElement.nextSibling)

}

总结：

这章对动画进行了定义：随时间的变化而改变某个元素在浏览器窗口的显示位置。

相关文章