端午節快樂!龍舟比賽javascript特效
請把鼠標移動到大鼓上,然後選擇三只龍舟中的一只,然後擊鼓。
還可以在這裡體驗:http:///keleyi/phtml/duanwu/index.htm
源碼和ps文件下載:http://down./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://" 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/phtml/duanwu/duanwu",url:"http:///keleyi/phtml/duanwu/duanwu",
把
http:///
修改為自己網站域名
把剩下的改為實際的路徑
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:///a/bjac/trj18bxu.htm" target="_blank">原文</a></div>
<div id="m" style="float:left">
<p id="lg">
<img src="http:///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://" 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/phtml/duanwu/duanwu/js/duanwu.js"></script>
</body>
</html>