Yahoo的Logo彩蛋_綜合其它特效

Yahoo的Logo彩蛋,您可以先修改部分代碼再運行.

<img src="http://p1.mb5u.com/texiao/21/20100523005218157.gif" alt="中國雅虎" width="208" height="61" id="ycn_lg" />
<script type="text/javascript">
var yodel_map = '<map name="yodel"><area shape="rect" coords="190,29,197,35"  onclick="load_yodel();return false;"><area shape="poly" coords="193,0,202,1,197,25,192,24"  onclick="load_yodel();return false;"></map>', 
yodel_str = '<object id="wmsgsound" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="0" height="0">'+
'<param name="movie" value="http://cn.yimg.com/i/comn/snd/1_0/y3.swf" /><param name="quality" value="high" /><param name="loop" value="0" />'+
'<embed name="wmsgsound" src="http://cn.yimg.com/i/comn/snd/1_0/y3.swf" loop="0" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="0" height="0"></embed></object>',
y_logo = document.getElementById("ycn_lg");
if(y_logo){
y_logo.useMap = "#yodel";
}
function load_yodel(){
y_logo.blur();
var con = document.createElement("span");
con.style.visibility = "hidden";
con.innerHTML = yodel_str;
document.body.appendChild(con);
};
document.write("<span style=\"visibility:hidden;\">"+yodel_map+"</span>");
</script>

<!-- 
其實這個東西非常簡單

讓偶帶你解讀下Yahoo的這段東西
document.write("<span style=\"visibility:hidden;\">"+yodel_map+"</span>");
這段的意思是在頁面顯示一個隱藏的span,span的內容其實是:
1.
<span style="visibility:hidden;">
    <map name="yodel">
        <area shape="rect" coords="190,29,197,35"  onclick="load_yodel();return false;">
        <area shape="poly" coords="193,0,202,1,197,25,192,24"  onclick="load_yodel();return false;">
    </map>
</span>

很明顯這個就是在Yahoo的Logo的感嘆號加了兩個熱區,代碼里邊yodel_map=****定義的就是兩個熱區了

對應的yodel_str =****就是調用一個flash,這個flash就是那個聲音文件了

2.
y_logo = document.getElementById("ycn_lg";
if(y_logo){
y_logo.useMap = "#yodel";
}

看到沒logo圖片的name是ycn_lg,這句就是讓名字是ycn_lg的圖片的熱區應用"yodel"這個名字的熱區的內容,也就是上邊1.的內容

3.
onclick="load_yodel();return false;
這句的意思就明顯了,點擊的時候就會調用load_yodel()這個函數

4.
function load_yodel(){
y_logo.blur();
var con = document.createElement("span");
con.style.visibility = "hidden";
con.innerHTML = yodel_str;
document.body.appendChild(con);
};
那么來看load_yodel()函數都做了什么

代碼就不一句句翻譯了,也就這么幾行...

功能就是創建一個名字為con的span,span的內容就是那個flash聲音文件了..

只要修改一下flash的地址,還有yodel_map這個變量,你自己也就能弄一個Logo的彩蛋出來鳥..

演示可以看yahoo.com.cn點logo的那個感嘆號,記著帶好耳機..
-->

所屬頻道：綜合其它特效/更新時間：2012-12-01

[收藏][報錯][返回列表]

相關綜合其它特效：

Yahoo的Logo彩蛋_綜合其它特效

綜合其它特效Rss訂閱特效代碼搜索

綜合其它特效推薦

猜你也喜歡看這些