说明:
此事例实现的效果是:Jquery 切换 flash ,好比切换图片效果一样! 外加 获取span传值。
分析:
flahs跟一般标签不同,本来是想着获取它的 src 然后给src 赋值,但是一直获取不到(新手,能力有限)。
后来想到给div追加项的方式,实现了切换效果,在这里分享一下。
备注:
1、你可以新建一个空网站,然后新建一个flash文件夹,放置4张图片,用来显示上一页,下一页切换
效果。
2、放置需要的flash。
代码:
<!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 runat="server"> <title>Jquery 切换 flash</title> <!-- 引入Jquery --> <script type="text/javascript" src="Script/jquery-1.3.2.min.js" language="javascript"></script> <!-- 为a标签设定样式 --> <style type="text/css"> a{ text-decoration:underline; color:#a8a8ad;} </style> </head> <body> <form id="form1" runat="server"> <!-- 这里给整个div设定了背景图片 --> <div style="1024px;height:768px;margin:0 auto; background-image:url('flash/bg.png'); background-repeat:no-repeat;"> <!-- 1、标题 --> <div style="1024px;height:60px;"> <br /> <h2> Jquery 切换 flash....</h2> </div> <!-- 2、中间 显示 flash div --> <div style="1024px;height:400px; text-align:center"> <div style="float:left; 15px;height:400px;" ></div> <!-- 2.1上一个 --> <div style="float:left;height:400px; "> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /> <img id="btnPre" src="flash/pre2.png" alt="pre" style="vertical-align: middle" align="middle" /></div> <!-- 2.2 、flash div --> <div id="divfs" style="margin:60px auto; 949px; height:363px; border:1; float:left ;"> <embed width="944px" height="360px" type="application/x-shockwave-flash" src="flash/FLASH1.swf" pluginspage="http://www.adobe.com/go/getflashplayer" /> </div> <!--- 2.3 下一个 --> <div style="float:left;"> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /> <img id="btnChange" src="flash/next2.png" alt="next"/> </div> </div> <!-- 3、底部显示切换 span 传值 --> <div style="1024px;height:200px;" > <!-- 3.1 span 区域 --> <div style="900px; float:left;margin-left:30px;margin-top:60px;"> <strong>选择:</strong> <a href="#"><span>1</span></a> <a href="#"><span>2</span></a> <a href="#"><span>3</span></a> <a href="#"><span>4</span></a> <a href="#"><span>5</span></a> <a href="#"><span>6</span></a> <a href="#"><span>7</span></a> <a href="#"><span>8</span></a> <a href="#"><span>9</span></a> <a href="#"><span>11</span></a> <a href="#"><span>12</span></a> <a href="#"><span>13</span></a> <a href="#"><span>14</span></a> <a href="#"><span>15</span></a> <a href="#"><span>16</span></a> <a href="#"><span>17</span></a> <a href="#"><span>18</span></a> <a href="#"><span>19</span></a> <a href="#"><span>21</span></a> <a href="#"><span>22</span></a> <a href="#"><span>23</span></a> <a href="#"><span>24</span></a> <a href="#"><span>25</span></a> <a href="#"><span></span></a> <a href="#"><span></span></a> <a href="#"><span></span></a> </div> <!-- 3.2 底部声明 --> <div style="1024px;margin-top:100px; float:left; text-align:center"> <span style="font-font-family:宋体;font-size:16px;">1999-2011 Show flash © <span style="color:Red;font-size:20px;">彩</span><del style="color:Green;">色</del><span style="font-size:16px;color:black;">C</span>o<span style="font-size:14px;Color:blue;">d</span><span style="color:Black;font-size:14px;">e</span></span> </div> </div> </div> <script type="text/javascript" language="javascript"> /** *这里可要 ,可不要 **/ $(document).ready(function () { $('#divfs').flash( { src: 'flash/FLASH1.swf', 947, height: 400 }, { version: 8 } ); }); //设定flash初始值 var i = 0; //给下一页绑定onclick事件,为divfs追加html = flash 脚本 $("#btnChange").bind("click", function (event) { i++; $("#divfs").html("<embed width='944px' height='360px' type='application/x-shockwave-flash' src='flash/FLASH" + i + ".swf' pluginspage='http://www.adobe.com/go/getflashplayer' />"); if (i >= 25) { i = 0; } }); //给上一页绑定onclick事件,如上所示, $("#btnPre").bind("click", function (event) { if (i <= 0) { i = 2; } i--; $("#divfs").html("<embed width='944px' height='360px' type='application/x-shockwave-flash' src='flash/FLASH" + i + ".swf' pluginspage='http://www.adobe.com/go/getflashplayer' />"); if (i >= 1) { i = 2; } }); //给上下页图片添加mouseover ,mouseout事件 $("#btnChange").mouseover(function (event) { $(this).attr("src", "flash/next.png"); }).mouseout(function (event) { $(this).attr("src", "flash/next2.png"); }); $("#btnPre").mouseover(function (event) { $(this).attr("src", "flash/pre.png"); }).mouseout(function (event) { $(this).attr("src", "flash/pre2.png"); }); //遍历所有的span标签,点击span标签时,将span内的文本作为flash的下标,追加divfs= flash 脚本 $("span").each(function (event) { var num2 = $(this).html(); $(this).click(function (event) { $("#divfs").html("<embed width='944px' height='360px' type='application/x-shockwave-flash' src='flash/FLASH" + num2 + ".swf' pluginspage='http://www.adobe.com/go/getflashplayer' />"); }); }); </script> </form> </body> </html>
效果预览:
1、
2、
3、
4、
目前先提供一半的Demo下载地址:[JqueryDemo]