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[r]
(1)Code tạo ảnh trượt bên trang web, blog
Hôm ĐTN BLOG xin gửi đến quý thầy cô đoạn code tạo ảnh trượt bên trang web, blog trang Các bạn sửa theo hướng dẫn copy vào khối khối chức Ảnh
hiển thị tốt trình duyệt Firefox 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 bạn muốn dẫn đến bấm chuột vào ảnh phải "><img src=' Link ảnh hiển thị bên phải '></div> <div id="c" class="float"><a href=" Link địa bạn muốn dẫn đến khi bấm chuột vào ảnhtrái"><img src=' Link ảnh hiển thị bên
(2)<script type="text/javascript">
function setPosition(id, position) {
var store = { ram : { top : 0, left : 0, right : 0, bottom : },
rom : { top : null, left : null, right : null, bottom : null }
};
for (var i in position) {store.rom[i] = position[i];}
var element = document.getElementById(id);
(3)
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) {
(4)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>