ijquery

نمایش آخرین اخبار به صورت اسکرولی

screenshot

نمایش آخرین اخبار و رویداد ها با افکت جذاب جی کوئری

آموزش استفاده

  1. قبل از تگ <head/>
    <link href="resources/css/global.css" rel="stylesheet" type="text/css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

     

  2. بعد از تگ <body>
    <div id="page">
    
    	<h2>مثال 1 [تنها یک خبر]</h2>
    	<ul id="ticker_01" class="ticker">
    
    		<li>
    		 جی کوئری فوق العاده ساده برای نمایش آخرین فهرست ها, یا در استفاده های دیگر مثل آخرین اخبار .
    		</li>
    		<li>
    		 جی کوئری فوق العاده ساده برای نمایش آخرین فهرست ها, یا در استفاده های دیگر مثل آخرین اخبار .
    		</li>
    		<li>
    		 جی کوئری فوق العاده ساده برای نمایش آخرین فهرست ها, یا در استفاده های دیگر مثل آخرین اخبار .
    		</li>
    		<li>
    		 جی کوئری فوق العاده ساده برای نمایش آخرین فهرست ها, یا در استفاده های دیگر مثل آخرین اخبار .
    		</li>
    	</ul>
    
    	<h2>مثال 2 [3 خبر ]</h2>
    
    	<ul id="ticker_02" class="ticker">
    		<li>
    		 جی کوئری فوق العاده ساده برای نمایش آخرین فهرست ها, یا در استفاده های دیگر مثل آخرین اخبار .
    		</li>
    		<li>
    		 جی کوئری فوق العاده ساده برای نمایش آخرین فهرست ها, یا در استفاده های دیگر مثل آخرین اخبار .
    		</li>
    
    		<li>
    		 جی کوئری فوق العاده ساده برای نمایش آخرین فهرست ها, یا در استفاده های دیگر مثل آخرین اخبار .
    		</li>
    		<li>
    		 جی کوئری فوق العاده ساده برای نمایش آخرین فهرست ها, یا در استفاده های دیگر مثل آخرین اخبار .
    		</li>
    	</ul>
    
    	<h2>مثال 3 [1 خبر به حالت محو شدن]</h2>
    	<ul id="ticker_03" class="ticker">
    		<li>
    		 جی کوئری فوق العاده ساده برای نمایش آخرین فهرست ها, یا در استفاده های دیگر مثل آخرین اخبار .
    		</li>
    		<li>
    		 جی کوئری فوق العاده ساده برای نمایش آخرین فهرست ها, یا در استفاده های دیگر مثل آخرین اخبار .
    		</li>
    		<li>
    		 جی کوئری فوق العاده ساده برای نمایش آخرین فهرست ها, یا در استفاده های دیگر مثل آخرین اخبار .
    		</li>
    		<li>
    		 جی کوئری فوق العاده ساده برای نمایش آخرین فهرست ها, یا در استفاده های دیگر مثل آخرین اخبار .
    		</li>
    	</ul>	
    
    	<span id="example_4">
    
    		<h2>مثال چهار [اطلاعات زنده توییتر]</h2>
    		<ul id="ticker_04" class="ticker">
    		</ul>
    	</span>
    
    </div>
    
    <script>
    
    	function tick(){
    		$('#ticker_01 li:first').slideUp( function () { $(this).appendTo($('#ticker_01')).slideDown(); });
    	}
    	setInterval(function(){ tick () }, 5000);
    
    	function tick2(){
    		$('#ticker_02 li:first').slideUp( function () { $(this).appendTo($('#ticker_02')).slideDown(); });
    	}
    	setInterval(function(){ tick2 () }, 3000);
    
    	function tick3(){
    		$('#ticker_03 li:first').animate({'opacity':0}, 200, function () { $(this).appendTo($('#ticker_03')).css('opacity', 1); });
    	}
    	setInterval(function(){ tick3 () }, 4000);	
    
    	function tick4(){
    		$('#ticker_04 li:first').slideUp( function () { $(this).appendTo($('#ticker_04')).slideDown(); });
    	}
    
    	/**
    	 * USE TWITTER DATA
    	 */
    
    	 $.ajax ({
    		 url: 'http://search.twitter.com/search.json',
    		 data: 'q=%23javascript',
    		 dataType: 'jsonp',
    		 timeout: 10000,
    		 success: function(data){
    		 	if (!data.results){
    		 		return false;
    		 	}
    
    		 	for( var i in data.results){
    		 		var result = data.results[i];
    		 		var $res = $("<li />");
    		 		$res.append('<img src="' + result.profile_image_url + '" />');
    		 		$res.append(result.text);
    
    		 		console.log(data.results[i]);
    		 		$res.appendTo($('#ticker_04'));
    		 	}
    			setInterval(function(){ tick4 () }, 4000);	
    
    			$('#example_4').show();
    
    		 }
    	});
    
    </script>

     


پیش نمایش دانلود فایل پلاگین

8 دیدگاه دربارهٔ «نمایش آخرین اخبار به صورت اسکرولی»

  1. سلام
    واقعا دستت درد نکنه
    خیلی حال کردم که اینقدر اطلاعتتون در زمیه جی کوءری قویه.
    میخاستم ببینم منبعی هست که منم یاد بگیرم؟
    مخصوصا اگه فیلم اموزشی باشه که خیلی ممنون میشم

    1. والا علی جان اگر انگلیسیت خوب باشه میتونی از سایت خود جی کوئری api شه بخونی یا از کتاب آقای احمد بادپی استفاده کنی و خریداری کنی بنرش گوشه سایت هست .
      اگر هم صبر کنی که ایشالا بخش api سایت رو بالا بیاریم برای آموزش جی کوئری

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *