Haber Bandı (Ticker) Uygulaması
Bu uygulamanın PHP/MYSQL Uygulamasını ulaşmak için burayı tıklayın.
Haber bandımız için, jquery.li-scroller.1.0.js jquery eklentisini kullanacağız. Eklentiyi yüklemek için burayı tıklayın .
index.html veya index.php oluşturun ve aşağıdaki kodları, bu dosyanın <body> etiketinin tam üstüne kopyalayın. Editör olarak Notepad++ kullanabilirsiniz.<link rel="stylesheet" type="text/css" href="css/stil.css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.li-scroller.1.0.js"></script>stil.css dosyası oluşturun ve aşağıdaki CSS kodunu, bu dosyanın içine kopyalayın.
#haber-ticker {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
overflow: hidden;
}
.title {
position: absolute;
font-family: 'Verdana', sans-serif;
color:#fff;
z-index: 2;
top: 2px;
left: 5px;
}
.tickercontainer {
background-color: #4285F4;
width: 100%;
height: 27px;
margin: 0;
padding: 0;
overflow: hidden;
}
.tickercontainer:after {
content: "";
width: 100%;
height: 1px;
margin-left: 0px;
display: block;
position: absolute;
left: 0;
z-index: -1;
-webkit-box-shadow: 0px 0px 5px 1px #000000;
-moz-box-shadow: 0px 0px 5px 1px #000000;
box-shadow: 0px 0px 5px 1px #000000;
}
.tickercontainer .mask {
position: relative;
left: 35px;
top: 3px;
width: 100%;
overflow: hidden;
}
ul.newsticker {
position: relative;
left: 980px;
font: bold 12px Verdana;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.newsticker li {
float: left;
margin: 0;
padding: 0;
}
ul.newsticker li span {
color: #fff;
}
ul.newsticker a {
white-space: nowrap;
padding: 0;
color: #fff;
font-size: 12px;
font-weight: bold;
margin: 0 50px 0 0;
}
ul.newsticker span {
margin: 0 12px 0 0;
}
Oluşturmuş oldugunuz index.php/html sayfasında </body> etiketinin tam üstüne aşağıdaki scripti kopyalayın.
<script>
$(function(){
$("ul#js-news").liScroll({travelocity: 0.09});
$("ul#js-newsbottom").liScroll({travelocity: 0.06});
});
</script>
Son olarak, haber bandımızın içine bazı değerler girelim. <body> etiketinin tam altına aşağıdaki html kodunu kopyalayın.
<div id="haber-ticker"> <span class="title">HABER: </span>
<div class="tickercontainer">
<div class="mask">
<ul id="js-news" class="js-hidden">
<li><span>21:26</span><a href="javascript:void(0);">Kayseri'de "ramazan sokağı" açıldı</a></li>
<li><span>21:25</span><a href="javascript:void(0);">Habur Sınır Kapısı'ndaki operasyon</a></li>
<li><span>21:22</span><a href="javascript:void(0);">9. Cumhurbaşkanı Demirel'in vefatı</a></li>
<li><span>21:09</span><a href="javascript:void(0);">Zonguldak’ta bıçaklı kavga: 1 ölü</a></li>
<li><span>21:08</span><a href="javascript:void(0);">Manisa'daki trafik kazası</a></li>
<li><span>21:04</span><a href="javascript:void(0);">Karşıyaka'da Cüneyt Dumlupınar dönemi</a></li>
<li><span>21:03</span><a href="javascript:void(0);">Davutoğlu canlı yayında soruları yanıtlıyor!</a></li>
<li><span>21:03</span><a href="javascript:void(0);">Cizre'de silahlı saldırı: 2 yaralı</a></li>
<li><span>20:59</span><a href="javascript:void(0);">Kayseri'nin 2. vakıf üniversitesi ilk mezunlarını verdi</a></li>
<li><span>20:56</span><a href="javascript:void(0);">Mursi hakkındaki idam kararına tepkiler</a></li>
<li><span>20:54</span><a href="javascript:void(0);">Kocaeli'nde konteyner yüklü tırın devrilmesi</a></li>
<li><span>20:50</span><a href="javascript:void(0);">Pınar Karşıyaka'dan Anadolu Efes'e cevap</a></li>
</ul>
</div>
</div>
</div>
Haber bandımız böylece tamamlanmış oldu.
