Blog

百度logo龙仿制过程及方法(最新解决IE6下不完美显示问题)

   上篇文章只是发布了百度LOGO龙做好的效果和相关代码,至于制作过程有些同学还不是很清楚,那我就在这篇文章写一下。

一、定位代码

   先把百度首页的源文件复制另存为html格式的文件,用dreamware打开,把那些不必要的代码去掉,然后慢慢定位到LOGO的那段代码。如下:

ps:把这段代码放在你需要显示效果的地方

<div id=m style=width:350px><p id=lg><img src=”http://www.zmrbk.com/dragon/dragon2012.gif(百度的为logo_1.gif,这里修改为自己的logo)” width=200 height=100 usemap=”#mp”></p><p id=lm></p><map name=mp>  <area shape=rect coords=”30,22,260,115″ href=”http://www.zmrbk.com(改为自己的地址)” target=_blank title=”zmr’blog(改为自己的名字,中文好像会乱码,我也懒得转码就直接用字母了)”  onmousedown=”return ns_c({’fm’:’behs’,’tab’:’bdlogo’})” >  </map><script src=http://www.zmrbk.com/dragon/dragon2012.js(修改JS路径,js文件一会我放在压缩包里面)></script>

二、修改js文件

   龙的图片以及logo_2.gif的路径都是在js文件里面

图中红色部分是图片路径,蓝色部分是龙身体的各个部分的图片,一会只需要把相关的图片下载下来放在自己的空间里面,把路径修改下就好了


圈中部分是logo2,这个要修改为自己的图片,我自己是直接做了一张透明的png图片来替换,一会这张透明图片我也会放在压缩包里面。

 

ps:在图1仍然用百度的龙的地址,把图2中的地址修改为自己的logo图片地址即可解决在IE6下龙向右拖动不完美显示的问题,最新的js文件我已经修改好,下载下来后只需把那个logo的路径修改为自己的就行了。在这里感谢一位网友对我的指点。(12.1.30)

其实代码不是很难,难的是做图片,昨天做图片就花了我大半的时间。因为我把相关图片放在自己的空间了,所以龙的效果在IE6下显示不是很好,IE9显示正常,谷歌也是正常的。

我的目录结构


最新压缩包点此下载

15 comments

  1. 追梦人

    @龙的传人:flash比较难,用js代码很容易就搞定了

    沙发
  2. 龙的传人

    博主厉害啊!本来我也想用FLASH仿一个的,可是现在知难而退了,也不知道自己以后有没有机会去想这个问题

    板凳
  3. 懒人梦醒

    节过完了。。。。也该休息完了哈,,,,

    地板
  4. 追梦人

    @王东东:呵呵,没事弄着玩

    4楼
  5. 王东东

    帅气。

    5楼
  6. 追梦人

    @朱定聪:只是那天闲得蛋疼弄着玩的

    6楼
  7. 朱定聪

    哈哈,博主对这个也深入研究呀?

    7楼
  8. 等待思索

    恩,,嘻嘻

    8楼
  9. 追梦人

    @cjh3969:如果你把那个JS文件的地址换为百度官方的就不会出现那些问题了,但那个logo_2.gif也是默认为百度的了。http://www.baidu.com/cache/dragon/js/dragon2012.js

    9楼
  10. cjh3969

    我知道了什么情况了,把龙向左边拖时是正常的,但向右、上、下边拖就是图像就是叉号,不知道高手能否指点。

    10楼
  11. cjh3969

    我是在本地计算机预浏的,ie是8.0版本,360和搜狗浏览器也是这样,win7的系统,前面都是很完美,就是二次拖拉时图片全是X

    11楼
  12. 追梦人

    @cjh3969:你是在IE6下看的么?我把龙的图片是放在自己的空间上的,所以在IE6下显示会出现你说的那个问题,但在IE9和谷歌浏览器下是正常的。

    12楼
  13. cjh3969

    龙二次拖拉时,图片全是叉号,请高手指教?

    13楼
  14. 追梦人

    @luoshui:呵呵,谢谢,祝你新年流量多多

    14楼
  15. luoshui

    恭喜访问过百

    15楼

Leave a Reply