1. Trang chủ
  2. » Giáo án - Bài giảng

tạo ảnh trượt 2 bên trang web

4 371 1
Tài liệu đã được kiểm tra trùng lặp

Đang tải... (xem toàn văn)

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Định dạng
Số trang 4
Dung lượng 67 KB

Nội dung

Code tạo ảnh trượt 2 bên trang web, blog Hôm nay ĐTN BLOG xin gửi đến quý thầy cô đoạn code tạo ảnh trượt 2 bên trang web, blog như của trang này. Các bạn sửa theo hướng dẫn rồi copy vào khối chính hoặc khối chức năng đều được. Ảnh hiển thị tốt hơn ở trình duyệt Firefox và Google Chrome <html> <head> <title>uoon demo Set Position</title> <style type="text/css"> .float { width: 115px; height: 200px; border: solid 1px blue; } </style> </head> <body> <div style="width: 0px;height: 0px;"> <div id="a" class="float"><a href=" Link địa chỉ bạn muốn dẫn đến khi bấm chuột vào ảnh phải "><img src=' Link của ảnh sẽ hiển thị bên phải '></div> <div id="c" class="float"><a href=" Link địa chỉ bạn muốn dẫn đến khi bấm chuột vào ảnh trái"><img src=' Link của ảnh sẽ hiển thị bên trái '></div> </div> </body> <script type="text/javascript"> function setPosition(id, position) { var store = { ram : { top : 0, left : 0, right : 0, bottom : 0 }, rom : { top : null, left : null, right : null, bottom : null } }; for (var i in position) {store.rom[i] = position[i];} var element = document.getElementById(id); for (i in store) {element[i] = store[i];} element.rom.move = function() { if (window.innerHeight) { var topPage = window.pageYOffset; var leftPage = window.pageXOffset; var rightPage = leftPage + window.innerWidth - element.offsetWidth; var bottomPage = topPage + window.innerHeight - element.offsetHeight; } else { var topPage = document.body.scrollTop; var leftPage = document.body.scrollLeft; var rightPage = leftPage + document.body.clientWidth - element.offsetWidth; var bottomPage = topPage + document.body.clientHeight - element.offsetHeight; } element.style.position = "absolute"; if (element.rom.top != null) { element.ram.top += Math.round((topPage + element.rom.top - element.ram.top)/20); element.style.top = element.ram.top; } if (element.rom.left != null) { element.ram.left += Math.round((leftPage + element.rom.left - element.ram.left)/20); element.style.left = element.ram.left; } if (element.rom.right != null) { element.ram.right += Math.round((rightPage - element.rom.right - element.ram.right)/20); element.style.left = element.ram.right; } if (element.rom.bottom != null) { element.ram.bottom += Math.round((bottomPage - element.rom.bottom - element.ram.bottom)/20); element.style.top = element.ram.bottom; } setTimeout("document.getElementById('"+element.id+"').rom.move()",10); }; element.rom.move(); } setPosition("a", {top: 20, right: 30}); setPosition("c", {top: 20, left: 30}); </script> </body> </html> Chúc thành công! . Code tạo ảnh trượt 2 bên trang web, blog Hôm nay ĐTN BLOG xin gửi đến quý thầy cô đoạn code tạo ảnh trượt 2 bên trang web, blog như của trang này Link địa chỉ bạn muốn dẫn đến khi bấm chuột vào ảnh phải "><img src=' Link của ảnh sẽ hiển thị bên phải '></div> <div id="c"

Ngày đăng: 29/10/2013, 10:11

TỪ KHÓA LIÊN QUAN

w