找到一个端午节赛龙舟的特效

可以在这里体验: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>
原文地址:https://www.cnblogs.com/jihua/p/sailongzhou.html