<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>flash抽奖转盘通用模板</title>
<style type="text/css">
body { margin:0; padding:0; font-family:"微软雅黑"; }
.clearfix{zoom:1;}
.clearfix:after{content:'';clear:both;display:block;height:0;visibility:hidden;}
h1 { background:#ccc; margin:0; padding:20px; }
em { font-size:14px; font-weight:normal; margin-left:50px; font-style:normal; color:#666 }
h2 { margin:0; padding:20px 0; }
.title { zoom:1; padding:20px 0; line-height:24px;}
.title:after { clear:both; height:0; display:block; overflow:hidden; content:"";}
h3 { margin:0; float:left;}
.intro { color:#999; margin:0; padding:0; display:inline-block; font-size:16px;}
iframe { border:0; margin:0 20px; display:block; width:520px; height:525px; }
.step { margin-bottom:20px; }
.rtd { padding-left:50px;}
pre {line-height:22px; }
pre span { color:#999; }
#show { padding:20px; border-bottom:#ccc solid 1px;}
.show { padding:20px; border-bottom:#ccc solid 1px;}
#footer{margin:15px auto; line-height:24px; text-align:center;color:#999; font-size:12px;}
a { text-decoration: none; color:#0f3f94;}
a:hover { color:#F30; text-decoration:underline;}
.explain{padding:20px; line-height:24px;}
</style>
</head>
<body>
<h1>flash抽奖转盘通用模板 <em></em></h1>
<div class="explain">flash抽奖转盘通用模板,从根本上解决了转盘类活动的问题，开发效率和体验效果上都大有提升。解决了用样式和JS实现转盘抽奖活动效果不佳的问题。<br />
<strong>功能如下：</strong><br />
1.以后这种活动只需换几张图片就可以完成转盘了,资源名称随便定义；<br />
2.奖品数量是可控制的；<br />
3.按钮灵活定义!；<br />
4.指针自动旋转效果；<br />
5.鼠标指针效果可以启用；<br />
6.兼容性好，兼容IE6-9，火狐谷歌等浏览器;<br />
7.效果表现好;<br />
8.Javascript+as2.0实现，as只控制表现效果，JS处理相关行为。<br />
</div>
<div id="show">
<h2>效果演示demo1：</h2>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><iframe src="demo1.html" scrolling="no" frameborder="0"></iframe></td>
<td class="rtd"><pre>
<strong>参数说明：</strong>
flashHoler = "flashContent" <span>//加载flash的容器ID</span>
autoPlay = "no" <span>//初始化时是否自动旋转，"yes" or "no"</span>
setPointer="yes" <span>//初始化时是否设置鼠标指针，"yes" or "no"</span>
url_bg = "bg.png"; <span>//转盘背景图片</span>
url_prize = "prize.png"; <span>//奖品图片</span>
url_pointer = "pointer.png"; <span>//指针图片</span>
url_btnStart = "btnStart.gif"; <span>//开始按钮图片，可以是图片或flash</span>
url_btnOver = "btnOver.gif"; <span>//鼠标经过图片</span>
url_btnWait = "btnWait.gif"; <span>//旋转过程中按钮图片</span>
url_btnSuc = "btnSuc.gif"; <span>//旋转结束后按钮图片</span>
W_bg = "510"; <span>//背景图片尺寸</span>
W_btn = "124"; <span>//按钮图片尺寸</span>
W_pointer = "150"; <span>//指针图片宽度</span>
H_pointer = "255"; <span>//指针图片高度</span>
totleNum = 10; <span>//奖品个数</span>
turns = 5; <span>//旋转圈数</span>
stopNum = 3; <span>//中奖奖品</span>
</pre></td>
</tr>
</table>
<div class="step">
<div class="title"><h3>●</h3>
<p class="intro">外部调用资源说明</p></div>
<table border="0" cellspacing="2" cellpadding="5">
<tr>
<td align="center" bgcolor="#e5e5e5">背景图片：bg.png</td>
<td align="center" bgcolor="#e5e5e5">指针：pointer.png</td>
<td align="center" bgcolor="#e5e5e5">奖品图片：prize.png</td>
<td align="center" bgcolor="#e5e5e5">按钮：btnStart.gif</td>
<td align="center" bgcolor="#e5e5e5">btnOver.gif</td>
<td align="center" bgcolor="#e5e5e5">btnWait.gif</td>
<td align="center" bgcolor="#e5e5e5">btnSuc.gif</td>
</tr>
<tr>
<td align="center"><img src="bg.png" width="200"></td>
<td align="center"><img src="pointer.png" width="100"></td>
<td align="center"><img src="prize.png" width="200"></td>
<td align="center"><img src="btnStart.gif" width="100"></td>
<td align="center"><img src="btnOver.gif" width="100"></td>
<td align="center"><img src="btnWait.gif" width="100"></td>
<td align="center"><img src="btnSuc.gif" width="100"></td>
</tr>
</table>
</div>
</div>
<div id="show">
<h2>效果演示demo2(按钮为flash)：</h2>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><iframe src="demo2.html" scrolling="no" frameborder="0"></iframe></td>
<td class="rtd"><pre>
url_btnStart = "<font color="red">btnStart.swf</font>"; <span>//仅此差别，其余参数均与demo1相同</span>
</pre>
<table border="0" cellspacing="2" cellpadding="5">
<tr>
<td align="center" bgcolor="#e5e5e5">开始按钮：btnStart.swf</td>
</tr>
<tr>
<td align="center"><object classid=clsid:d27cdb6e-ae6d-11cf-96b8-444553540000 codebase=http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0 width=100 height=100 id=flashvars>
<param name=movie value=btnStart.swf />
<embed src=btnStart.swf width=100 height=100 name=flashvars type=application/x-shockwave-flash pluginspage=http://www.macromedia.com/go/getflashplayer />
</object></td>
</tr>
</table></td>
</tr>
</table>
</div>
<div id="show">
<h2>效果演示demo3(自动旋转)：</h2>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><iframe src="demo3.html" scrolling="no" frameborder="0"></iframe></td>
<td class="rtd"><pre>
autoPlay = "<font color="red">yes</font>"; <span>//仅此差别，其余参数均与demo2相同</span>
</pre></td>
</tr>
</table>
</div>
<div id="show">
<h2>效果演示demo4(个性指针)：</h2>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><iframe src="demo4.html" scrolling="no" frameborder="0"></iframe></td>
<td class="rtd"><pre>
url_pointer = "<font color="red">pointer2.png</font>"; <span>//仅此差别，其余参数均与demo3相同</span>
</pre>
<table border="0" cellspacing="2" cellpadding="5">
<tr>
<td align="center" bgcolor="#e5e5e5">指针：pointer2.png</td>
</tr>
<tr>
<td align="center"><img src="pointer2.png" width="100"></td>
</tr>
</table></td>
</tr>
</table>
</div>
<div class="show">
<h1>flash抽奖转盘设计注意事项</h1>
<div>
<h2>设计注意事项</h2>
1.转盘的最大宽度和高度是510*510像素的，请在这个范围内设计<br />
<br />
2.设计请注意，宽度和高度保持一致，设计的时候一定要按照圆心均分。<br /><br />
<img src="help/sj_1.png" width="568" height="547" /><br /><br />
3.设计的时候需要提供如下图片<br /><br />
<img src="help/sj_2.png" width="1076" height="239" /></div>
<div>
<h2>重构注意事项</h2>
1.根据Demo引入资源，图片都是导入flash执行的，可以使用png24位的透明图片。<br /><br />
2.资源都是配置的，根据实际尺寸配置背景图片尺寸、按钮图片尺寸、指针图片宽度、指针图片高度、奖品个数、旋转圈数等。<br /><br />
3.flashOver 函数是和程序的接口，用来处理获得的奖品和弹出层。
</div>
</div>
<div id="footer">
版权所有：刘淼和刘涛<br />
<a href="http://liumiao.me/">刘淼博客</a>- 爱玩户外的网页设计师，专注于用户体验、Web标准<br />
<a href="http://wchlt.blog.163.com/">刘涛博客
flash抽奖转盘通用模板
4星 · 超过85%的资源 需积分: 5 51 浏览量
2012-12-06
11:11:34
上传
评论 2
收藏 306KB ZIP 举报 
flash转盘活动.zip （22个子文件） 
flash转盘活动 
demo3.html 2KB
bg.png 36KB demo1.html 2KB demo4.html 2KB
btnOver.gif 6KB btnSuc.gif 5KB help sj_1.png 19KB sj_2.png 62KB
Thumbs.db 12KB loadFlash.js 2KB
btnStart.fla 30KB btnStart.gif 6KB jquery-1.7.min.js 92KB prize.png 50KB demo2.html 2KB Thumbs.db 31KB btnWait.gif 5KB pointer.png 4KB index.html 8KB
btnStart.swf 10KB pointer2.png 2KB flash.swf 3KB
- 1
- 2
- 3
前往页