fade in & fade out

abbasjoon

abbasjoon

Member
سلام بچه ها. لطفا زحمت بکشید این سایت شبکه خبر رو ببینید.
http://www.irinn.ir
کلیک کنید تا باز شود...
همون جایی که واحد پول کشورها نمایش داده میشه . چه جوری درست شده و خط پایین ترش هم به همین ترتیب جایی که خلاصه اخبار نمایش داده می شه. چه جوری درست شده؟ کدش رو لطف می کنید برام بزارین
 
abbasjoon

abbasjoon

Member
ممنون . گشتم توش ولی متاسفانه چیزی گیرم نیومد. دیگه هیچ کمکی از دست کسی بر نمی یاد؟
 
A

adeona

New Member
سلام ...
یه ایده به ذهنم رسید که بعید می دونم تو شبکه خبر از این ایده استفاده کرده باشن ولی عملی ه !!!
می تونی واسه هر نوشته یه div با id خاص در نظر بگیری و لینکای داخلش رو از پایگاه دادت لود کنی ... ترنسپرنتی این دیو هارو می تونی با استفاده از چند خط کد جاوا اسکریپت مدیزیت کنی ... مثلا با فرض داشتن یه دیو با آیدی ه news می تونی از یه سری کد مثه کدای زیر استفاده کنی :

کد: 
function opacitynews()
	{
		if (100 > a){
		a = 0 ;
		a ++;
		document.all['news'].filters.alpha.opacity=a;
		setTimeout('opacitynews('+a+')',10)}
	}

البته تو کد بالا از document.all استفاده کردم که فقط تو مرورگرای مثه IE جواب میده ... این کد یه دیو محو رو آروم آروم نشون میده -Fade IN- ... برای اینکه تو مرورگرای به غیر از اینترنت اکسپلورر هم جواب بده اگه اشتباه نکنم باید از getElementById به جای document.all استفاده کنی ... می تونی اول مرورگر رو بشناسی بعد کدشو براش باز خوانی کنی ... حالا ایده ی اینکه چیجوری هر مثلا 5 ثانیه این تابع رو فراخونی کنی با خودت دیگه !!!
البته گفتم بعید می دونم تو شبکه خبر از این ایده استفاده شده باشه ... چون تو مرورگر اپرا هم کار می کنه ولی به هر حال این ایده ای بود که به ذهنم رسید !
 
آخرین ویرایش:
A

adeona

New Member
این کدایی ه که تو شبکه خبر ازشون استفاده کردن .... البته فقط برای محو شدنس نه اون اسکرول ه !
کد: 
function FadingScroller(content, divId, delay, maxSteps, stepDelay, startColor, endColor) {
    this.content = content;
    this.tickerId = divId;
    this.delay = delay;
    this.maxSteps = maxSteps;
    this.stepDelay = stepDelay;
    this.startColor = startColor;
    this.endColor = endColor;
    this.fadeLinks = 1;
    this.index = 0;    
    this.step = 1;
    this.mouseoverBol = false;
    this.pauseOnMouseOver = true;    

    var tickerInstance = this;
    document.getElementById(divId).onmouseover = function(){tickerInstance.mouseoverBol = true;}
    document.getElementById(divId).onmouseout = function(){tickerInstance.mouseoverBol = false;}
    this.ChangeContent();
}

FadingScroller.prototype.ChangeContent = function(){    
    if(this.step >= this.maxSteps) {      
        
        if (!this.mouseoverBol) {
            //alert(this.index + "_" + this.mouseoverBol);
            this.step = 1;
            this.index++;  
        }      
        
        if (this.index >= this.content.length)
            this.index = 0        
        
        var scrollerInstance = this;
        setTimeout(function(){scrollerInstance.ChangeContent()}, this.delay);
    }
    else {
        if(this.step == 1)
            document.getElementById(this.tickerId).innerHTML = this.content[this.index];           
        document.getElementById(this.tickerId).style.color = this.GetStepColor(this.step);
        
        if (this.fadeLinks)
            this.LinkColorChange(this.step);
        
        this.step++;
        var scrollerInstance = this;
        setTimeout(function(){scrollerInstance.ChangeContent()}, this.stepDelay);
    }
}

FadingScroller.prototype.LinkColorChange = function(step) {
  var obj = document.getElementById(this.tickerId).getElementsByTagName("A");
  if (obj.length > 0){
    for (i=0; i < obj.length; i++)
      obj[i].style.color = this.GetStepColor(step);
  }
}

FadingScroller.prototype.GetStepColor = function(step) {
    var diff;
    var newcolor=new Array(3);
    for(var i=0;i<3;i++) {
        diff = (this.startColor[i] - this.endColor[i]);
        if(diff > 0) {
            newcolor[i] = this.startColor[i]-(Math.round((diff/this.maxSteps))*step);
        } else {
            newcolor[i] = this.startColor[i]+(Math.round((Math.abs(diff)/this.maxSteps))*step);
        }
    }
    return ("rgb(" + newcolor[0] + ", " + newcolor[1] + ", " + newcolor[2] + ")");
}
 
abbasjoon

abbasjoon

Member
ممنون . این کد دیگه نیاز به تغییر نداره؟ چون من جاوا بلد نیستم میگم
 
abbasjoon

abbasjoon

Member
بچه ها لطف کنید ببینید این کدی که اقای Adeona دادن کامله. من جاوا بلد نیستم به خاطر همین لنگ موندم تو کارم. میشه بگیذ این کد رو الان باید چیکار کنم کجا بزارم و چه موقع فراخوانی کنم
 
آخرین ویرایش:
A

adeona

New Member
سلام ... ممنون از تشکرتون ... کدی که بالا گذاشتم در واقع تابعی بود که اون کاری که مد نظر شماست انجام میده ...
شما باید هر جا که لازم ه از این تابع ها استفاده کنین این تابع رو با متغیراش فراخوانی کنین ... کدی که من نوشتم خیلی ساده تر از کدی ه که تو شبکه ی خبر استفاده شده ... اگه یه کوچولو جاوا اسکریپت کار کنین حتما می تونین خودتون بدون کمک دیگران این کار رو بکنین ... بهتون توصیه میکنم برای یادگیری جاوا اسکریپت کتاب الکترونیکی :
learning javascript in 10 step
رو بخونین ... از صفر شروه کرده و تا جاهای خوبی پیش رفته ....
موفق باشین
 
abbasjoon

abbasjoon

Member
adeona گفت:
سلام ...
یه ایده به ذهنم رسید که بعید می دونم تو شبکه خبر از این ایده استفاده کرده باشن ولی عملی ه !!!
می تونی واسه هر نوشته یه div با id خاص در نظر بگیری و لینکای داخلش رو از پایگاه دادت لود کنی ... ترنسپرنتی این دیو هارو می تونی با استفاده از چند خط کد جاوا اسکریپت مدیزیت کنی ... مثلا با فرض داشتن یه دیو با آیدی ه news می تونی از یه سری کد مثه کدای زیر استفاده کنی :

کد: 
function opacitynews()
	{
		if (100 > a){
		a = 0 ;
		a ++;
		document.all['news'].filters.alpha.opacity=a;
		setTimeout('opacitynews('+a+')',10)}
	}

البته تو کد بالا از document.all استفاده کردم که فقط تو مرورگرای مثه IE جواب میده ... این کد یه دیو محو رو آروم آروم نشون میده -Fade IN- ... برای اینکه تو مرورگرای به غیر از اینترنت اکسپلورر هم جواب بده اگه اشتباه نکنم باید از getElementById به جای document.all استفاده کنی ... می تونی اول مرورگر رو بشناسی بعد کدشو براش باز خوانی کنی ... حالا ایده ی اینکه چیجوری هر مثلا 5 ثانیه این تابع رو فراخونی کنی با خودت دیگه !!!
البته گفتم بعید می دونم تو شبکه خبر از این ایده استفاده شده باشه ... چون تو مرورگر اپرا هم کار می کنه ولی به هر حال این ایده ای بود که به ذهنم رسید !
کلیک کنید تا باز شود...

سلام . من این کد رو تست کردم ولی error داد. نمفهمیدم مشکل از کجاست. ولی حدس می زنم چون تابع مقداری رو به عنوان ورودی نمی گیره توی خود تابه خود تابع دوباره فراخاونی شده و مقداری به عنوان ورودی بهش داده شده. فکل کنم مشکل از همون جا باشه. کسی می تونه کمکم کنه؟؟
 
WindowsLab

WindowsLab

Member
سلام
کد زیر را نگاهی بیاندازید (کد مقدماتی است)
کد: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  dir="rtl">
    <head>
        <title>Untitled Page</title>
        <style type="text/css">
            a#LinkBar{
                color:yellow;
                font-family:tahoma;
            }
        </style>
    </head>
    <body>
        <div id="LinkBarParent" style="border:solid 1px red;background-color:Maroon;">
            <a id="LinkBar" href="http://LinkLocation">LinkBar</a>
        </div>
        <script type="text/javascript">
            var FadeSpeed=10;       // Fade Speed :1(slow) to 15(fast)
            var PauseDuration=5000  // Number as miliseconds :1(fast) to Unlimited
            // Set Date [["Link","Title","Tooltip"],["Link","Title","Tooltip"],....]
            var Links=[["http://majidonline.com","مجید آنلاین","سایت مجید آنلاین"],["http://yahoo.com","Yahoo!","Yahoo is search box!"],["http://google.com","گوگل","ارزش گوگل 190 میلیارد دلار شد"]];
            
            var vActiveLink=0;       // Active Link date
            var vObj=document.getElementById("LinkBar");
            var vObjParent=document.getElementById("LinkBarParent");
            var vCurrentColorMinor=0;
            var vCurrentColorMajor=0;
            var vHexColor=["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"];
            
            function Fade()
            {
                //Reset link loop
                    if(vActiveLink>=Links.length)
                    {vActiveLink=0}
                
                // Set new date for <a> tag
                    vObj.setAttribute("href",Links[vActiveLink][0]);
                    //vObj.setAttribute("onmouseover",function(){window.status=(Links[vActiveLink-1][2])});
                    vObjParent.setAttribute("title",Links[vActiveLink][2])
                    vObj.innerText=Links[vActiveLink][1];
                    vActiveLink++;
                    
                // Set defualt(fade color) status for new link
                    vCurrentColorMinor=0;
                    vCurrentColorMajor=0;
                    FadeC2C();
                
                // TimeOut: Pause time between links
                    window.setTimeout("Fade()",PauseDuration);
            }
            
            // FadeC2C: Fade Color to(2) Color;
            function FadeC2C()
            {
                // Check: Is End of color?
                    if(vCurrentColorMinor>15)
                    {
                        vCurrentColorMinor=0;
                        vCurrentColorMajor++;
                        
                        // Check: Fade is end?
                            if(vCurrentColorMajor>14)
                            {
                                clearTimeout("FadeC2C()")
                                return false;
                            }
                    }
                //Change style color
                    vObj.style.color=(vHexColor[vCurrentColorMajor]+vHexColor[vCurrentColorMinor]+vHexColor[vCurrentColorMajor]+vHexColor[vCurrentColorMinor]+vHexColor[vCurrentColorMajor]+vHexColor[vCurrentColorMinor]);
                    vCurrentColorMinor+=FadeSpeed;
                    
                //Delay of color change
                window.setTimeout("FadeC2C()",10);
            }
            Fade();
        </script>
    </body>
</html>
یاعلی
موفق باشید
 
برای ارسال پاسخ شما باید وارد سیستم شوید.

آخرین مطالب مجیدآنلاین

جدیدترین ارسال ها

بالا