您的位置:首页 - Javascript
端午节快乐!龙舟比赛javascript特效
端午节快乐!龙舟比赛javascript特效



请把鼠标移动到大鼓上,然后选择三只龙舟中的一只,然后击鼓。
还可以在这里体验: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"></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;">
<h2>赛龙舟</h2><div>请把鼠标移动到大鼓上,就出现龙舟,<br />然后点击选择三只龙舟中的一只,然后击鼓。<a href="http://keleyi.com/a/bjac/trj18bxu.htm" target="_blank">原文</a></div>
<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://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>
本站导航
相关文章
柯乐义 Copyright© keleyi.com