可以在这里体验：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; width: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; width: 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; width: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>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！