PDA

View Full Version : چگونگی ایجاد افکت ها !؟



hesampersian
چهارشنبه 19 اسفند 1388, 14:34 عصر
سلام
من جدیدا در بعضی سایت ها یک حالت های خاص و افکت داری رو میبینم که درست نمیدونم اسمشون چیه و یا چی نوشتن! مثلا حالت تایپ و تغییر اخبار در بالای سایت، یا مثلا وقتی موس رو روی تصویری میبرید متنی با حالت زیبا در پایین تصویر نمایان میشه که بیشتر در وردپرس دیدم و یا حتی قسمت بالای این سایت رو ببینید که تصاویر اتوماتیک تغغیر می کند : http://www.iranhost.com/#

می خواستم ببینم میشه در دات نت این کارارو انجام داد و اصلا اسم خاصی دارند؟
ممنون

Peyman.Gh
چهارشنبه 19 اسفند 1388, 15:26 عصر
سلام دوست عزیز با استفاده از CSS یا Java Script یا AJAX یا Jquery میتوانید پیاده کنید.

hesampersian
چهارشنبه 19 اسفند 1388, 19:03 عصر
شما نمونه ای چیزی دارین یا آموزشی ؟

Peyman.Gh
چهارشنبه 19 اسفند 1388, 19:28 عصر
جستجو کنید . در پایین نمونه هایی از JavaScript میتونید ببینید.


<DIV id=wb_JavaScript1
style="LEFT: 314px; WIDTH: 262px; POSITION: absolute; TOP: 36px; HEIGHT: 55px"
align=left>
<DIV id=Fly
style="FONT-SIZE: 18px; COLOR: #282828; FONT-FAMILY: Arial Black">_____ Peyman
_____</DIV>
<SCRIPT type=text/javascript>

message = document.getElementById("Fly").innerHTML; // $ = taking a new line
distance = 50;
speed = 200;

var txt="",
num=0,
num4=0,
flyofle="",
flyofwi="",
flyofto="",
fly=document.getElementById("Fly");

function stfly()
{
for(i=0;i != message.length;i++)
{
if(message.charAt(i) != "$")
txt += "<span style='position:relative;visibility:hidden;' id='n"+i+"'>"+message.charAt(i)+"<\/span>";
else
txt += "<br>";
}
fly.innerHTML = txt;
txt = "";
flyofle = fly.offsetLeft;
flyofwi = fly.offsetWidth;
flyofto = fly.offsetTop;
fly2b();
}

function fly2b()
{
if(num4 != message.length)
{
if(message.charAt(num4) != "$")
{
var then = document.getElementById("n" + num4);
then.style.left = (flyofle - then.offsetLeft + flyofwi / 2) + "px";
then.style.top = (flyofto - then.offsetTop + distance) + "px";;
fly3(then.id, parseInt(then.style.left), parseInt(then.style.left) / 5, parseInt(then.style.top), parseInt(then.style.top) / 5);
}
num4++;
setTimeout("fly2b()", speed);
}
}

function fly3(target,lef2,num2,top2,num3)
{
if((Math.floor(top2) != 0 && Math.floor(top2) != -1) || (Math.floor(lef2) != 0 && Math.floor(lef2) != -1))
{
if(lef2 >= 0)
lef2 -= num2;
else
lef2 += num2 * -1;
if(Math.floor(lef2) != -1)
{
document.getElementById(target).style.visibility = "visible";
document.getElementById(target).style.left = Math.floor(lef2) + "px";
}
else
{
document.getElementById(target).style.visibility = "visible";
document.getElementById(target).style.left = Math.floor(lef2 + 1) + "px";
}
if(lef2 >= 0)
top2 -= num3;
else
top2 += num3 * -1;
if(Math.floor(top2) != -1)
document.getElementById(target).style.top = Math.floor(top2) + "px";
else
document.getElementById(target).style.top = Math.floor(top2 + 1) + "px";

setTimeout("fly3('"+target+"',"+lef2+","+num2+","+top2+","+num3+")",50);
}
}

stfly();

</SCRIPT>
</DIV>

یا این مورد :

<DIV id=wb_JavaScript2
style="Z-INDEX: 1; LEFT: 315px; WIDTH: 277px; POSITION: absolute; TOP: 153px; HEIGHT: 82px"
align=left>
<DIV style="LEFT: 0px; POSITION: relative; TOP: 0px"><SPAN id=highlighter
style="FONT-SIZE: 18px; LEFT: 0px; CLIP: rect(0px 0px auto 0px); FONT-FAMILY: Arial; POSITION: absolute; TOP: 0px; BACKGROUND-COLOR: #ffffff"></SPAN></DIV>
<SCRIPT type=text/javascript>


var tickercontents=new Array()
tickercontents[0]='Hello !';
tickercontents[1]='Welcome To Barnamenevis';
tickercontents[2]='http://www.Barnamenevis.Org';


var tickdelay=3000;

var highlightspeed=10;


var currentmessage=0;
var clipwidth=0;

function changetickercontent()
{
crosstick.style.clip="rect(0px 0px auto 0px)";
crosstick.innerHTML=tickercontents[currentmessage];
highlightmsg();
}

function highlightmsg()
{
var msgwidth=crosstick.offsetWidth;
if (clipwidth<msgwidth)
{
clipwidth+=highlightspeed;
crosstick.style.clip="rect(0px "+clipwidth+"px auto 0px)";
beginclip=setTimeout("highlightmsg()",20);
}
else
{
clipwidth=0;
clearTimeout(beginclip);
if (currentmessage==tickercontents.length-1) currentmessage=0;
else currentmessage++;
setTimeout("changetickercontent()",tickdelay);
}
}

function start_ticking()
{
crosstick = document.getElementById("highlighter");
crosstickParent=crosstick.parentNode? crosstick.parentNode : crosstick.parentElement;
if (parseInt(crosstick.offsetHeight)>0)
crosstickParent.style.height=crosstick.offsetHeigh t+'px';
else
setTimeout("crosstickParent.style.height=crosstick.offsetHeigh t+'px'",100);
changetickercontent();
}

start_ticking();

</SCRIPT>
</DIV>

موفق باشید.

hesampersian
چهارشنبه 19 اسفند 1388, 19:35 عصر
ممنون دوستم