tailieunhanh - Practical prototype and scipt.aculo.us part 38

Practical prototype and part 38: The information in this book is distributed on an "as is" basis, without warranty Although every pre-caution has been taken in the preparation of this work, neither the author(s) nor Apress shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the information contained in this work. | CHAPTER 10 INTRODUCTION TO EFFECTS 217 The Basics of Effects Consider an element that s 50 pixels square and absolutely positioned at the top-left corner of the page as in Figure 10-1. CSS box position absolute width 50px height 50px top 0 left 0 background-color 999 border 2px solid 000 font-family Helvetica Neue Helvetica Arial sans-serif text-transform uppercase text-align center line-height 50px font-size 10px -- HTML -- div id box Box div BOX Figure 10-1 . An absolutely positioned div If we want to move it down and to the right we can do so instantaneously var box box left 50px top 50px Here we re changing the element s left and top properties from 0px to 50px. When we set the new style it happens instantaneously the box jumps down to its new place as in Figure 10-2. 218 CHAPTER 10 INTRODUCTION TO EFFECTS Figure 10-2. The div s style has been dynamically altered. But let s try moving the element gradually by increasing the top and left values little by little until we arrive at the desired 50px. Our first attempt might look something like this var box box for var i 1 i 50 i left i px top i px Unfortunately when we run this code we find that it behaves exactly the same way as the first example the box seems to jump to its new coordinates without any steps in the middle. Why Take a moment to think like a computer. It doesn t take that much time to change a CSS property let s say around 1ms. Multiply that by 50 and you ve got 50ms still less than one-tenth of a second. The animation is happening but far too fast for a human to notice. It might even be happening faster than the rendering engine can update. But speed problems are easy to work around. We need to slow things down by pausing after each frame of the animation so that our human eyes and the browser s rendering engine can catch up. Remember that JavaScript has no sleep statement we can t tell the interpreter to halt but we can tell it to do other

• Kỹ thuật lập trình
• Phương pháp lập trình
• lập trình website
• các bước cơ bản khi lập trình
• công thức lập trình web
• thao tác khi lập trình
• Phương pháp lập trình hướng đối tượng
• Lập trình hướng đối tượng
• Bài giảng Lập trình hướng đối tượng
• Bài tập lập trình hướng đối tượng
• Bài giảng Phương pháp lập trình
• Quy tắc chuyển đổi
• Ngôn ngữ lập trình
• Kiểu dữ liệu
• Kỹ thuật lập trình
• Kiểu lập trình
• Lập trình thủ tục
• lập trình căn bản
• lập trình java
• kỹ thuật máy tính
• thủ thuật lập trình
• kinh nghiệm lập trình
• lập trình đối tượng
• tài liệu lập trình
• lập trình mạng máy tính
• chuyên ngành lập trình
• Ngôn ngữ lập trình C
• Học lập trình C
• Lý thuyết lập trình
• Ngôn ngữ lập trình C C++
• Tự học lập trình
• Học lập trình
• Chuỗi ký tự lập trình
• Lập trình C#
• Phương pháp lập trình cổ điển
• Cấu trúc điều khiển
• Biến dối tượng
• Xử lý dữ liệu
• bài tập phương pháp lập trình
• mẹo lập trình
• Lớp và đối tượng
• Lập trình hướng thủ tục
• Chương trình vẽ uml
• code lập trình
• kỹ thuật phần mềm
• chương trình lập trình
• giáo trình lập trình
• bài giảng lập trình C++
• phương pháp lập trình cấu trúc
• phép tham chiếu
• Bài giảng Nguyên lý và phương pháp lập trình
• Nguyên lý và phương pháp lập trình
• Kiểm chứng tính đúng đắn
• Lập trình có cấu trúc
• Tổng quan các ngôn ngữ lập trình