کدهای حرفه ای وبلاگ و سایت

کدهای Css3 , JavaScript, PHP و HTML

کدهای حرفه ای وبلاگ و سایت

کدهای Css3 , JavaScript, PHP و HTML

ساخت یک کرکره نمایش مطلب (متحرک)

روش ساخت صفحه نمایش متن با افکت کرکره با استفاده از css3 و JavaScript
با کلیک بر روی گزینه ها ابتدا تفاوت های موجود را مشاهده نمایید

به ادامه مطلب مراجعه فرمائید

در حالت css با قرار گرفتن موس روی فضای کرکره متن مشخص می شود ولی در حالت CSS3 کرکره به سمت پایین حرکت می کند و در حالنت Javascript این اتفاق پس از کلیک نمودن بر روی حلقه زخ می دهد

تفاوت بین کدهای CSS و CSS3

css:


table #ctd2 {height:5px;

	overflow:hidden;

	color:#ffffff;}

	table:hover #ctd2 {color:#000000;

		height:120px;}

CSS3:
table #ctd2 {height:5px; overflow:hidden; color:#ffffff; -moz-transition: all 3s ease-out; -o-transition: all 3s ease-out; -webkit-transition: all 3s ease-out; transition: all 3s ease-out;} table:hover #ctd2 {color:#000000; height:120px;}

مرحله اول
ابتدا پوشه زیپ شده image را دانلود نموده (راست کلیک و save as) و محتویات آنرا پس از خارج نمودن از حالت زیپ بر روی یک هاست آپلود نمایید

مرحله دوم
کدهای زیر را عینا در بین تگهای <head> و </head> قرار دهید برای راحتی در داخل کادر راست کلیک و سلکت آل نمایید

ao=args[i].split("."); for(j=0; j<ao.length; j++) { s+="."+ao[j]; if(null==eval(s)) 
{ 
s=null; break; } } x=new Object; x.o=o; x.n=new Array(); x.v=new Array();
x.n[x.n.length]=s; eval("x.v[x.v.length]="+s); d.$cpe[d.$cpe.length]=x;
if(s) eval(s+"=v"); }
}

توجه در صورتی که احساس می کنید به کارایی کد جاوا اسکریپت نیازی ندارید آنرا از کد بالا حذف و در ازایش کد زیر را در قسمت Style اضافه نمایید:

مرحله سوم
کد زیر را در محل مناسب در بین تگ های <body> و </body> قرار دهید

<table style="width: 330px;background:transparent; margin-right: 0px;" 
cellpadding="0" cellspacing="0" class="style1">
<tr>
<td style="height: 30px; width: 30px; background: url('tl.png') no-repeat right 
bottom">
&nbsp;</td>
<td style="background: url('top.png') repeat-x left bottom; width:120px;">
&nbsp;</td>
<td style="background: url('ct.png') no-repeat center bottom">
&nbsp;</td>
<td style="background: url('top.png') repeat-x left bottom; width:120px;">
&nbsp;</td>
<td style="background: url('tr.png') no-repeat left bottom">
&nbsp;</td>
</tr>
<tr>
<td class="centertd" id="ctd1" style="background: url('l.png') repeat-y;"></td>
<td class="centertd" colspan="3" style=" direction:rtl;background:#fff;text-align:right;">
<div id="ctd2"><br/>
محل نوشتن متن اینجاست 
<br/>ما متن خود را به اینصورت نوشته و مانند این 
<a href="../contentslider/">لینک</a> لینک ایجاد می کنیم </div></td>
<td class="centertd" id="ctd3" style="background: url('r.png') repeat-y;"></td>
</tr>
<tr>
<td style="height: 30px; width: 30px; background: url('lb2.png') no-repeat right 
top">
&nbsp;</td>
<td style="background: url('b2.png') repeat-x left top">
&nbsp;</td>
<td style="background: url('cb2.png') no-repeat center top;">
&nbsp;</td>
<td style="background: url('b2.png') repeat-x left top">
&nbsp;</td>
<td style="background: url('rb2.png') no-repeat right top">
&nbsp;</td>
</tr>
<tr>
<td style="height: 30px; width: 30px">&nbsp;</td>
<td>&nbsp;</td>
<td style="height: 30px; width: 30px; background: url('cb1.png') no-repeat 
center top; cursor:pointer"> <div 
style="display:block;width:30px;height:30px;padding:0;margin:0;" id="key1" 
title="برای باز و بسته شدن بر روی حلقه کلیک کنید " onclick="FP_changeProp(/*id*/'ctd2',0,'style.height','120px','ctd2',0,'style.color','#000000');FP_changeProp(/*id*/'key1',0,'style.display','none');FP_changeProp(/*id*/'key2',0,'style.display','block')"></div>
<div style="display:none;width:30px;height:30px;padding:0;margin:0;" id="key2" 
title="برای باز و بسته شدن بر روی حلقه کلیک کنید " onclick="FP_changeProp(/*id*/'ctd2',0,'style.height','5px','ctd2',0,'style.color','#FFFFFF');FP_changeProp(/*id*/'key2',0,'style.display','none');FP_changeProp(/*id*/'key1',0,'style.display','block')"></div></td>
<td>&nbsp;</td>
<td style="height: 30px; width: 30px">&nbsp;</td>
</tr>
</table>

ایمان فـخــار سه‌شنبه 6 اردیبهشت 1390 ساعت 15:43