آموزش افکت های جالب با jquery easing :)

فاطمه طالبی

فاطمه طالبی

کاربر بیش فعال
بنام خدا
با سلام. در این آموزش ساده میخوایم ببینیم با پلاگین jquery easing چه افکتهایی رو میتونیم به عناصر صفحمون بدیم و چگونه.

از این آدرس میتونید پلاگین jquery easing رو دانلود کنید : (در قسمت Download )

http://gsgd.co.uk/sandbox/jquery/easing/

پلاگین رو در مسیری که فایل Index.html هست میذاریم و اونو به ایندکسمون لینک میکنیم تا بتونیم ازش استفاده کنیم :


HTML: 
<html>
<head>
<script src="jquery.easing.1.3.js"></script>

</head>
<body>

</body>
</html>

حالا برای آشنایی با این پلاگین به این لینک برین :

http://matthewlein.com/experiments/easing.html
و از قسمت Choose an easing type نوع easing یا همون نوع اجرای افکت رو میتونین انتخاب کنین و دکمه Test رو بزنین. البته گزینه های آخریش متفاوت ترند.


خب حالا میخوایم یک دایو سبز رنگ داشته باشیم تو ایندکسمون، که از این افکت ها استفاده کنه:

HTML: 
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.easing.1.3.js"></script>
<!-- jQery code: -->
<script>
$(document).ready(function(){
    $("div").slideDown({ duration: 2000, easing: "easeInBounce" }); });
</script>

<!-- Green div (CSS) : -->
<style type="text/css">
div{ background-color:green; height:150px; width:150px; display:none;}
</style>

</head>

<body>
<div>hi </div>
</body>

</html>

توضیح :
بعد از لینک کردن فایل های جی کوئری های مورد نیازمون ، میریم سراغ کد :

HTML: 
$("div").slideDown({ duration: 2000, easing: "easeInBounce" });

ابتدا المنت مورد نظرمون رو انتخاب کردیم و سپس گفتیم از افکت slideDown استفاده بشه، که میتونیم بجای این از افکت های دیگر جی کوئری ، مانند fade, slideUp, Toggle و... نیز استفاده کنیم .
سپس در duration زمان اجرای افکت بر حسب میلی ثانیه رو وارد میکنیم. و در easing یکی از نوع اجرای افکت های دلخواه رو انتخاب میکنیم. که در این سایت عملکرد دقیق هر کدوم رو نشون میده! (روشون کلیک کنید) :

http://easings.net

خب فقط یک نکته کوچیک در قسمت استایل css هست: دایو رو display:none; قرار دادم که در ابتدا مخفی باشه. زیرا برای اجرای بعضی افکت ها مثل slideDown ، کنترل ابتدا باید مخفی باشه.و برای بعضی افکت ها مانند افکت fadeOut و... نیازی به مخفی کردن کنترل نیست.و این بستگی به افکت داره.

اگه سوالی داشتین میتونین بپرسین :gol:
 
آخرین ویرایش:
hoseng

hoseng

کاربر بیش فعال
سلام مرسی از مطالبتون
من یه سوال کلی داشتم
میخواستم ببینم ما وقتی یک شی (حالا منظورم از شی یکی از المنت های HTML هستش مثل DIV یا هرچیز دیگه ای) رو توی صفحه مرورگرمون ثابت می کنیم، یعنی با اسکرول صفحه هم جابه جا میشن از CSS استفاده می کنیم یا JQUERY توش دخیله؟
 
فاطمه طالبی

فاطمه طالبی

کاربر بیش فعال
hoseng گفت:
سلام مرسی از مطالبتون
من یه سوال کلی داشتم
میخواستم ببینم ما وقتی یک شی (حالا منظورم از شی یکی از المنت های HTML هستش مثل DIV یا هرچیز دیگه ای) رو توی صفحه مرورگرمون ثابت می کنیم، یعنی با اسکرول صفحه هم جابه جا میشن از CSS استفاده می کنیم یا JQUERY توش دخیله؟
کلیک کنید تا باز شود...
در css توسط postion :fixed; میشه . مثال :

HTML: 
<html>
<head>
<style type="text/css">#divf{position:fixed;background-color:blue;}
</style>
</head>
<body>
<div id="divf"> I'm fixed! </div>

<p> Scroll... </p><p> Scroll... </p><p> Scroll... </p><p> Scroll... </p><p> Scroll... </p><p> Scroll... </p><p> Scroll... </p><p> Scroll... </p><p> Scroll... </p><p> Scroll... </p><p> Scroll... </p><p> Scroll... </p><p> Scroll... </p><p> Scroll... </p><p> Scroll... </p><p> Scroll... </p><p> Scroll... </p><p> Scroll... </p><p> Scroll... </p><p> Scroll... </p><p> Scroll... </p>

</body>
</html>
 
آخرین ویرایش:
hoseng

hoseng

کاربر بیش فعال
فاطمه طالبی گفت:
در css توسط postion :fixed; میشه . مثال :

HTML: 
<html>
<head>
<style type="text/css">#divf{position:fixed;background-color:blue;}
</style>
</head>
<body>
<div id="divf"> I'm fixed! </div>

<p> Scroll... </p><p> Scroll... </p><p> Scroll... </p><p> Scroll... </p><p> Scroll... </p><p> Scroll... </p><p> Scroll... </p><p> Scroll... </p><p> Scroll... </p><p> Scroll... </p><p> Scroll... </p><p> Scroll... </p><p> Scroll... </p><p> Scroll... </p><p> Scroll... </p><p> Scroll... </p><p> Scroll... </p><p> Scroll... </p><p> Scroll... </p><p> Scroll... </p><p> Scroll... </p>

</body>
</html>
کلیک کنید تا باز شود...
مرسی لطف کردین سوال در مورد CSS زیاده ولی اینجا جاش نیست
بازم ممنون
 
H

helali1010

عضو جدید
سلام دوستان
یه چیزی میخوام که ساعت و تاریخ و.... سایت رو برام خطی نمایش بده منظورم ساده ساده
ممنون
 
فاطمه طالبی

فاطمه طالبی

کاربر بیش فعال
helali1010 گفت:
سلام دوستان
یه چیزی میخوام که ساعت و تاریخ و.... سایت رو برام خطی نمایش بده منظورم ساده ساده
ممنون
کلیک کنید تا باز شود...
این خیلی ساده:redface::
HTML: 
<!DOCTYPE html><html><body>
<script>
var d=new Date();document.write(d);
</script>
</body></html>



این بهتر:cool::


کد: 
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script>
    week= new Array("يكشنبه","دوشنبه","سه شنبه","چهارشنبه","پنج شنبه","جمعه","شنبه")
    months = new Array("فروردين","ارديبهشت","خرداد","تير","مرداد","شهريور","مهر","آبان","آذر","دي","بهمن","اسفند");
    a = new Date();
    d= a.getDay();
    day= a.getDate();
    month = a.getMonth()+1;
    year= a.getYear();
    year = (year== 0)?2000:year;
    (year<1000)? (year += 1900):true;
    year -= ( (month < 3) || ((month == 3) && (day < 21)) )? 622:621;
    switch (month) {
        case 1: (day<21)? (month=10, day+=10):(month=11, day-=20); break;
        case 2: (day<20)? (month=11, day+=11):(month=12, day-=19); break;
        case 3: (day<21)? (month=12, day+=9):(month=1, day-=20); break;
        case 4: (day<21)? (month=1, day+=11):(month=2, day-=20); break;
        case 5:
        case 6: (day<22)? (month-=3, day+=10):(month-=2, day-=21); break;
        case 7:
        case 8:
        case 9: (day<23)? (month-=3, day+=9):(month-=2, day-=22); break;
        case 10:(day<23)? (month=7, day+=8):(month=8, day-=22); break;
        case 11:
        case 12:(day<22)? (month-=3, day+=9):(month-=2, day-=21); break;
        default: break;
    }
    document.write(" "+week[d]+" "+day+" "+months[month-1]+" "+ year);
    </script>


    <script>
    function startTime()
    {
        var today=new Date();
        var h=today.getHours();
        var m=today.getMinutes();
        var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout(function(){startTime()},500);
}


function checkTime(i)
{
    if (i<10)
    {
        i="0" + i;
    }
    return i;
}
</script>


</head>


<body onload="startTime()">
    <div id="txt"></div>


    <span style="font-size:9pt;color:#333333;direction:rtl"><script>showdate()</script></span>
</body>
</html>
 
آخرین ویرایش:
hoseng

hoseng

کاربر بیش فعال
سلام اگه میخوای از تاریخ شمسی استفاده کنی از این افزونه استفاده کن. آموزشش هم داخل خودش هست
البته آموزش نمیخواد فقط باید includeش کنی و به جای تابع های date از jdate استفاده کنی. حتی یه سری ویژگی های اضافه هم داره. زبانش هم PHP هست نه JS
مشاهده پیوست jdf.php-2.50-[jdf.scr.ir]_2.zip
 
E

ebiramrb

عضو جدید
jquery فقط یه بدی داره اونم اینکه آنفتامین هست ! یعنی به طرز شگفت اوری ادم رو معتاد می کنه !!! :D
 
برای ارسال پاسخ شما باید وارد سیستم شوید.
بالا