依依成人精品视频在线观看,欧美不卡无线在线一二三区观,精品国产精品中文字幕

《JavaScript Dom 編程藝術》讀書筆記-第10章

用JS實現(xiàn)動畫~內(nèi)容包括：

1. 動畫基礎知識

2. 用動畫豐富網(wǎng)頁的瀏覽效果

動畫就是讓元素的位置隨時間而不斷變化。

位置：

//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" 屬性進行規(guī)定；fixed，生成絕對定位的元素，相對于瀏覽器窗口進行定位；relative，生成相對定位的元素，相對于其正常位置進行定位，因此，"left:20" 會向元素的 LEFT 位置添加 20 像素；static，沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。

時間

JavaScript函數(shù)setTimeout能夠讓某個函數(shù)在經(jīng)過一段時間之后才開始執(zhí)行。

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內(nèi)容可訪問性指南）中給出建議：“除非瀏覽器允許用戶凍結移動著的內(nèi)容，否則就應該避免讓內(nèi)容在網(wǎng)頁中移動。（優(yōu)先級2）。如果網(wǎng)頁上有移動著的內(nèi)容，就應該用腳本或插件的機制允許用戶凍結這種移動或動態(tài)的更新行為。”

這里的關鍵在于用戶能不能控制，解決了這個問題，根據(jù)用戶行為移動一個頁面元素可能起到增強網(wǎng)頁的效果。

<!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 屬性用來處理一個元素的尺寸超出其容器尺寸的情況。當一個元素包含的內(nèi)容超過自身大小時，就會發(fā)生內(nèi)容移除，這種情況你可以對內(nèi)容進行“剪裁”，只讓一部分內(nèi)容可見。還可以通過overflow屬性告訴瀏覽器是否需要顯示滾動條，以便讓給用戶能夠看到內(nèi)容的其余部分。

overflow的屬性可取值有4種：visible，hidden，scroll和auto

visible：不剪裁溢出的內(nèi)容

hidden：隱藏溢出的內(nèi)容

scroll：類似hidden，但顯示一個滾動條以便讓用戶能夠滾動看到全部內(nèi)容。

auto：類似scroll，但瀏覽器只在確實發(fā)生溢出時才顯示滾動條。內(nèi)容沒有溢出就不顯示。

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)
        }
    }
}

如果把鼠標在鏈接之間快速移動，出現(xiàn)混亂的解決方案。以及改進動畫效果。

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支持的瀏覽器，以上內(nèi)容有點多余。不如用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)

}

總結：

這章對動畫進行了定義：隨時間的變化而改變某個元素在瀏覽器窗口的顯示位置。

posted on 2018-11-23 17:03 Yaocylulu 閱讀(323) 評論(0) 收藏舉報

刷新頁面返回頂部

Yaocylulu

導航

公告

《JavaScript Dom 編程藝術》讀書筆記-第10章