 | Các bạn chắc đã quen thuộc với việc 1 trang web có 2 vùng quảng cáo chạy dọc biên. Hiện tại trên mạng có khá nhiều code giải quyết bài toán này, nhưng thường khá là phức tạp, rườm rà. Mấy hôm trước có 1 người bạn nhờ mình viết, tiện thể post lên để anh em tham khảo và áp dụng. |
Code của mình có thể còn dài dòng hơn, nhưng có ưu điểm là dùng rất dễ và có thể áp dụng cho rất nhiều trường hợp.
<?<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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: 2000px;height: 2000px;">
<div id="a" class="float">a</div>
<div id="b" class="float">b</div>
<div id="c" class="float">c</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("b", {bottom: 20, right: 30});
setPosition("c", {top: 20, left: 30});
</script>
</body>
</html>
?>
Muốn đặt một vùng quảng cáo ở vị trí nào bạn chỉ cần gọi hàm setPosition và truyền vào cho nó id của vùng quảng cáo và vị trí mà bạn muốn nó xuất hiện như sau:
Vd:
setPosition("ad", {top: 20, left: 100});
hàm này chỉ hỗ trợ 4 loại định vị là top, left, right, bottom
khi sử dụng tùy ý thiết lập.
Code của mình có thể còn dài dòng hơn, nhưng có ưu điểm là dùng rất dễ và có thể áp dụng cho rất nhiều trường hợp.
<? <html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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: 2000px;height: 2000px;">
<div id="a" class="float">a</div>
<div id="b" class="float">b</div>
<div id="c" class="float">c</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("b", {bottom: 20, right: 30});
setPosition("c", {top: 20, left: 30});
</script>
</body>
</html>
?>
Muốn đặt một vùng quảng cáo ở vị trí nào bạn chỉ cần gọi hàm setPosition và truyền vào cho nó id của vùng quảng cáo và vị trí mà bạn muốn nó xuất hiện như sau:
Vd:
setPosition("ad", {top: 20, left: 100});
hàm này chỉ hỗ trợ 4 loại định vị là top, left, right, bottom
khi sử dụng tùy ý thiết lập.
Từ Khóa: 
0 nhận xét:
Đăng nhận xét