حالت موضوعی | حالت خطی

crafcrab

سلام
میخواستم یه نوار اخبار بالای سایتم بزارم با php و jquery بدون استفاده از Marquee میخوام در هر لحظه فقط یک خبر نمایش داده بشه شیوه نمایش هم به این صورت هست که هر یک ثانیه 1 حرف 1حرف نمایش میده
مثل سایت زیر :
http://www.jquerynewsticker.com
مشکل سایت بالا پیچیدگی زیادشه و هم این که خبر های من فارسی هست و باید راست به چپ باشه

مثل این میخوام بسازم:
http://my.mihanwebhost.com
قسمت آیا میدانید بالا راست صفحه را ببینید

زمانی که اومدم کد نویسی کنم چند تا سوال برخوردم :

1- زمانی که در php خبرها رو از DB میگیرم همه رو یکجا echo کنم ؟
2- با jquery چطوری حروف رو تیکه تیکه نشون بدم ؟
3- اگه در php خبر ها رو یکجا بفرستم برای jquery (تا تعداد درخواست ها به سرور کم باشه فقط یک بار) چطوری باید یک خبر نمایش بدم وقتی برای چند ثانیه delay کرد تا کاربر بتونه کل خبر بخونه بره خبر بعدی رو نمایش بده

**lord_viper**

1.شما میتونین هر خبر رو بزارین داخل یک تگ p بعد اینها رو درون یک div قرار بدین با display:none که نمایش داده نشه
2.با استفاده از یک timer و دستور Animateوtext-align در css میتونین این کارو انجام بدین
3.p اولی رو کلاس بدین به اسم current موقع شروع p که کلاس curent داره رو نمایش میدی بعد با تابع

کد: 
next('p')

تگ p بعدی رو نمایش میدین.در هر بار چک میکنین که اگه به اخرین p رسیدین دوباره current رو ببرین به p اولی

crafcrab

تشکر
با توجه به حف های شما تا اینجا کد زدم ببینید درسته ؟ (قسمت php حف کردم تا به نتیجه برسم ، هنوز Animaiton هم نزدم تا نمایش خبر ها پشت هم ببینم درسته نمایش میده یا نه)

css:

کد: 
div.news{

background-color:blue;

display:none;

}

p{

text-align:right;

}

HTML:

کد: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<link href="css/styles.css" rel="stylesheet" type="text/css" media="all">

<html xmlns="http://www.w3.org/1999/xhtml" lang="fa" xml:lang="fa">

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <script language="javascirpt" type="text/javascirpt" src="jquery-1.9.1.js"></script>

  <script type="text/javascirpt">

$(document).ready(function(){

    $(".curent").ready(function(){

        setTimeout($(".curent").next("p"),3000);

    });

});

</script>

</head>

<body>  

<div class="news">

    <p class="curent">سر خط خبر ها</p>

    <p>خبر 1</p>

    <p>خبر 2</p>

    <p>خبر 3</p>

</div>

</body>

</html>

crafcrab

این رو ببینید یه کد زدم مثالی برای نمایش تکه ای اما زایده نمایش میده :

http://jsfiddle.net/crab/AmqKc/

مثل
http://my.mihanwebhost.com
نمایش نمیده

**lord_viper**

زایده؟
اگه منظورتون زمانشه که اون 3000 تا رو بکنین 1500 تا سرعتش بره بالا

به این کدها typer میگن جستجو کنید کدهای زیادی رو نت هست

crafcrab

همین دنبال اسمش بودم
typer

crafcrab

من یه کد پیدا کردم خیلی خوبه

ببینید :

http://jsfiddle.net/stevenchu/ezEtK

من بجا قسمت html آن متن زیر رو رو زدم برای فارسی :

کد php: 
<ol id="sample" class="ticker">
    <li> من چقدر دلم می خواهد همه داستانهای پروانه ها را بدانم که بی نهایت بار</li>
    <li>متن های عاشقانه،متن های احساسي</li>
    <li>در ذهن کوچک و رنگارنگشان می رقصاند به گلها نزدیک می شوند</li>
</ol> 

تو قسمت css کد زیر رو اضافه کردم ( text-align)

کد php: 
.ticker {
    margin:0;
    padding:5px;
    list-style-type:none;
    background:#F7F7D0;
    border:1px solid #ccc;
    text-align:right; 
} 

اگه توجه کرده باشین وقتی text-align:right کردم اون علامت _ دیگه راست به چپ نمیاد چه کنم ?

**lord_viper**

کدتو بزن تو jsfidle لینک بده تست کنم

crafcrab

http://jsfiddle.net/crab/Zj3S3

**lord_viper**

خب کدت درست شد
تو کد jQueryt به جای

کد: 
text+=opts.cursor+' '

میشه

کد: 
text= opts.cursor+text+' ';

کد: 
http://jsfiddle.net/Zj3S3/1/

حالت موضوعی \| حالت خطی نوار اخبار - jquery horizontal ticker
نویسنده	پیام