Cataloged Autobiography BERKENAAN SAYA  Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca.. | The Readable Journal MENEROKA ARTIKEL  Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini | Astrolab Tool KATEGORI ARTIKEL  Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini |
 BINA NEWS TICKER DENGAN JQUERY CONTOH 2 |
| May 26, 2011 Posted by: Fauzie |
Ini ialah tutorial lanjutan bagaimana membina sebuah newsticker. Seperti yang telah dibincangkan pada contoh pertama, contoh kedua ini juga menggunakan javaScript bagi membolehkan ia berfungsi dengan sempurna.
Sedikit kelainan terdapat pada contoh ke dua ini--ia tidak menggunakan image atau gambar.
Pada dasarnya semua kod yang digunakan adalah sama seperti kod-kod yang terdapat dalam contoh pertama. Pengubahsuaian pada kod bagi contoh kedua ini hanya dibuat untuk mendapatkan efek yang dikehendaki dan juga untuk memastikan kod javaScriptnya tidak "mengganggu" kod javaScript bagi contoh pertama.
Untuk melihat contoh kedua newsticker ini, sila klik di sini. Dan untuk mencubanya sila copy & paste kod-kod di bawah ini.
Kod-kod CSS, HTML dan javaScript untuk contoh ini
<html>
<head>
<style type='text/css'>
#ticker-demo {
width:220px;
background:#EAF4F5;
padding:5px 5px 0;
font-family:Verdana,Arial,Sans-Serif;
font-size:12px;
margin:20px auto auto 50px;
}
#ticker-demo a {
text-decoration:none;
}
#ticker-demo img {
border: 2px solid #FFFFFF;
}
#ticker-demo .title {
text-align:center;
font-size:14px;
font-weight:bold;
padding:5px;
}
.ticker-jcarousellite {
width:250px;
}
.ticker-jcarousellite ul li{
list-style:none; display:block; padding-bottom:1px; margin-bottom:5px;
}
.ticker-jcarousellite .Exm {
float:left; width:200px;
padding-left:20px;
height:70px;
border-bottom:1px solid #ccc;
}
.ticker-jcarousellite .Exm span.cat {
display: block; font-size:10px; color:#808080;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div id="ticker-demo">
<div class="title">Latest News</div>
<div class="ticker-jcarousellite">
<ul>
<li>
<div class="Exm">
<a href="#">Money Matters</a>
<span class="cat"> Americans waste an estimated 14% to 40% of the food produced for their consumption. It happens in fields, stores and kitchen. </span>
</div>
<div class="clear">
</div>
</li>
<li>
<div class="Exm">
<a href="#">Sports</a>
<span class="cat">Tampa Bay went on the road and dropped Boston 5-2 in Game 1 of the Eastern Conference finals. </span>
</div>
<div class="clear">
</div>
</li>
<li>
<div class="Exm"><a href="#">Travel</a>
<span class="cat">Norwegian Cruise Line is pulling the Norwegian Jade from the Eastern Mediterranean. </span>
</div>
<div class="clear">
</div>
</li>
<li>
<div class="Exm">
<a href="#">Your Life</a><span class="cat">The FDA is considering adding dosing instructions for kids under 2 to Children's Tylenol and similar products. </span>
</div>
<div class="clear">
</div>
</li>
<li>
<div class="Exm">
<a href="#">Technology</a>
<span class="cat"> Sony is taking the first steps to making its PlayStation Network operational.</span>
</div>
<div class="clear">
</div>
</li>
<li>
<div class="Exm">
<a href="#">Opinion</a><span class="cat">Is the company the evil killer of mom-and-pops or the brave stalwart against big bad banks. </span>
</div>
<div class="clear">
</div>
</li>
</ul>
</div>
</div>
<script src='http://sites.google.com/site/bloggermint/jquery-latest.pack.js' type='text/javascript'/>
<script src='http://sites.google.com/site/bloggermint/jcarousellite_1.0.1c4.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$(".ticker-jcarousellite").jCarouselLite({
vertical: true,
visible: 4,
auto:500,
speed:1500
});
});
</script>
</body>
</html>
<head>
<style type='text/css'>
#ticker-demo {
width:220px;
background:#EAF4F5;
padding:5px 5px 0;
font-family:Verdana,Arial,Sans-Serif;
font-size:12px;
margin:20px auto auto 50px;
}
#ticker-demo a {
text-decoration:none;
}
#ticker-demo img {
border: 2px solid #FFFFFF;
}
#ticker-demo .title {
text-align:center;
font-size:14px;
font-weight:bold;
padding:5px;
}
.ticker-jcarousellite {
width:250px;
}
.ticker-jcarousellite ul li{
list-style:none; display:block; padding-bottom:1px; margin-bottom:5px;
}
.ticker-jcarousellite .Exm {
float:left; width:200px;
padding-left:20px;
height:70px;
border-bottom:1px solid #ccc;
}
.ticker-jcarousellite .Exm span.cat {
display: block; font-size:10px; color:#808080;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div id="ticker-demo">
<div class="title">Latest News</div>
<div class="ticker-jcarousellite">
<ul>
<li>
<div class="Exm">
<a href="#">Money Matters</a>
<span class="cat"> Americans waste an estimated 14% to 40% of the food produced for their consumption. It happens in fields, stores and kitchen. </span>
</div>
<div class="clear">
</div>
</li>
<li>
<div class="Exm">
<a href="#">Sports</a>
<span class="cat">Tampa Bay went on the road and dropped Boston 5-2 in Game 1 of the Eastern Conference finals. </span>
</div>
<div class="clear">
</div>
</li>
<li>
<div class="Exm"><a href="#">Travel</a>
<span class="cat">Norwegian Cruise Line is pulling the Norwegian Jade from the Eastern Mediterranean. </span>
</div>
<div class="clear">
</div>
</li>
<li>
<div class="Exm">
<a href="#">Your Life</a><span class="cat">The FDA is considering adding dosing instructions for kids under 2 to Children's Tylenol and similar products. </span>
</div>
<div class="clear">
</div>
</li>
<li>
<div class="Exm">
<a href="#">Technology</a>
<span class="cat"> Sony is taking the first steps to making its PlayStation Network operational.</span>
</div>
<div class="clear">
</div>
</li>
<li>
<div class="Exm">
<a href="#">Opinion</a><span class="cat">Is the company the evil killer of mom-and-pops or the brave stalwart against big bad banks. </span>
</div>
<div class="clear">
</div>
</li>
</ul>
</div>
</div>
<script src='http://sites.google.com/site/bloggermint/jquery-latest.pack.js' type='text/javascript'/>
<script src='http://sites.google.com/site/bloggermint/jcarousellite_1.0.1c4.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$(".ticker-jcarousellite").jCarouselLite({
vertical: true,
visible: 4,
auto:500,
speed:1500
});
});
</script>
</body>
</html>
Kembali kepada | Archives →
Sebarang komen dan pertanyaan, sila klik butang di bawah ini:
Anda mungkin juga meminati artikel ini
