- 3/5
- 1
- 2
- 3
- 4
- 5
织梦DedeCMS视频教程买空间 租服务器 选网硕互联！ 无忧站长工具,百度权重一键全查!
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" href="http://cn.yahoo.com" onclick="load_yodel();return false;"><area shape="poly" coords="193,0,202,1,197,25,192,24" href="http://cn.yahoo.com" 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" href="http://cn.yahoo.com" onclick="load_yodel();return false;"> <area shape="poly" coords="193,0,202,1,197,25,192,24" href="http://cn.yahoo.com" 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的那个感叹号,记着带好耳机.. -->