Tạo banner trượt hai bên cho website

Hàm này mình hướng dẫn các bạn viết code html, css và jquery để tạo banner chạy dọc 2 bên cho website
  • 13:14 11/10/2016
  • Kỳ Nhân
  • 0 Bình luận
  • 581

Để tạo banner chạy dọc 2 bên website các bạn cần thực hiện các bước sau

File html

<div id="adv-fixed-left"><img alt="" src="duong_dan_file_hinh" /></div>
<div id="adv-fixed-right"><img alt="" src="duong_dan_file_hinh" /></div>

File CSS

#adv-fixed-left,
#adv-fixed-right{
    display:none;
    position:absolute;
    top:0;
}
#adv-fixed-left img,
#adv-fixed-right img{
    width:170px;
}

Ta set width của img theo px để hình ảnh không nhỏ hơn hoặc lớn hơn giới hạn, đễ khi chạy nhìn 2 banner đều nhau cho đẹp

File JS

function ResizeWindows() {
    var Xwidth=$(window).width();
    var Yheight=$(window).height();
    if($('#adv-fixed-left').length && Xwidth>1200) {
        MainContentW = 1000;LeftBannerW = 170;RightBannerW = 170;LeftAdjust = 15;RightAdjust = 15;TopAdjust = 105;
        ShowAdDiv();
    }
}
function FloatTopDiv() {
    startLX = ((document.body.clientWidth -MainContentW)/2)-LeftBannerW-LeftAdjust , startLY = TopAdjust+80;
    startRX = ((document.body.clientWidth -MainContentW)/2)+MainContentW+RightAdjust , startRY = TopAdjust+80;
    var d = document;
    function ml(id) {
        var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
        el.sP=function(x,y){this.style.left=x + 'px';this.style.top=y + 'px';};
        el.x = startRX;
        el.y = startRY;
        return el;
    }
    function m2(id) {
        var e2=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
        e2.sP=function(x,y){this.style.left=x + 'px';this.style.top=y + 'px';};
        e2.x = startLX;
        e2.y = startLY;
        return e2;
    }
    window.stayTopLeft=function() {
        if (document.documentElement && document.documentElement.scrollTop)
            var pY =  document.documentElement.scrollTop;
        else if (document.body)
            var pY =  document.body.scrollTop;
        if (document.body.scrollTop > 30){startLY = 3;startRY = 3;} else {startLY = TopAdjust;startRY = TopAdjust;};
        ftlObj.y += (pY+startRY-ftlObj.y)/16;
        ftlObj.sP(ftlObj.x, ftlObj.y);
        ftlObj2.y += (pY+startLY-ftlObj2.y)/16;
        ftlObj2.sP(ftlObj2.x, ftlObj2.y);
        setTimeout("stayTopLeft()", 1);
    }
    ftlObj = ml("adv-fixed-right");
    //stayTopLeft();
    ftlObj2 = m2("adv-fixed-left");
    stayTopLeft();
}
function ShowAdDiv() {
    var objAdDivRight = document.getElementById("adv-fixed-right");
    var objAdDivLeft = document.getElementById("adv-fixed-left");       
    if (document.body.clientWidth < 1000) {
        objAdDivRight.style.display = "none";
        objAdDivLeft.style.display = "none";
    }
    else {
        objAdDivRight.style.display = "block";
        objAdDivLeft.style.display = "block";
        FloatTopDiv();
    }
}
$(document).ready(function() {
    $(window).on('resize load',function() { ResizeWindows(); });
});

Như file trên ta viết 3 function gồm ResizeWindows(), FloatTopDiv(), ShowAdDiv(). với mục đich kiểm tra theo chiều ngang trình duyệt đễ hiển thị banner. Như code của funtion ResizeWindows() sẽ kiễm tra màn hình > 1200 mới hiển thị banner và khoảng cách ở giửa của 2 banner là 1000px và chiều ngang là 170.

Các bạn có thể thay đổi theo hướng mình cần.