افکت fade in و fade out برای تصویر با استفاده از jQuery

در این مقاله قصد داریم نحوه ایجاد افکت برای تصاویر را در ASP.net توضیح دهیم. با استفاده از js/jquery می توانیم به تصاویر حرکت دهیم . در اینجا افکت fade in /fade out را پیاده سازی خواهیم کرد.

افکت fade in  و fade out  برای تصویر با استفاده از jQuery

 در این مقاله قصد داریم نحوه ایجاد افکت برای تصاویر را در  ASP.net  توضیح دهیم.  با استفاده از  js/jquery می توانیم به تصاویر حرکت دهیم . در اینجا افکت  fade in /fade out  را پیاده سازی خواهیم کرد.

برای انجام این کار ابتدا یک پروژه  ASP.net  ایجاد میکنیم.  یک  Web form  به آن اضافه کرده و در قدم اول در قسمت  head  صفحه کدهای زیر را وارد میکنیم.

<head>  
    <meta charset="utf-8" />  
    <title></title>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
</head>

 

css  مناسب را به صفحه اضافه میکنیم. البته بهتر است یک فایل  CSS جداگانه ایجاد شود و سپس در صفحه قرار داد .

کدهای  CSS به صورت زیر می باشند :

<style>  
    .img_outer {  
        width: 310px;  
        height: 344px;  
        position: relative;  
        float: left;  
        margin: 10px;  
    }  
      
    .img_outer img {  
        position: absolute;  
        z-index: 1;  
        cursor: pointer;  
    }  
      
    .img_blur {  
        opacity: 0.84;  
    }  
</style> 

اکنون چند تصویر را به صفحه اضافه میکنیم. که بتوانیم بر روی آنها افکت ها را اجرا کنیم.

 <body style="height: 1000px" dir="rtl" >
        <h3><a href="http://barnamenevisan.org/">مرجع تخصصی برنامه نویسان</a></h3>
        <div class="list_leftp">  
            <div class="img_outer">  
                <a href="#" data-hr="http://www.firstcry.com"> <img src="http://cdn.fcglcdn.com/brainbees/banners/04Dec15-todaysdeal4.jpg" alt="" title="" /> </a>  
            </div>  
            <div class="img_outer">  
                <a href="#" data-hr="http://www.firstcry.com"> <img src="http://cdn.fcglcdn.com/brainbees/banners/04Dec15-todaysdeal4.jpg" alt="" title="" /> </a>  
            </div>  
            <div class="img_outer">  
                <a href="#" data-hr="http://www.firstcry.com"> <img src="http://cdn.fcglcdn.com/brainbees/banners/04Dec15-todaysdeal4.jpg" alt="" title="" /> </a>  
            </div>  
            <div class="img_outer">  
                <a href="#" data-hr="http://www.firstcry.com"> <img src="http://cdn.fcglcdn.com/brainbees/banners/04Dec15-todaysdeal4.jpg" alt="" title="" /> </a>  
            </div>  
        </div>  
    </body>  

 

صفت  Data-hr  برای انتساب لینک به  <a> استفاده شده است.

قدم مهم برای انجام هدف ما ، نوشتن کد  jQuery  مورد نیاز برای پیاده سازی افکت ها است.

    <script type="text/javascript">  
        $(document).ready(function(e)  
        {  
            $('img').hover(function()  
            {  
                $('.img_outer img').addClass('img_blur');  
                $(this).removeClass('img_blur').animate(  
                {  
                    'left': '-10px',  
                    'top': '-10px',  
                    'width': '330px'  
                });  
            }, function()  
            {  
                $('.img_outer img').removeClass('img_blur');  
                $(this).animate(  
                {  
                    'left': '0',  
                    'top': '0',  
                    'width': '310px'  
                });  
            });  
            $(document).on('click', 'a', function(event)  
            {  
                var x = $(this).attr('data-hr');  
                $(this).find('img').fadeOut(700).fadeIn(700, function(event)  
                {  
                    window.open(x, "_blank");  
                });  
                event.preventDefault();  
            });  
        });  
    </script>  

 

در رویداد یک تصویر ، کلاس img_blur برای تار شدن یک تصویر اضافه شده است . پس از آن ویژگی های چپ و بالا و عرض برای حرکت یک تصویر تنظیم می شوند.

یکبار این ویژگی ها تنظیم می شوند ، کلاس های خاص حذف می شوند و همه این ویژگی ها به حالت پیش فرض خود در می آیند.

خطوط باقی مانده کد ، برای تغییر مسیر و  fade in/ fade out  شدن یک تصویر انجام می شود.

هنگامی که بر روی تصویر کلیک میکنید، مقدار صفت data-hr در متغیر  X ذخیره می شود. در این مرحله می توانیم برای افکت زمانی را در نظر بگیریم.

 

دانلود فایل های ضمیمه مخصوص اعضای سایت می باشد !
کاربر مهمان! جهت دانلود و استفاده از امکانات سایت لطفا وارد سایت شوید و یا ثبت نام کنید
دانلود نسخه ی PDF این مطلب