Flying Top Of Message menggunkan Jquery
Pernah anda mengunjungi sebuah website yang di atasnya atau di tengah terdapat iklan/banner,baik berupa tulisan gambar maupun video,diman apabila kita scroll browser ke bagian bawah ,banner tersebut akan tetap ikut .
Berdasarkan ide tersebut ,kita kan membuat hal yang serupa dengan bantuan Jquery dan Css.untuk itu perhatikan skrip berikut dan perhatiakn teks yang tebal juga.
<html>
<head>
<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// pastikan message/pesan selalu berada di bagian atas browser
$(window).scroll(function(){
$('#message_box').animate({top:$(window).scrollTop()+"px" },{queue: false, duration: 350});
});
// ketika tombol silang di klik
$('#close_message').click(function(){
$('#message_box').animate({ top:"+=15px",opacity:0 }, "slow");
});
});
</script>
<style type="text/css">
#message_box
{
position: absolute;
top: 0;
left: 0;
z-index: 10;
padding:5px;
border:1px solid #CCCCCC;
text-align:center;
font-weight:bold;
width:99%;
background-color: #000000;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
</style>
</head>
<body>
<div id="message_box">
<img id="close_message" style="float:right;cursor:pointer" src="silang.png" />
Penyedia jasa web disain profesional, pengembang web , teknologi CSS, jQuery dan PHP<br />
(<a href="http://proweb.co.id" target="_blank">Click</a>)
</div>
<div>
<br /><br />
<h1 align="center">Demo Top of Message</h1>
<p align="center"><img src="elang.jpg"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
scelerisque enim ac sem blandit interdum. Aliquam vel urna augue, nec
posuere ligula. Fusce justo purus, cursus ac ultrices eget, faucibus et
risus. Suspendisse sed nisl et nisi sollicitudin lobortis. Nam ut lorem
tellus, eget vehicula magna. Aenean vestibulum vehicula ligula,
vulputate sodales quam pellentesque in. Nam non metus nulla, et
vestibulum odio. Nam ut nibh at dui posuere tincidunt ut ac mauris.
Aliquam erat volutpat. Duis augue mauris, aliquet sit amet fermentum
non, commodo a dui. Pellentesque in lobortis tellus. Suspendisse vitae
erat at metus viverra porttitor. In consequat laoreet sagittis. Nulla
vulputate placerat erat in vehicula. In mollis metus eu ante aliquet ac
vestibulum magna convallis. Nullam sagittis lacus ut lacus convallis id
tempor ligula hendrerit. Fusce dictum dui non tortor commodo at
sollicitudin sapien rutrum. Cras congue dapibus augue, sed auctor metus
facilisis non. Maecenas tincidunt fringilla arcu, a mattis neque
ullamcorper sit amet. Proin aliquam suscipit nunc, ut varius mauris
tempus at.</p>
</div>
</body>
</html>
silakan download file click
Kunjungi www.prowebpro.com untuk menambah wawasan anda.