jquery drop down banner


Flash banners are good for attracting attention and being extensively used in advertising field. Most of these are either from Google or from other ad marketing companies. For getting these codes, we have to depend on the third party plugins which is not at all good. Here, I have prepared the code which will be better to put in your blog/website without any plugin.
View the auto demo - ADB12 ( Also view the banner list here)

Each line appears in delay animation (3 Sec).
After all lines, pause for some period(3 Sec).
Auto refresh the banner(5 sec).
Simple and easy for use(Jquery1.9.1).
No need to download the Jquery(Google libraries)

CSS CODE (in header):
.banner { border:#bbd9ef solid 1px; background:#f5fffa; padding: 5px 0 0 20px; width: 250px; height: 135px; } .k, .l, .m, .n { position: relative; top: -40px; text-decoration: none; } .n { font-weight: bold; color: red; } .banner a { text-decoration: none; }
SCRIPT CODE (in header):
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $(".banner a").hide(); function banner(){ $(".k").show().animate({ top: "2" }, 3000, function () { $(".l").show().animate({ top: "2" }, 3000, function () { $(".m").show().animate({ top: "2" }, 3000, function () { $(".n").show().animate({ top: "2" }, 3000, function(){ setTimeout(function(){ $(".banner a").hide().css('top', ''); banner(); }, 5000); }); }); }); }); } banner(); }); </script>
HTML CODE (in body):
<div class="banner"> <a href="#" class="k">Design Banner in your own way</a><br /> <a href="#" class="l"> Get more traffic and publishers.</a><br/> <a href="#" class="m">Still doubt, please do contact:</a><br/><br/> <a href="#" class="n">www.freemenu.info</a> </div>

No comments:

Click Here To add Comment

Post a Comment