نمایش اخبار و مطالب به صورت منوی ترتیبی آریا تمپ – طراحی سایت,قالب وبلاگ,پوسته وردپرس,قالب وردپرس

نمایش اخبار و مطالب به صورت منوی ترتیبی

کد نمایش اخبار و مطالب سایت و وبلاگ به صورت بالا رونده ترتیبی

گام : ۱ 

ابتدا فایل اصلی را ایجاد می کنیم :

۱
۲
۳
۴
۵
۶
۷
۸
۹
<!DOCTYPE html>
<html>
    <head>
        <title>jQuery Ticker</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js "></script>
    </head>
 <body>
 </body>
</html>

 گام : ۲ 

کدها و نوشته های نمونه را اضافه می کنیم که همان متن و عنوان اخبار و مطالب ما است :

۰۱
۰۲
۰۳
۰۴
۰۵
۰۶
۰۷
۰۸
۰۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
<div class="ticker">
   <h3>Latest News</h3>
   <ul id="ticker">
       <li>Dummy data is benign information that does not contain any useful data, but serves to reserve spac...</li>
       <li>For testing, dummy data can also be used as stubs or pad to avoid software testing iss...</li>
<ul>
    <li>In operational use, dummy data may be transmitted for OPSEC purposes.</li>
</ul>
<ul>
    <li>Dummy data must be rigorously evaluated and documented to ensure that it does no...</li>
</ul>
<ul>
       <li>The topic of this article may not meet Wikipedia's general notability guideline.</li>
</ul>
</div>

 گام : ۳ 

کد جوا اسکریپت  را اضافه می نماییم :

۱
۲
۳
۴
۵
۶
۷
۸
<script type="text/javascript">
function ticker() {
    $('#ticker li:first').slideUp(function() {
        $(this).appendTo($('#ticker')).slideDown();
    });
}
setInterval(ticker, 3000);
</script>

 

گام : ۴ 

برای ظاهر بهتر و زیر هم قرار گرفتن نوشته ها از کد گرافیکی سی اس اس استفاده می کنیم :

۰۱
۰۲
۰۳
۰۴
۰۵
۰۶
۰۷
۰۸
۰۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
<style>
.ticker {
width: 400px;
height: 200px;
overflow: hidden;
border: 1px solid #DDD;
border-radius: 5px;
box-shadow: 0px 0px 5px #DDD;
background-color#F5F3E5;
text-align: left;
}
.ticker h3 {
padding: 0 0 10px 10px;
border-bottom: 1px solid #A7A7A7;
}
ul {
list-style: none;
padding: 0;
margin: 0;
font-style: italic;
}
ul li {
list-style: none;
height:50px;
padding:7px;
border-bottom: 1px solid #D6CFB8;
}
</style>

Moin Uddin

 


برچسبها: ,

درج ديدگاه...


+ هفت = نُه

website stats