آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش SnakeGallery در JQuery

دوره های مرتبط با این مقاله

آموزش SnakeGallery در JQuery

SnakeGallery یک پلاگین برای ایجاد یک انیمیشن نمایش محتوای متن هر تصویر زمان hover روی آن میباشد.


آموزش SnakeGallery در JQuery

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


< div class="snake" >
  < div class="overlay" >
    < span class="title" >Image Title< /span >
    < span class="description" >Image Description< /span >
  < /div >
  < img class="" src="1.jpg" >
< /div >
 
< div class="snake" >
  < div class="overlay" >
    < span class="title" >Image Title< /span >
    < span class="description" >Image Description< /span >
  < /div >
  < img class="" src="2.jpg" >
< /div >
 
< div class="snake" >
  < div class="overlay" >
    < span class="title" >Image Title< /span >
    < span class="description" >Image Description< /span >
  < /div >
  < img class="" src="3.jpg" >
	< /div >

با استفاده از css زیر عناصر را در شکل مد نظر ما قرار میگیرند . با حرکت موس روی هر div محتوای توضیحات آن نمایش داده میشود.

.overlay{
  position:absolute;
  opacity:0.9;
  text-align:center;
  padding-top:60px;
  background-color:#ffffff;
}
 
.overlay .title{
  font-size:15px;
  font-weight:bold;
  display:block;
  width:100%;
}

حال به جای نمایش معمولی overlay در صورت حرکت موس روی div میتوان این نمایش را با افکت نمایش داد
کد زیر این عمل را برای ما انجام میدهد.

$ (".snake").snakeify();

سرعت را میتوان براساس میلی ثانیه تعیین کرد

$ (".snake").snakeify({
  speed: 200
	});
  • 126
  •    172
  • تاریخ ارسال :   1398/11/02

دانلود PDF دانلود سورس کد دانلود فیلم آموزشی دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
آموزش SnakeGallery در JQuery
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .