طراحی وب سایت | طراحی سایت | شرکت طراحی وب سایت پروگ پارس

آخرین اخبار و رویداد ها با سه افکت اسلاید و محو و تایپ

پلاگین جی کوئری ایرانی ، آخرین اخبارها و رویداد ها نوشته شده توسط progpars.com با پشتیبانی از حروف فارسی با 3 افکت محو شدن  و  اسلاید و تایپ .

 

مشاهده پلاگین در مخزن پلاگین های jquery.com .

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

فراخوانی کتابخانه jquery و inewsticker.js قبل از بسته شدن تگ <body>

<script src="jquery.js"></script>
<script src="inewsticker.js"></script>

 

فراخوانی تابع + تنظیمات بعد از کد های فوق

<script>
$(document).ready(function() {
    $('.fade').inewsticker({
		speed       : 3000,
		effect      : 'fade',
		dir         : 'ltr',
		font_size   : 13,
		color       : '#fff',
		font_family : 'arial',
		delay_after : 1000		
	});
	$('.slide').inewsticker({
		speed       : 2500,
		effect      : 'slide',
		dir         : 'ltr',
		font_size   : 13,
		color       : '#fff',
		font_family : 'arial',
		delay_after : 1000						
	});
	$('.typing').inewsticker({
		speed           : 100,
		effect          : 'typing',
		dir             : 'ltr',
		font_size       : 13,
		color           : '#fff',
		font_family     : 'arial',
		delay_after : 1000,

	});
});	
</script>

استفاده از کد html

<ul class="fade">
        	<li>Hello</li>
            <li>I am mahdi khaksar from iran</li>
            <li>I am designer and programmer at progpars.com </li>
            <li>www.ijquery.ir</li>
        </ul>

        <h3>Slide effect</h3>
    	<ul class="slide">
        	<li>Hello</li>
            <li>I am mahdi khaksar from iran</li>
            <li>I am designer and programmer at progpars.com </li>
            <li>www.ijquery.ir</li>
        </ul>

        <h3>Typing effect</h3>
    	<ul class="typing">
        	<li>Hello</li>
            <li>I am mahdi khaksar from iran</li>
            <li>I am designer and programmer at progpars.com </li>
            <li>www.ijquery.ir</li>
        </ul>

 

همانطور که کد ها را مشاهده می کنید ما به هر کدام از افکت ها یک کلاس دادیم شما می توانید کلاس خود را به عنصر پدر بدهید تا فرزندان عنصر پدر افکت مورد نظر را بگیرند .

 

تنظیمات :

    $('.effect').inewsticker({
		speed       : 3000,//سرعت عوض شدن متن 
		effect      : 'fade',//نوع افکت fade,slide,typing
		dir         : 'ltr',//چپ چین یا راست چین بودن متن rtl,ltr
		font_size   : 13,//اندازه متن
		color       : '#fff',//رنگ متن
		font_family : 'arial',//نوع فونت متن 
		delay_after : 1000//تعیین مدت زمان برای عوض شدن متن 		
	});

 

 

 

12 نظر

  • سلام وقت بخیر
    ممنون از مطالب عالیتون
    یک سوال دارم
    من قالب Typing effect را نیاز دارم ، اما با اینکه سایتم را اتصال به فایلهای jquery میدهم و هم قسمت مورد نظر را داخل سایتم کپی میکنم ، اما از کار می افته و فقط یک متن ثابت مثل بهم نشون میده
    آقا مهدی اگه لطف کنید و راهنمایی کنید ممنون می شم ، خیلی وقت این اشکال را دارم
    ممنونم

    • سلام کنسول مروگر رو چک کنین ببینید ارور چی میده یا آدرس سایت رو بدین من خودم چک کنم

  • سلام
    سایت رو هنوز آپلود نکردم ، امکان داره فایلهام رو براتون ایمیل کنم و آدرس ایمیلتون رو محبت میکنید؟
    با تشکر

  • سلام. من توی پروژه ام از این کد به عنوان اطلاعیه ها استفاده کردم. معمولاً اخرین اطلاعیه ها در بالای سایت قرار می گیرند. ولی خب ممکن است چند اطلاعیه همزمان با هم باشند که در این صورت این پلاگین جی کوئری کاربردی است.
    همونطور که گفتم معمولا یک اطلاعیه یا … مورد استفاده است. وقتی هم یک … رو استفاده کنم، بعد از چند ثانیه متن محو میشه. میشه راه حل بدید که اگر از یک لیست استفاده شد همون ثابت بمونه و اگر بیشتر بود کارشو ادامه بده؟

    • خوب محمد جان گویا مشکل حل شد من دیر به کامنت شما رسیدم . اگر مشکلی هنوز هست بپرس

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

دانلود و پیش نمایش فایل آخرین اخبار و رویداد ها با سه افکت اسلاید و محو و تایپ

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

سوالی دارید؟

● در تلگرام، پاسخگوی شما :)