Tác giả Chủ đề: Tạo banner quảng cáo 2 bên của website  (Đọc 2427 lần)

0 Thành viên và 1 Khách đang xem chủ đề.

Offline ddnbgroup

  • Trung úy
  • ***
  • Điểm yêu thích +5/-0
  • Diễn đàn Nhật Bản
    • DDNBGROUP
  • Paypal Account: ddnbgroup@yahoo.co.jp
Tạo banner quảng cáo 2 bên của website
« vào lúc: Thứ sáu, 18/12/2015, 06:20:02 am »
Bottom
Code: Bạn không thể xem liên kết này. Đăng ký hoặc Đăng nhập
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;}
body{
    font-family: 'Open Sans', sans-serif;
    color:#444;
    text-shadow: 0 1px 0 #FFFFFF;
}
#wrapper{
    max-width: 800px;
    margin: 20px auto;
    height: 4000px;
    background: #3BB0D6;
    padding:20px;
    color:#fff;
}
h2{
    text-align: center;
    color:#fff;
    padding: 20px;
}
h2 a{
    text-decoration: none;
    color:#fff;
    text-shadow: 0 1px 2px #fff,0 1px 2px #000;
}
h2 a:hover{
    text-decoration: underline;
}
p { margin:20px 0; font-weight:300;}
/* main code*/
.banner{
position: absolute;
width: 120px;
height: 300px;
background:url(ads.gif);
bottom: 20px;
}
#banner_l{
left: 5px;
}
#banner_r{
right: 5px;
}

.zindex{
z-index: -999;
}

.banner a{
display: block;
width: 100%;
height: 100%;
border:0;
text-indent: -9999px
}
</style>
<script type="text/javascript">
$(function(){
var $banner = $('.banner'), $window = $(window);
var $topDefault = parseFloat( $banner.css('bottom'), 10 );
$window.on('scroll', function(){
var $top = $(this).scrollTop();
$banner.stop().animate( { bottom: -( $top - $topDefault) }, 1000, 'easeOutBack' );
});

var $wiBanner = $banner.outerWidth() * 2;
zindex($('#wrapper').outerWidth());
$window.on('resize', function(){
zindex($('#wrapper').outerWidth());
});
function zindex(maxWidth){
if( $window.width() <= maxWidth + $wiBanner ) {
$banner.addClass('zindex');
}else{
$banner.removeClass('zindex');
}
}
});
</script>

Top
Code: Bạn không thể xem liên kết này. Đăng ký hoặc Đăng nhập
<!--Begin float left right ads -->
<style>
.banner {
  position: absolute;
  width: 160px;
  height: 600px;
  background: url(ads.gif);
  top:5px;
}
#banner_l { left: 0px; }
#banner_r { right: 0px; }
.zindex { z-index: -999; }

</style>

<script>
jQuery(document).ready(function($) {
  var $banner = $('.banner'), $window = $(window);
  var $topDefault = parseFloat( $banner.css('top'), 10 );
  $window.on('scroll', function() {
    var $top = $(this).scrollTop();
    $banner.stop().animate( { top: $top + $topDefault }, 1000, 'easeOutCirc' );
  });

  var $wiBanner = $banner.outerWidth() * 2;
  function zindex(maxWidth){
    if( $window.width() <= maxWidth + $wiBanner ) {
      $banner.addClass('zindex');
    } else {
      $banner.removeClass('zindex');
    }
  }
});
</script>

<div id="banner_l" class="banner">
  <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <!-- diendannhatban -->
  <ins class="adsbygoogle"
       style="display:block"
       data-ad-client="ca-pub-5785414969778103"
       data-ad-slot="2377917544"
       data-ad-format="auto"></ins>
  <script>
  (adsbygoogle = window.adsbygoogle || []).push({});
  </script>
</div>

<div id="banner_r" class="banner">
  <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <!-- diendannhatban -->
  <ins class="adsbygoogle"
       style="display:block"
       data-ad-client="ca-pub-5785414969778103"
       data-ad-slot="2377917544"
       data-ad-format="auto"></ins>
  <script>
  (adsbygoogle = window.adsbygoogle || []).push({});
  </script>
</div>


Demo:

« Sửa lần cuối: Thứ năm, 12/11/2020, 08:16:42 am gửi bởi admin »