Tất cả bài viết  |  Lập trình Jquery

  • zoom in
  • zoom out
  • text align left
  • text align center
  • text align right
  • Chỉnh màu chữ
  • Làm đậm

Tạo banner quảng cáo chạy dọc 2 bên website

Hướng dẫn tạo banner quảng chạy dọc 2 bên website bằng JQUERY

Bạn làm theo các bước sau đây:

+ Bước 1: Trong website tạo thư mục js

+ Bước 2: Trong thư mục js tạo tập tin ví dụ tên BannerFloat.js có nội dung như sau:

$(document).ready(function(){
var bFLeft = $("#divBannerFloatLeft");

var bFRight = $("#divBannerFloatRight");

var left_Positiion = 0;

var right_Positiion = 0;

var window_Width = $(window).width();
var document_Width = 1020;

if (window_Width < document_Width && jQuery(window).width() < 1280){
bFLeft.hide();
bFRight.hide();
} 

else{

//Calculate right position for left banner

right_Positiion = (window_Width - document_Width)/2 + document_Width;

left_Positiion = (window_Width - document_Width)/2 + document_Width;
bFLeft.attr("style", "float: left; position: fixed; top: 165px; right: " + right_Positiion + "px;");
bFRight.attr("style", "float: right; position: fixed; top: 165px; left: " + left_Positiion + "px;");

  
 bFLeft.append("
 
"); bFRight.append("
"); } } );

+ Bước 3: Tạo thư mục css trong website, trong thư mục này tạo tập tin ads.css có nội dung như sau:

 #divAdLeft{width: 120px; line-height:30px; position: fixed;overflow:hidden; left:0px !important;}
    #divAdRight{width: 120px; line-height:30px; position: fixed;overflow:hidden;right:0px !important;}
    #divAdLeft img,#divAdRight img{ width:120px}

+ Bước 4: Trong trang chủ trước phần kết thúc head bạn hã chèn vào các thẻ như sau

 
 
 

Sau thẻ body chèn đoạn thẻ như sau

 
 

+ Bước 5: Hãy thay đổi đường dẫn tới các hình banner của bạn và địa chỉ liên kết của banner

Ghi chú:

+ Bạn có thể tạo các ảnh động để banner thêm sinh động hay có thể dùng thẻ object để chèn các banner Flash vào.

+ Bạn có thể chỉnh tại toạ độ của banner tại vị trí 165px trong đoạn Jquery cho hợp với layout của website Bạn.

Xem demo ở đây

Download tập tin js và css tại đây

Đăng ký tham gia làm hội viên của kênh để được xem các bài học mới nhất