مخفی کرن و نمایش با جاوا اسکریپت
#1
Wink 
سلام دوستان این پلاگین رو همین الان نوشستم البته بره کانستراکت نیست 
از این میتونید برای مخفی کردن و نمایش المنت های صفحه با افکت استفاده کنید 

میخوستم همینطور که مینویسم فیلمشو هم بگیرم ولی دیدم خیلی طول کشید گفتم بیخیال 

این کد جاوا اسکریپت که بین تگ head در صفحه قرار میگیره

کد:
<script>
function hid_box(id) {
var box=document.querySelector(id);
box.style.cssText+='-webkit-transition: 500ms;-moz-transition: 500ms;-o-transition: 500ms;transition: 500ms;';
x=10;
   var s=window.setInterval(function () {
   x--;
   box.style.opacity='0.'+x+'';
       
  if(x<=0){
      window.clearInterval(s);
      box.style.cssText+='display:none;opacity:0;';
      }
   
   },100);
}
 function show_box(id) {
 var box=document.querySelector(id);
   
box.style.cssText+='-webkit-transition: 500ms;-moz-transition: 500ms;-o-transition: 500ms;transition: 500ms;';
x=0;
   var s=window.setInterval(function () {
   x++;
   box.style.opacity='0.'+x+'';
   box.style.display='block';    
  if(x>9){
      window.clearInterval(s);
      box.style.cssText+='display:block;opacity:1;';
      }
   
   },100);
}  

   function show_hid(id){
   var box=document.querySelector(id);    
   if(box.style.display=='none'){    
   show_box(id);          
   }else{hid_box(id);
   }
   }
</script>

و این هم  یه تگ span هستش که با کلیک برروی اون div  با ایدی box1 مخفی یا نمایش داده میشه 

کد:
<span  onclick="show_hid('#box1')">مخفی</span>

<div id="box1" >
این یک متن  است
<br>
این یک متن  است
</div>

با این تابع   فقط مخفی میشه 
کد:
hid_box(id)
 با این هم فقط نمایش داده میشه 
 
کد:
show_box(id)



  پاسخ


 سپاس شده توسط: mehrad77


موضوع‌های مشابه…
موضوع نویسنده پاسخ بازدید آخرین ارسال
  درخواست رفع مشکل خروجی آداپتور محمد40 12 10,012 1399/6/27، 05:08 عصر
آخرین ارسال: M.gh
  مهم آموزش جامع ساخت پلاگین Mojtaba 13 10,673 1398/11/1، 11:25 عصر
آخرین ارسال: oak
  ساخت اسپرایت با js saeed 3 3,200 1398/5/18، 02:08 عصر
آخرین ارسال: saeed
  حل شده چگونه پلاگین درست کنم ... Amirmahdy 6 5,134 1398/5/16، 12:13 صبح
آخرین ارسال: Amirmahdy
  دوره جامع برنامه نویسی جاوا اسکریپت ... oak 0 2,043 1398/5/15، 03:22 عصر
آخرین ارسال: oak

پرش به انجمن: