DOM动画效果基础知识总结

位置

CSS

1. /*把element元素摆放在距离浏览器窗口的左边界100像素，距离浏览器窗口的上边界50像素的位置上。*/

2. element {

3. position: absolute;

4. top:50px;

5. left:100px;

6. }

7. DOM

1. element.style.position = "absolute";

2. element.style.left = "100px";

3. element.style.top = "50px";

position属性的合法值有static、fixed、relative、absolute四种。static是position属性的默认值，意思是有关元素将按照它们在标记里出现的先后顺序出现在浏览器窗口里。relative的含义与static相似，区别是position属性等于relative的元素还可以（通过应用float属性）从文档的正常显示顺序里脱离出来。

如果把某个元素的position属性设置为absolute，我们就可以把它摆放到容纳它的容器的任何位置。这个容器要么是文档本身，要么是一个有着fixed或absolute属性的父元素。这个元素在原始标记里出现的位置与它的显示为位置无关，因为他的显示由top，left，right和botton等属性决定。你可以使用像素或百分比作为单位设置这些属性的值。

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

1. function positionMessage() {

2. if(!document.getElementById) return false;

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

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

5. elem.style.position = "absolute";

6. elem.style.left = "50px";

7. elem.style.top = "100px";

8. // body...

9. }

10. addLoadEvent(positionMessage);

• 时间

js函数setTimeout能够让某个函数在经历过一段预定的时间之后才开始执行。这个函数带有两个参数：第一个参数通常是一个字符串，其内容是将要执行的那个函数的名字；第二个参数是一个数值，它以毫秒为单位设定了需要经过多长时间后开始执行第一个参数所给出的函数:

setTimeout("function",interval)

在绝大多数时候，把这个函数调用赋值给一个变量将是一个好主意：

variable = setTimeout("function",interval)

如果想要取消某个正在排队等待执行的函数，就必须事先像上面这样把setTimeout函数返回值赋值给一个变量。你可以用一个clearTimeout的函数来取消等待执行队列里的某个函数。这个函数需要一个参数-----保存着某个setTimeout函数调用返回值得变量：

clearTimeout(variable)

修改positionMessage函数，让它5秒之后再去调用moveMessage函数：

1. function positionMessage() {

2. if(!document.getElementById) return false;

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

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

5. elem.style.position = "absolute";

6. elem.style.left = "50px";

7. elem.style.top = "100px";

8. movement = setTimeout("moveMessage()",500);

9. // body...

10. }

11.  

12. function moveMessage(){

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

14. elem.style.left = "200px"

15. }

16. addLoadEvent(positionMessage);

• 时间递增

1. function positionMessage() {

2. if(!document.getElementById) return false;

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

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

5. elem.style.position = "absolute";

6. elem.style.left = "50px";

7. elem.style.top = "100px";

8. movement = setTimeout("moveMessage()",10);

9. // body...

10. }

11.  

12. function moveMessage(){

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

14. //获得元素的当前位置

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

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

17. if(xpos == 200 && ypos == 100)

18. {

19. return true;

20. }

21. if(xpos <200)

22. {

23. xpos++;

24. }

25. if(xpos> 200)

26. {

27. xpos--;

28. }

29. if(ypos <100)

30. {

31. ypos ++;

32. }

33. if(ypos >100)

34. {

35. ypos --;

36. }

37.  
38.  

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

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

41. movement = setTimeout("moveMessage()",10);

42. }

43. addLoadEvent(positionMessage);

函数抽象化

1. function positionMessage() {

2. if(!document.getElementById) return false;

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

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

5. elem.style.position = "absolute";

6. elem.style.left = "50px";

7. elem.style.top = "100px";

8. //movement = setTimeout("moveMessage()",10);

9. moveElement("message",200,100,10);

10. // body...

11. }

12. function moveElement(elementID,final_x,final_y,interval){

13. var elem = document.getElementById(elementID);

14. //获得元素的当前位置

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

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

17. if(xpos == final_x && ypos == final_y)

18. {

19. return true;

20. }

21. if(xpos <final_x)

22. {

23. xpos++;

24. }

25. if(xpos> final_x)

26. {

27. xpos--;

28. }

29. if(ypos <final_y)

30. {

31. ypos ++;

32. }

33. if(ypos >final_y)

34. {

35. ypos --;

36. }

37.  
38.  

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

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

41. var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";

42. movement = setTimeout(repeat,interval);

43. }

44.  
45.  

46. addLoadEvent(positionMessage);

• onmouseover事件显示图片

1. <!DOCTYPE html>

2. <html lang = "en">

3. <head>

4. <meta charset = "utf-8"/>

5. <title>Web Design</title>

6. <!-- <link rel="stylesheet" href="layout.css" media="screen"/> -->

7. </head>

8. <body>

9. <h1>Web Design</h1>

10. <p>There are the things you shoule know.</p>

11. <ol id="linklist">

12. <li>

13. <a href="image/btn_acomlete_1.png">Firework</a>

14. </li>

15. <li>

16. <a href="image/btn_acomlete_2.png">tea</a>

17. </li>

18. <li>

19. <a href="image/btn_allcomlete_1.png">Rose</a>

20. </li>

21. <li>

22. <a href="image/btn_allcomlete_2.png">Big bar</a>

23. </li>

24. <img src="image/test.gif" alt = "building blocks of web design" id="preview"/>

25.  

26. </ol>

27.  

28. <script>

29. </script>

30. </body>

31. </html>

现在是整张图可见，若要实现每次显示一部分，要用css实现

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

overflow属性的可取值有4种:visible、hidden、scroll、和auto

visible：不裁剪溢出的内容。浏览器将把溢出的内容呈现在其容器元素的显示区域以外，全部内容都可见。

hidden：隐藏溢出的内容。内容只显示在其容器元素的显示区域里，这意味着只有一部分内容可见。

scroll：类似于hidden，浏览器将对溢出内容进行隐藏，但显示一个滚动条以方便用户能够滚动看到内容的其他部分。

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

1. <!-- 首先把这张图放在一个容器元素 -->

2. <div id="slideshow">

3. <img src="image/test.gif" alt = "building blocks of web design" id="preview"/>

4. </div>

1. #slideshow{

2. width:100px;

3. height: 100px;

4. position: relative;

5. /*把position设为relative很重要，因为我们想让图片使用绝对位置。通过使用值relative，子元素的(0,0)坐标将固定在slidenshow div的左上角*/

6. overflow: hidden;

7. /*将overflow设为hidden确保其中的内容会被剪裁*/

8. }

JS

我们计划用moveElement函数来移动图片。根据用户正把鼠标悬停在哪个连接上，我们将这个图片向左或向右移动。

我们需要把调用moveElement函数的行为，与链接清单里每一个链接的onmouseover事件关联起来。

编写一个prepareSlideshow函数来完成这项工作

1. function prepareSlideshow() {

2. //确保浏览器支持DOM方法

3. if(!document.getElementsByTagName) return false;

4. if(!document.getElementById) return false;

5. //确保元素存在

6. if(!document.getElementById("linklist")) return false;

7. if(!document.getElementById("preview")) return false;

8. //为图片应用样式

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

10. preview.style.position = "absolute";

11. preview.style.left = "0px";

12. preview.style.top = "0px";

13. //取得列表中的所有链接

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

15. var links = list.getElementsByTagName("a");

16. //为mouseover事件添加动画效果

17. links[0].onmouseover = function(){

18. moveElement("preview",-100,0,10);

19. }

20. links[1].onmouseover = function(){

21. moveElement("preview",-200,0,10);

22. }

23. links[2].onmouseover = function(){

24. moveElement("preview",-300,0,10);

25. }

26. links[3].onmouseover = function(){

27. moveElement("preview",-400,0,10);

28. }

29. // body...

30. }

这留下了一个隐患：每当用户把鼠标指针悬停在某个链接上，不管上一次调用是否已经把图片移动到位，moveElement函数都会被再次调用并试图把这个图片移动到另一个地方去。于是，当用户在链接之间快速移动鼠标时，movement变量就会像一条拔河绳那样来回变化，而moveElement函数会试图把图片同时移动到两个不同的地方去。

如果用户移动鼠标的速度够快，累积在setTimeout队列里的事件就会导致动画效果产生滞后。为了消除动画滞后的现象，可以用clearTimeout(movement)

可是，如果在还没有设置movement变量之前就执行这条语句，会报错。

1. function moveElement(elementID,final_x,final_y,interval){

2. var elem = document.getElementById(elementID);

3. //******

4. if(elem.movement)

5. {

6. clearTimeout(elem.movement);

7. }

8. //获得元素的当前位置

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

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

11. if(xpos == final_x && ypos == final_y)

12. {

13. return true;

14. }

15. if(xpos <final_x)

16. {

17. xpos++;

18. }

19. if(xpos> final_x)

20. {

21. xpos--;

22. }

23. if(ypos <final_y)

24. {

25. ypos ++;

26. }

27. if(ypos >final_y)

28. {

29. ypos --;

30. }

31.  
32.  

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

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

35. var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";

36. elem.movement = setTimeout(repeat,interval);//******

37. }

• 改进动画效果

1. function moveElement(elementID,final_x,final_y,interval){

2. var elem = document.getElementById(elementID);

3. //******

4. if(elem.movement)

5. {

6. clearTimeout(elem.movement);

7. }

8. //获得元素的当前位置

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

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

11. if(xpos == final_x && ypos == final_y)

12. {

13. return true;

14. }

15. if(xpos <final_x)

16. {

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

18. xpos = xpos + dist;

19. }

20. if(xpos> final_x)

21. {

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

23. xpos = xpos - dist;

24. }

25. if(ypos <final_y)

26. {

27. ypos ++;

28. }

29. if(ypos >final_y)

30. {

31. ypos --;

32. }

33.  
34.  

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

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

37. var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";

38. elem.movement = setTimeout(repeat,interval);//******

39. }

添加安全监察

1. if(!elem.style.left)

2. {

3. elem.style.left = "0px";

4. }

5. if(!elem.style.top)

6. {

7. elem.style.top = "0px";

8. }

生成HTML标记

文档中包含一些只是为了能够用javascript代码实现动画效果而存在的标记。

如果用户没有启动js支持，以上内容未免有些多余。

1. function prepareSlideshow() {

2. //确保浏览器支持DOM方法

3. if(!document.getElementsByTagName) return false;

4. if(!document.getElementById) return false;

5. //*************************

6. if(!document.getElementById("linklist")) return false;

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

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

9.  

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

11. preview.setAttribute("src","image/test.gif");

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

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

14. slideshow.appendChild(preview);

15.  

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

17. insertAfter(slideshow,list);

18. //*************************

19. var links = list.getElementsByTagName("a");

20. //为mouseover事件添加动画效果

21. links[0].onmouseover = function(){

22. moveElement("preview",-100,0,10);

23. }

24. links[1].onmouseover = function(){

25. moveElement("preview",-200,0,10);

26. }

27. links[2].onmouseover = function(){

28. moveElement("preview",-300,0,10);

29. }

30. // body...

31. }

1. function insertAfter(newElement,targetElement)

2. {

3. var parent = targetElement.parentNode;

4. if(parent.lastChild == targetElement)

5. {

6. parent.appendChild(newElement);

7. }

8. else

9. {

10. parent.insertBefore(newElement,targetElement.nextSibling);

11.  

12. }

13. }

1. #slideshow{

2. width:100px;

3. height: 100px;

4. position: relative;

5. /*把position设为relative很重要，因为我们想让图片使用绝对位置。通过使用值relative，子元素的(0,0)坐标将固定在slidenshow div的左上角*/

6. overflow: hidden;

7. /*将overflow设为hidden确保其中的内容会被剪裁*/

8. }

9.  

10. #preview{

11. position: absolute;

12. }

1. <!DOCTYPE html>

2. <html lang = "en">

3. <head>

4. <meta charset = "utf-8"/>

5. <title>Web Design</title>

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

7. </head>

8. <body>

9. <h1>Web Design</h1>

10. <p>There are the things you shoule know.</p>

11. <ol id="linklist">

12. <li>

13. <a href="image/btn_acomlete_1.png">Firework</a>

14. </li>

15. <li>

16. <a href="image/btn_acomlete_2.png">tea</a>

17. </li>

18. <li>

19. <a href="image/btn_allcomlete_1.png">Rose</a>

20. </li>

21. <!-- 首先把这张图放在一个容器元素 -->

22. </ol>

23.  

24. <script src = "example.js">

25. </script>

26. </body>

27. </html>

本文地址：https://blog.csdn.net/weixin_45147894/article/details/109237522