• WAP手机版 RSS订阅 加入收藏  设为首页
网站公告

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

时间:2012/1/23 18:23:30   作者:小利子   来源:正势利   阅读:436   评论:31
内容摘要:前天就看到百度首页logo上的龙可以跟随鼠标移动,很感兴趣,于是就想仿制下来。然后我看了一下页面的源代码,发现源代码里赫然有非常明显的JS调用,又上网找了一下,其实还比较简单简单。看到网上发的文章,又去了其他人的博客看了一下,确实很不错,但是发现他人的教程写的不怎么详细,对于代码...

仿制百度的动态龙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源文件,做的不大好大家不要介意~~


仿制百度的动态龙logo效果详细教程仿制百度的动态龙logo效果详细教程
点这里下载:baidu.rar













 




出处:正势利工作室

网址:http://www.zhengshili.com 正势利 转载时请注明出处和网址

作者QQ及微信:49922779 点击这里给我发消息

相关评论
QQ交流群:120100441    QQ客服:49922779 闽ICP备01008686号