افکت متن با جاوا اسکریپت

اول سلام

همون طور که می دونید جاوا اسکریپت در طراحی صفحات وب نقش موثری داره و از طرفدارهای زیادی برخورداره.

به خاطر همین می خوام امروز یکی از بی نظیر ترین کدهای جاوا اسکریپت رو براتون میزارم.

این کد بیشتر برای تبلیغات به کار میره و شما خیلی راحت و فقط با جایگزین کردن چند کلمه می تونین یه بورد تبلیغاتی تو وبتون داشته باشین.

برای این منظور تک تک مراحل زیر رو پیش برید :

اول کد زیر رو در یکی از ویرایشگرها باز کنید (NotePad)

&lt;!-- This Code Uploaded  By Iman Hatampour - - Visit WWW.P30.BLOGFA.COM --&gt;
&lt;table border="0" width="24%" cellspacing="0" cellpadding="0"&gt;
&lt;tr&gt;
								&lt;td width="27"&gt; &lt;/td&gt;
								&lt;td style="border-left: 1px solid #C0C0C0; border-right: 1px solid #C0C0C0; border-top: 3px solid #FF8901; border-bottom: 1px solid #C0C0C0;"&gt;
      &lt;TABLE height=27 cellSpacing=0 cellPadding=0 width="99%" border=0&gt;
        &lt;TR&gt;
          &lt;TD style="PADDING-LEFT: 14px; PADDING-BOTTOM: 4px; PADDING-TOP: 0px" 
          align=middle width="95%" height="27"&gt;
            &lt;span style="font-size: 8pt"&gt;
            &lt;SCRIPT type=text/javascript&gt;
var randombgcolors=["#F3F3F3", "#E8E8E8", "#DEE3E7", "#E9ECEF"]

var rbcssrule=""
var randomnum=Math.floor(Math.random()*randombgcolors.length)
if (randombgcolors[randomnum].indexOf(":")!=-1){
rbcssrule="background-color: "+randombgcolors[randomnum].split(":")[0]+";"
rbcssrule+="color: "+randombgcolors[randomnum].split(":")[1]+";"
}
else
rbcssrule="background-color: "+randombgcolors[randomnum]+";"

document.write('&lt;style type="text/css"&gt;
')
document.write('.randomcolor{'+rbcssrule+'}
')
if (randombgcolors[randomnum].split(":").length==3) //if link color specified
document.write('.randomcolor a{color:'+randombgcolors[randomnum].split(":")[2]+';}
')
document.write('&lt;/style&gt;')

&lt;/SCRIPT&gt;

&lt;STYLE type=text/css&gt;#contentwrapper {
	BORDER-RIGHT: black 0px solid; PADDING-RIGHT: 0px; BORDER-TOP: black 0px solid; PADDING-LEFT: 0px; FONT-WEIGHT: normal; PADDING-BOTTOM: 0px; BORDER-LEFT: black 0px solid; WIDTH: 460px; PADDING-TOP: 0px; BORDER-BOTTOM: black 0px solid; HEIGHT: 100px; BACKGROUND-COLOR: transparent; TEXT-ALIGN: justify
}
.billcontent {
	DISPLAY: block; FONT-WEIGHT: normal; FONT-SIZE: 11px; WIDTH: 100%; FONT-FAMILY: Tahoma
}
&lt;/STYLE&gt;

&lt;SCRIPT type=text/javascript&gt;

//List of transitional effects to be randomly applied to billboard:
var billboardeffects=["GradientWipe(GradientSize=1.0 Duration=0.7)", "Inset", "Iris", "Pixelate(MaxSquare=5 enabled=false)", "RadialWipe", "RandomBars", "Slide(slideStyle='push')", "Spiral", "Stretch", "Strips", "Wheel", "ZigZag"]

//var billboardeffects=["Iris"] //Uncomment this line and input one of the effects above (ie: "Iris") for single effect.

var tickspeed=7000 //ticker speed in miliseconds (2000=2 seconds)
var effectduration=500 //Transitional effect duration in miliseconds
var hidecontent_from_legacy=1 //Should content be hidden in legacy browsers- IE4/NS4 (0=no, 1=yes).

var filterid=Math.floor(Math.random()*billboardeffects.length)

document.write('&lt;style type="text/css"&gt;
')
if (document.getElementById)
document.write('.billcontent{display:none;
'+'filter:progid:DXImageTransform.Microsoft.'+billboardeffects[filterid]+'}
')
else if (hidecontent_from_legacy)
document.write('#contentwrapper{display:none;}')
document.write('&lt;/style&gt;
')

var selectedDiv=0
var totalDivs=0

function contractboard(){
var inc=0
while (document.getElementById("billboard"+inc)){
document.getElementById("billboard"+inc).style.display="none"
inc++
}
}

function expandboard(){
var selectedDivObj=document.getElementById("billboard"+selectedDiv)
contractboard()
if (selectedDivObj.filters){
if (billboardeffects.length&gt;1){
filterid=Math.floor(Math.random()*billboardeffects.length)
selectedDivObj.style.filter="progid:DXImageTransform.Microsoft."+billboardeffects[filterid]
}
selectedDivObj.filters[0].duration=effectduration/1000
selectedDivObj.filters[0].Apply()
}
selectedDivObj.style.display="block"
if (selectedDivObj.filters)
selectedDivObj.filters[0].Play()
selectedDiv=(selectedDiv&lt;totalDivs-1)? selectedDiv+1 : 0
setTimeout("expandboard()",tickspeed)
}

function startbill(){
while (document.getElementById("billboard"+totalDivs)!=null)
totalDivs++
if (document.getElementById("billboard0").filters)
tickspeed+=effectduration
expandboard()
}

if (window.addEventListener)
window.addEventListener("load", startbill, false)
else if (window.attachEvent)
window.attachEvent("onload", startbill)
else if (document.getElementById)
window.onload=startbill

&lt;/SCRIPT&gt;

&lt;SCRIPT language=JavaScript type=text/JavaScript&gt;
&lt;!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&amp;&amp;i&lt;a.length&amp;&amp;(x=a[i])&amp;&amp;x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i&lt;a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))&gt;0&amp;&amp;parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&amp;&amp;d.all) x=d.all[n]; for (i=0;!x&amp;&amp;i&lt;d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&amp;&amp;d.layers&amp;&amp;i&lt;d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x &amp;&amp; d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i&lt;(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//--&gt;
&lt;/SCRIPT&gt;

&lt;/span&gt;

&lt;DIV id=contentwrapper style="font-weight: normal; width: 129px; height: 23px; text-align: justify; border: 0px solid black; padding: 0px; background-color: transparent"&gt;
            &lt;DIV class=billcontent id=billboard0 style="width: 285px; height: 42px"&gt;
				&lt;table border="1" width="100%" style="border-width: 0px"&gt;
					&lt;tr&gt;
						&lt;td style="border-style: none; border-width: medium" align="right" dir="rtl"&gt;
						&lt;p align="left"&gt;
						&lt;span style="font-weight: 700; font-size: 8pt"&gt;
						&lt;font color="#4C93BF"&gt;.: 
						&lt;a href="&lt;-BlogUrl-&gt;" style="color: #2c4144; text-decoration: none"&gt;
						&lt;font color="#CC6600"&gt;&lt;-BlogUrl-&gt;&lt;/font&gt;&lt;/a&gt; :.&lt;/font&gt;&lt;/span&gt;&lt;/td&gt;
						&lt;td style="border-style: none; border-width: medium" align="right" dir="rtl" width="9"&gt;
						 &lt;/td&gt;
					&lt;/tr&gt;
					&lt;tr&gt;
						&lt;td style="border-style: none; border-width: medium" align="right" dir="rtl"&gt;
						&lt;span style="font-size: 8pt"&gt;&lt;b&gt;&lt;font color="#4C93BF"&gt;.:&lt;/font&gt;&lt;font color="#CC6600"&gt; 
						&lt;-BlogTitle-&gt;&lt;/font&gt;&lt;font color="#FF5500"&gt; 
						&lt;/font&gt;&lt;font color="#4C93BF"&gt; 
						:.&lt;/font&gt;&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;
						&lt;td style="border-style: none; border-width: medium" align="right" dir="rtl" width="9"&gt;
						 &lt;/td&gt;
					&lt;/tr&gt;
				&lt;/table&gt;
			&lt;/DIV&gt;
            &lt;DIV class=billcontent id=billboard1 style="width: 283px; height: 46px"&gt;
				&lt;table border="1" width="100%" style="border-width: 0px"&gt;
					&lt;tr&gt;
						&lt;td style="border-style: none; border-width: medium" dir="rtl" width="258"&gt;
						&lt;p align="right"&gt;
						&lt;span style="font-size: 8pt; font-weight: 700" lang="fa"&gt; 
						&lt;font color="#CC6600"&gt;وبلاگ &lt;-BloId-&gt;&lt;/font&gt;&lt;font color="#FF5500"&gt; 
						&lt;/font&gt;&lt;font color="#4C93BF"&gt; 
						»&lt;/font&gt;&lt;/span&gt;&lt;/td&gt;
						&lt;td style="border-style: none; border-width: medium" dir="rtl"&gt;
						 &lt;/td&gt;
					&lt;/tr&gt;
					&lt;tr&gt;
						&lt;td style="border-style: none; border-width: medium" dir="rtl" width="258"&gt;
				&lt;font color="#737980"&gt;
				&lt;span style="font-size: 8pt"&gt;&lt;-BlogDescription-&gt;&lt;/font&gt;&lt;/span&gt;&lt;/td&gt;
						&lt;td style="border-style: none; border-width: medium" dir="rtl"&gt;
				 &lt;/td&gt;
					&lt;/tr&gt;
					&lt;/table&gt;
			&lt;/DIV&gt;
            &lt;DIV class=billcontent id=billboard2 style="width: 284px; height: 18px"&gt;
				&lt;table border="1" width="100%" style="border-width: 0px"&gt;
					&lt;tr&gt;
						&lt;td style="border-style: none; border-width: medium"&gt;
						&lt;p align="right" dir="rtl"&gt;
						&lt;span style="font-size: 8pt; font-weight: 700" lang="fa"&gt; 
						&lt;font color="#CC6600"&gt;تبادل لینک و لوگو&lt;/font&gt;&lt;font color="#FF5500"&gt; 
						&lt;/font&gt;&lt;font color="#4C93BF"&gt; 
						»&lt;/font&gt;&lt;/span&gt;&lt;/td&gt;
						&lt;td style="border-style: none; border-width: medium" width="15"&gt;
						 &lt;/td&gt;
					&lt;/tr&gt;
					&lt;tr&gt;
						&lt;td style="border-style: none; border-width: medium" align="justify"&gt;
						&lt;p dir="rtl"&gt;&lt;font color="#737980"&gt;
						&lt;span style="font-size: 8pt" lang="fa"&gt;برای تبادل لینک و لوگو در قسمت نظرات کامنت بگزارید&lt;/span&gt;&lt;/font&gt;&lt;/td&gt;
						&lt;td style="border-style: none; border-width: medium" align="justify" width="15"&gt;
					 &lt;/td&gt;
	&lt;/tr&gt;
&lt;/table&gt;&lt;/DIV&gt;&lt;/DIV&gt;&lt;/TD&gt;&lt;/TR&gt;&lt;/TABLE&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;!-- This Code Uploaded  By Iman Hatampour - - Visit WWW.P30.BLOGFA.COM --&gt;&lt;/body&gt;
&lt;/html&gt;

بعد به جای گزینه های زیر می تونین از کلمات دلخواه خودتون استفاده کنین.

۱- <-BlogUrl-> : اگه به همین صورت باشه آدرس وبلاگتون نوشته میشه.

۲- <-BlogTitle-> : عنوان وبلاگتون رو نمایش میده.

۳- وبلاگ <-BloId-> : نام وبلاگتون رو نمایش میده.

۴- <-BlogDescription-> : توضیحات وبلاگتون نمایش داده میشه.

۵- Custom Text : که هر چی دوست دارین می تونین بنویسین.

در این صفحه می تونین کد رو مشاهده کنین.

تموم شد.

شاد باشید.