Code tạo quảng cáo nổi giữa trang

Các bạn muốn đặt một quảng cáo tạo chú ý cho thành viên. Có rất nhiều code giúp các bạn thực hiện việc này. Hôm nay mình xin chia sẻ với các bạn code tạo một quảng cáo giữa trang như thế.



Demo:

Để làm được việc này các bạn chèn đoạn code sau vào vị trí muốn hiển thị (nếu muốn hiển thị tất cả các trang các bạn có thể chèn vào footer)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>



<style type=”text/css”>

#floating

{

z-index: 450;

position: absolute;

width: 490px;

height: 368px;

}

#overPage

{

background: black;

z-index: 350;

position: absolute;

left: 0;

top: 0;

}

</style>



<!–Begin Adv Popup–>

<div id=”ctl00_ContentPlaceHolder1_Adv_Popup_pnAdv”>

<div id=”overPage”>

</div>

<div id=”floating”>

<img src=”link ảnh” width=”490″ height=”360″ usemap=”#offline”

border=”0″ style=”cursor: pointer” /></div>

<map name=”offline”>

<area shape=”rect” coords=”420,0,490,30″ onclick=”javascript:closeMe();” alt=”Close”

style=”cursor: pointer” />

<area shape=”rect” coords=”0,30,490,330″ href=”Url site click vào ảnh ” target=”_blank” onclick=”javascript:closeMe();” style=”cursor: pointer” />

</map>



<script language=”javascript” type=”text/javascript”>

var lastScroll;

var delay = 30;

var speed = 500;

var img_w = 490;

var img_h = 360;

function centerIt() {

$(“#overPage”).css(“width”, $(window).width());

$(“#overPage”).css(“height”, $(document).height());

$(“#floating”).css(“left”, $(window).width() / 2 – img_w / 2);

$(“#floating”).css(“top”, $(window).height() / 2 – img_h / 2 + $(document).scrollTop());

}

$(document).ready(function() {

$(“#overPage”).css(“opacity”, 0.7);

$(“#overPage,#floating”).show();

centerIt();

});

$(window).scroll(function() {

setTimeout(function() { ani(); }, delay);

lastScroll = new Date().getTime();

});

$(window).resize(function() {

centerIt();

});

function ani() {

if ((new Date().getTime() – lastScroll) >= (delay – 20)) {

$(“#floating”).animate({ top: ($(window).height() / 2 – img_h / 2 + $(document).scrollTop()) }, speed);

}

}

function closeMe() {

$(“#overPage,#floating”).hide();

}

</script>



</div>

<!–End Adv Popup–>

Các bạn thay link ảnh và link site cho phù hợp nhá

Vậy là xong. Bây giờ các bạn có thể ra ngoài trang chủ xem thành quả của mình rồi !