zoukankan      html  css  js  c++  java
  • Jquery 切换 flash

    说明:

       

        此事例实现的效果是: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]

  • 相关阅读:
    【JS】【8】拼接字符串
    【JS】【7】获取粘贴板的内容
    【Eclipse】【3】checkstyle插件
    【Eclipse】【2】遇到的问题
    android手机短信监听器,监听到的短信发送到web服务器,完整源码分享
    android手机号归属地查下案例源码
    免费web api接口大全
    android读取远程图片案例
    android向web提交参数的4种方式总结,附带网站案例源码
    csu 10月 月赛 B 题 Scoop water
  • 原文地址:https://www.cnblogs.com/307914070/p/1933634.html
Copyright © 2011-2022 走看看