仿制百度的动态龙logo效果详细教程

前天就看到百度首页logo上的龙可以跟随鼠标移动，很感兴趣，于是就想仿制下来。然后我看了一下页面的源代码，发现源代码里赫然有非常明显的JS调用，又上网找了一下，其实还比较简单简单。看到网上发的文章，又去了其他人的博客看了一下，确实很不错，但是发现他人的教程写的不怎么详细，对于代码小白来说很不好理解，然后下午经过一个多小时的奋战，终于搞定了自己的网站龙，大家可以去我的网站看效果，然后下面附上比较详尽的制作教程和源文件。
先放效果图吧~
这个是鼠标未指向的时候，一个静态的logo
这个是鼠标指向之后，龙飞出来了~logo变成一个没有龙的logo~
然后是做法：
其实很简单，首先是代码调用
<div id="m"><p id="lg"><img src="http://www.zhengshili.com/tupian/long/logo_1.gif"

width="270" height="129" usemap="#mp"><map name="mp"><area shape="rect"

coords="22,17,252,110" href="http://www.zhengshili.com" target="_blank" title="正势利

zhengshili.com" onMouseDown="return ns_c({'fm':'behs','tab':'bdlogo'})"></map></p>
</div>
</body>
 
 
 
 
 
<script src="http://www.zhengshili.com/tupian/long/dragon2012.js"></script>
当然，里面的地址都是我网站的相对的地址~大家用的时候下载我提供的附件，然后上传到你的网站里面~对应更改文件的调用地址~~
注：这里的logo_2.png对应的是有龙的logo地址
然后是js文件，修改我附件中的js文件

找到
http://www.zhengshili.com/tupian/long/
改为你的对应地址，确保head2.png、foot2.png这些组成龙身体的小部分png图片能够正常访问即可
然后把修改好的文件上传到服务器，把第一段的调用代码放到合适的位置即可
这样子就可以实现类似于百度的效果，不点击的时候有龙，点击之后龙飞出来，logo里面就没有龙的效果～～～
下面是附件，baidu.rar里面包括js、龙的身体个部分小png图片，还有我做好的logo的图、PSD源文件，做的不大好大家不要介意～～


点这里下载：baidu.rar

作者QQ及微信：49922779