可以在这里体验：http://keleyi.com/keleyi/phtml/duanwu/index.htm
请把鼠标移动到大鼓上，然后选择三只龙舟中的一只，然后击鼓。
源码 和 ps文件下载：http://down.keleyi.com/source/duanwu.rar
使用说明：
1.把duanwu文件夹传到网站根目录或者其他目录
2.在LOGO相应位置改为（自己调整LOGO路径和JS路径，还有CSS细节）
<div id="m" style="float:left">
<p id="lg">
<img src="duanwu/img/duanwu-logo.gif" width="270" height="129" usemap="#mp">
<map name="mp">
<area shape="rect" coords="1,5,269,103" href="http://keleyi.com" target="_blank" title="端午龙舟赛，请选择龙舟" onMouseDown="return ns_c({'fm':'behs','tab':'bdlogo'})"></map>
</p>
</div>
<p id="lm" style="height:60px; 400px; padding:70px 0 0 280px"><a href="http://keleyi.com/a/bjac/trj18bxu.htm">原文</a></p>
3.打开duanwu.js文件
搜索
domain:"http://keleyi.com/keleyi/phtml/duanwu/duanwu",url:"http://keleyi.com/keleyi/phtml/duanwu/duanwu",
把
http://keleyi.com/
修改为自己网站域名
把剩下的改为实际的路径
3.击鼓位置修改
搜索
C.id="dw_drumface";C.style.position="absolute";C.style.left=E.G("s_wrap")?"324px":"304px";C.style.top="4px";
B.id="dw_logo";B.title=E.text.alt;B.style.width="270px";B.style.height="129px";B.style.position="absolute";B.style.left=E.G("s_wrap")?"225px":"205px";
上面2处根据自己LOGO的位置调整大小以及定位
html文件源码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>端午节快乐，龙舟比赛javascript特效--柯乐义</title> <style> * {margin: 0;padding: 0;} </style> </head> <body> <div style="margin: 0 auto; 960px;"> <div id="m" style="float:left"> <p id="lg"> <img src="http://keleyi.com/keleyi/phtml/duanwu/duanwu/img/duanwu-logo.gif" width="270" height="129" usemap="#mp" style="border:0"> <map name="mp"> <area shape="rect" coords="1,5,269,103" href="http://www.keleyi.com" target="_blank" title="端午龙舟赛，请选择龙舟" onMouseDown="return ns_c({'fm':'behs','tab':'bdlogo'})"></map> </p> </div> <p id="lm" style="height:60px; 400px; padding:70px 0 0 280px"></p> </div> <script charset="utf-8" src="http://keleyi.com/keleyi/phtml/duanwu/duanwu/js/duanwu.js"></script> </body> </html>