bảng quảng cáo hay một bảng thông tin tự động trượt đến một vị trí được chỉ định
Thỉnh thoảng có lúc bạn muốn có một bảng quảng cáo hay một bảng thông tin tự động trượt đến một vị trí được chỉ định khi visitor scroll trang web lên-xuống. Đây là cách rất tốt để ưu ái quảng cáo của những đối tượng sẵn sàng chí trả nhiều tiền. Cách làm như sau:
Mở file index.php của template bạn đang sử dụng bằng bất kỳ trình soạn thảo văn bản nào và...
1. Ngay trước thẻ </head> thêm đoạn code sau:
Code:
<!-- Floating Object container \-->
<script type="text/javascript">
var isDOM, floaterObj;
var isNS, pageHeight;
var paddingX, paddingY, scrollTop, currentY, targetY, A, B, C, D;
var slideTime;
/*
h - height in pixel of the floating object
x - padding in pixel from the left side of floating object to the left side of browser window
y - padding in pixel from the top side of floating object to the top side of browser window
z - slide time in milisecond
*/
function setUp(h, x, y, z) {
if (document.getElementById) {
isDOM = true;
floaterObj = document.getElementById("floater").style;
} else {
isDOM = false;
floaterObj = document.floater;
}
if (navigator.appName == 'Netscape') {
isNS = true;
} else {
isNS = false;
}
paddingX = x;
paddingY = y;
slideTime = z;
floaterObj.left = paddingX + (isDOM ? 'px' : '');
floaterObj.top = '-' + h + (isDOM ? 'px' : '');
window.onresize = refreshValues;
window.setInterval("placeFloater()", 10);
refreshValues();
}
function refreshValues() {
if (isNS) {
pageHeight = window.innerHeight - 20;
} else {
pageHeight = document.body.clientHeight;
}
placeFloater();
}
function placeFloater() {
if (isNS) {
scrollTop = window.pageYOffset;
} else {
scrollTop = document.body.scrollTop;
}
currentY = parseInt(floaterObj.top);
mainTrigger();
}
function mainTrigger() {
var newTargetY = scrollTop + paddingY;
if ( currentY != newTargetY ) {
if ( newTargetY != targetY ) {
targetY = newTargetY;
floatStart();
}
animator();
}
}
function floatStart() {
var now = new Date();
A = targetY - currentY;
B = Math.PI / ( 2 * slideTime );
C = now.getTime();
if (Math.abs(A) > pageHeight) {
D = A > 0 ? targetY - pageHeight : targetY + pageHeight;
A = A > 0 ? pageHeight : -pageHeight;
} else {
D = currentY;
}
}
function animator() {
var now = new Date();
var newY = A * Math.sin( B * ( now.getTime() - C ) ) + D;
newY = Math.round(newY);
if (( A > 0 && newY > currentY ) || ( A < 0 && newY < currentY )) {
floaterObj.top = newY + (isDOM ? 'px' : '');
}
}
</script>
<!-- Floating Object container /-->
2. Sửa thẻ <body> thành
Code:
<body onload="setUp(60, 15, 15, 1500)">
Function setUp có những thông số lần lượt là
* Chiều cao (đơn vị pixel) của module tự trượt.
* Khoảng cách (đơn vị pixel) từ lề trái của module tự trượt đến lề trái của cửa sổ trình duyệt
* Khoảng cách (đơn vị pixel) từ lề trên của module tự trượt đến lề trên của cửa sổ trình duyệt
* Khoảng thời gian (đơn vị milisecond) để module trượt từ vị trí cũ đến vị trí mới khi visitor scroll lên-xuống trang web.
3. Ngay trước thẻ </body> thêm đoạn code sau:
Code:
<!-- Floating Object container \-->
<div id="floater" name="floater" style="position: absolute; z-index: 1000">
<!-- Banner Module code \-->
<?php if (mosCountModules('banner')) mosLoadModules('banner'); ?>
<!-- Banner Module code /-->
</div>
<!-- Floating Object container /-->
...lưu lại các thay đổi trong file index.php của template rồi đăng nhập vào trang quản trị của Joomla để cấu module hiển thị bảng quảng cáo hoặc bảng thông tin để hiện ở vị trí (position) banner.
Chúc may.
Mở file index.php của template bạn đang sử dụng bằng bất kỳ trình soạn thảo văn bản nào và...
1. Ngay trước thẻ </head> thêm đoạn code sau:
Code:
<!-- Floating Object container \-->
<script type="text/javascript">
var isDOM, floaterObj;
var isNS, pageHeight;
var paddingX, paddingY, scrollTop, currentY, targetY, A, B, C, D;
var slideTime;
/*
h - height in pixel of the floating object
x - padding in pixel from the left side of floating object to the left side of browser window
y - padding in pixel from the top side of floating object to the top side of browser window
z - slide time in milisecond
*/
function setUp(h, x, y, z) {
if (document.getElementById) {
isDOM = true;
floaterObj = document.getElementById("floater").style;
} else {
isDOM = false;
floaterObj = document.floater;
}
if (navigator.appName == 'Netscape') {
isNS = true;
} else {
isNS = false;
}
paddingX = x;
paddingY = y;
slideTime = z;
floaterObj.left = paddingX + (isDOM ? 'px' : '');
floaterObj.top = '-' + h + (isDOM ? 'px' : '');
window.onresize = refreshValues;
window.setInterval("placeFloater()", 10);
refreshValues();
}
function refreshValues() {
if (isNS) {
pageHeight = window.innerHeight - 20;
} else {
pageHeight = document.body.clientHeight;
}
placeFloater();
}
function placeFloater() {
if (isNS) {
scrollTop = window.pageYOffset;
} else {
scrollTop = document.body.scrollTop;
}
currentY = parseInt(floaterObj.top);
mainTrigger();
}
function mainTrigger() {
var newTargetY = scrollTop + paddingY;
if ( currentY != newTargetY ) {
if ( newTargetY != targetY ) {
targetY = newTargetY;
floatStart();
}
animator();
}
}
function floatStart() {
var now = new Date();
A = targetY - currentY;
B = Math.PI / ( 2 * slideTime );
C = now.getTime();
if (Math.abs(A) > pageHeight) {
D = A > 0 ? targetY - pageHeight : targetY + pageHeight;
A = A > 0 ? pageHeight : -pageHeight;
} else {
D = currentY;
}
}
function animator() {
var now = new Date();
var newY = A * Math.sin( B * ( now.getTime() - C ) ) + D;
newY = Math.round(newY);
if (( A > 0 && newY > currentY ) || ( A < 0 && newY < currentY )) {
floaterObj.top = newY + (isDOM ? 'px' : '');
}
}
</script>
<!-- Floating Object container /-->
2. Sửa thẻ <body> thành
Code:
<body onload="setUp(60, 15, 15, 1500)">
Function setUp có những thông số lần lượt là
* Chiều cao (đơn vị pixel) của module tự trượt.
* Khoảng cách (đơn vị pixel) từ lề trái của module tự trượt đến lề trái của cửa sổ trình duyệt
* Khoảng cách (đơn vị pixel) từ lề trên của module tự trượt đến lề trên của cửa sổ trình duyệt
* Khoảng thời gian (đơn vị milisecond) để module trượt từ vị trí cũ đến vị trí mới khi visitor scroll lên-xuống trang web.
3. Ngay trước thẻ </body> thêm đoạn code sau:
Code:
<!-- Floating Object container \-->
<div id="floater" name="floater" style="position: absolute; z-index: 1000">
<!-- Banner Module code \-->
<?php if (mosCountModules('banner')) mosLoadModules('banner'); ?>
<!-- Banner Module code /-->
</div>
<!-- Floating Object container /-->
...lưu lại các thay đổi trong file index.php của template rồi đăng nhập vào trang quản trị của Joomla để cấu module hiển thị bảng quảng cáo hoặc bảng thông tin để hiện ở vị trí (position) banner.
Chúc may.
Nhận xét
Đăng nhận xét