DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 端午節快樂!龍舟比賽javascript特效
端午節快樂!龍舟比賽javascript特效
編輯:關於JavaScript     
端午節快樂!龍舟比賽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>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved