Thứ Hai, 20 tháng 10, 2014

[js] Quảng cáo trượt 2 bên



 Quảng cáo trượt 2 bên
[js] Quảng cáo trượt 2 bên có rất nhiều kiểu viết. Code tôi giới thiệu ở đây, là đoạn javascript thuần, viết gọn, dễ chỉnh ổn nhất. Tùy bạn trình bày như đoạn 1 hoặc đoạn 2 đều như nhau:
  <style>
  #divAdRight,#divAdLeft {DISPLAY: none; POSITION: absolute; TOP: 0px;}
    #divAdRight img,#divAdLeft img{width:100px;}
  </style>
<div id="divAdRight">
    <a href="#">
        <img src="***.png"/>
    </a>
</div>
<div id="divAdLeft">
    <a href="#">
        <img src="***.png"/>
    </a>
</div>
<script>
    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("divAdRight");
        //stayTopLeft();
        ftlObj2 = m2("divAdLeft");
        stayTopLeft();
    }
    function ShowAdDiv() {
        var objAdDivRight = document.getElementById("divAdRight");
        var objAdDivLeft = document.getElementById("divAdLeft");
        if (document.body.clientWidth < 1000) {
            objAdDivRight.style.display = "none";
            objAdDivLeft.style.display = "none";
        }
        else {
            objAdDivRight.style.display = "block";
            objAdDivLeft.style.display = "block";
            FloatTopDiv();
        }
    }
</script>
<script>
    MainContentW = 1000;
    LeftBannerW = 125;
    RightBannerW = 125;
    LeftAdjust = 5;
    RightAdjust = 5;
    TopAdjust = 10;
    ShowAdDiv();
    window.onresize = ShowAdDiv;
</script>

Hoặc
  <style>
  #divAdRight,#divAdLeft {DISPLAY: none; POSITION: absolute; TOP: 0px;}
    #divAdRight img,#divAdLeft img{width:100px;}
  </style>
<div id="divAdRight">
    <a href="#">
        <img src="***.png"/>
    </a>
</div>
<div id="divAdLeft">
    <a href="#">
        <img src="***.png"/>
    </a>
</div>
<script src="//bendoi.googlecode.com/svn/trunk/js2/ads-truot-2ben.js"> </script>
<script>
    MainContentW = 1000;
    LeftBannerW = 125;
    RightBannerW = 125;
    LeftAdjust = 5;
    RightAdjust = 5;
    TopAdjust = 10;
    ShowAdDiv();
    window.onresize = ShowAdDiv;
</script>

Nếu website bạn đang có JS framework thì tốt nhất kiếm cái plugin cho tiện ích đó thay vì dùng dài dòng thế này.
aaa
2-party advertising slide,Quảng cáo trượt 2 bên

Chủ đề: