jQuery Fancybox插件使用參數詳解

原創 賣逗逗 2020-06-16 15:10

今天給大家介紹的jquery圖片播放插件叫Fancybox，相比LightBox來說，Fancybox相對龐大點，配置也更豐富一些，相信你會喜歡的。

Fancybox的項目主頁地址：http://fancybox.net/


項目使用列：<#global path = request.getContextPath()>
<script type="text/javascript" src="${path}/js/requesturl/Requesturl.js"></script>
<script type="text/javascript" src="${path}/js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="${path}/js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="${path}/js/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript">
//展開收起
$(".imgchange").click(function(){
if($(this).attr("src")=="${path}/images/sc_open.png"){
$(this).parent().parent().find(".ad-gallery").show();
$(this).attr("src","${path}/images/sc_close.png");
}else{
$(this).parent().parent().find(".ad-gallery").hide();
$(this).attr("src","${path}/images/sc_open.png");
}
})

/*
*上傳組件初始化
*/
function initUploadComp(select,template,needFlag,divId){
template=$("#"+template);
if(select=="" || select==undefined){
        select="uploadify";
        }
$("#"+select).uploadify({
        'swf'         : '${path}/js/uploadify/uploadify.swf', //是組件自帶的flash，用於打開選取本地文件的按鈕    
        //'width'          : 120,
       // 'height'         : 30,
        'uploader'         : '${path}/uploadAction!uploadFiles.action',//處理上傳的路徑，這裏使用Struts2是XXX.action    
        'fileObjName'   : 'uploadify',//和input的name屬性值保持一致就好，Struts2就能處理了   
        'queueID'         : 'fileQueue_'+template.attr("filetype"),   
        'auto'           : true,//是否選取文件後自動上傳   
        'multi'           : true,//是否支持多文件上傳   
        'queueSizeLimit'   : 10, //上傳隊列最大數目
        'buttonText'     : '上傳掃描件',//按鈕上的文字   
        'displayData'     : 'speed',//有speed和percentage兩種，一個顯示速度，一個顯示完成百分比    
          'fileTypeDesc'   : '支持格式:jpg/jpeg/png/bmp/txt/doc/docx/pdf.', //如果配置了以下的'fileExt'屬性，那麼這個屬性是必須的    
        'fileTypeExts'   : '*.jpg;*.jpeg;*.png;*.bmp;*.txt;*.doc;*.docx;*.pdf',//允許的格式  
        'fileSizeLimit'    : '2000KB',
       // 'buttonImage'    : '${path}/js/uploadify/${path}/images/up.gif', //自定義圖片
       // 'formData'         : {'filetype' : '日本','dataid':$("#imgobj").attr("dataid")},//傳遞參數
       
        'onSelect':function(e, queueId, fileObj) {//選擇文件時觸發，該函數有三個參數
            $("#queueCompleteFlag").val("0");
        },
        'onQueueComplete':function(queueData) {//當序列中所有的文件上傳完成調用方法
            //alert(queueData.uploadsSuccessful + ' files were successfully  uploaded.');
            $("#queueCompleteFlag").val("1");
        },
        'onUploadSuccess' : function (file, data, response){
        var jsonres=eval('('+data+')');
           if(jsonres["succesflag"]=="success"){
            $("#imgobj").attr("dataid",jsonres["dataid"])
            //alert("【"+file.name+"】文件上傳成功!"+jsonres["dataid"]);
            var filename=file.name;
var fileExt=(/[.]/.exec(filename)) ? /[^.]+$/.exec(filename.toLowerCase()) : '';
            if(filename.length>10){
            filename=filename.substring(0,8)+"...";
            }
            if(fileExt=="doc"||fileExt=="pdf"||fileExt=="docx"||fileExt=="txt"){
                var imgtemplate='<li id="'+jsonres["dataid"]+'"><a class="downloadnotimg"  href="'+apachepath+"/"+jsonres["filepath"]+'"><img style="width:110px;height:69px" src="${path}/images/mark.jpg" class="image0 '+jsonres["dataid"]+'"></a><p title="'+file.name+'">'+filename+'</p></a><img  dataid="'+jsonres["dataid"]+'" id="'+jsonres["dataid"]+'" src="${path}/js/adgallery/ad_closed.png" class="closed" title="刪除" οnclick="" /></li>';
            }else{
            var imgtemplate='<li id="'+jsonres["dataid"]+'"><a class="fileImg"  href="'+apachepath+"/"+jsonres["filepath"]+'"><img style="width:110px;height:69px" src="'+apachepath+"/"+jsonres["scaleImagefilepath"]+'" class="image0 '+jsonres["dataid"]+'"></a><p title="'+file.name+'">'+filename+'</p></a><img  dataid="'+jsonres["dataid"]+'" id="'+jsonres["dataid"]+'" src="${path}/js/adgallery/ad_closed.png" class="closed" title="刪除" οnclick="" /></li>';
            }            
            template.find("#default").remove()
            template.find(".ad-thumb-list").append(imgtemplate);
            changeImg(template);
            delImg(jsonres["dataid"],template,"",needFlag,divId);
//alert("needFlag=="+needFlag+"   divId==="+divId+"   queueCompleteFlag=="+$("#queueCompleteFlag").val());
          //給圖片類型附近註冊單擊事件
          $("a.fileImg").fancybox();
      //給非圖片標籤註冊單擊不響應的事件
      downloadnotimgClick(divId);
            rushintofileinfo(template.attr("id"),template.attr("filetypename"),"del");
           
           }else{
            alert("【"+file.name+"】文件上傳失敗,請重試或者系統管理員聯繫!");
           }
        },
        'onUploadError'    : function(file, errorCode, errorMsg, errorString) {
            //alert('文件' + file.name + ' 不能夠被上傳: ' + errorString);
        },
        'onUploadStart' : function(file) {
        if($("#businessdataid").val()=="" || $("#businessdataid").val()==undefined){
        alert("請先保存相關基本信息！");
        $('#'+select).uploadify('cancel', '*');
        return;
        }
       
        $("#"+select).uploadify('settings','formData',{'filetype' : template.attr("filetype"),'dataid':$("#imgobj").attr("dataid"),'basebusinessuuid':$("#basebusinessuuid").val(),'businessdataid' : $("#businessdataid").val(),'relid':$(".button3",parent.document).attr("relid")});
      }
    });
    }
    /*
*給非圖片標籤註冊單擊不響應的事件
*/
function downloadnotimgClick(divId){
$("#"+divId).bind('onclick',function(){
        return ;
       });
}
     
   /*
*改變圖片顯示效果
*/
function changeImg(template){
var galleries = template.find('.ad-gallery').adGallery();
  // $('.thumbwrapper').nailthumb({width:90,height:60});
}

/*
*刪除圖片
*/
function delImg(obj,template,dleflag){
var dataid="";
if(typeof(obj)=="object"){
dataid=$(obj).attr("dataid");
}else{
dataid=obj;
}
$("#"+dataid).click(function(){
if(this.dataid!=""){
   $.post("${path}/uploadAction!delfiles.action?dataid="+dataid,function(data){
    var jsonres=eval('('+data+')')
    if(jsonres["succesflag"]=="success"){
    $("#"+dataid).remove();
    if(dleflag=="initdel"){
    changeImg($("#"+template));
    }else{
    changeImg(template);
    }
    }else{
    alert("刪除失敗，請重試或與管理員聯繫！");
    }
   })
}else{
alert("沒有可以刪除的圖片信息！")
}
});
}
/*
*刪除圖片
*/
function delImg(obj,template,dleflag){
var dataid="";
if(typeof(obj)=="object"){
dataid=$(obj).attr("dataid");
}else{
dataid=obj;
}
$("#"+dataid).click(function(){
if(this.dataid!=""){
   $.post("${path}/uploadAction!delfiles.action?dataid="+dataid,function(data){
    var jsonres=eval('('+data+')')
    if(jsonres["succesflag"]=="success"){
    $("#"+dataid).remove();
    if(dleflag=="initdel"){
    changeImg($("#"+template));
    }else{
    changeImg(template);
    }
    }else{
    alert("刪除失敗，請重試或與管理員聯繫！");
    }
   })
}else{
alert("沒有可以刪除的圖片信息！")
}
});
}

</script>
<input type="hidden" id="queueCompleteFlag" name="queueCompleteFlag" >
   <#--下載非圖片文檔-->
        <form action="${path}/uploadAction!downLoadFile.action" id="downloadform">
        <input type="hidden" name="filepath" id="filepath">
        </form>
    <#--下載非圖片文檔結束-->
<#assign apachepath=stack.findValue("@com.ligitalsoft.help.ConfigUtil@getNodeVal('apache_url')")>
<#list subjecinfos as subject>
      <div id="${subject.subCode}" style="" filetype="${subject.subCode}" filetypename="${subject.subName}" needFlag="${subject.needFlag}" class="filetypes">
       <div class="itembox">
         <h1 class="selcet"><img class="imgchange" src="${path}/images/sc_close.png" />
          <strong class="filecaption">${subject.subName}<#if subject.needFlag == "1"><font color="red">*(必須上傳)</font></#if></strong>
          <span class="code-text"><b><input type='file' subCode="${subject.subCode}" name='uploadify' id='uploadify${subject_index}' class="uploadify" filetype="${subject.subCode}"/></b></span>
          <script>
          initUploadComp("uploadify${subject_index}","${subject.subCode}","${subject.needFlag}","${subject.subCode}");
          if($.query.get('readonlyflag')=="yes" ||  $("#readonlyflag",parent.parent.document).val()=="yes" ||  $("#readonlyflag").val()=="yes"){//只讀狀態不能上傳
          $("#uploadify${subject_index}").hide();
          }
          $(".uploadify-button-text").each(function(){
$(this).addClass("textadd");
});
          </script>
         </h1>
         <div id="gallery" class="ad-gallery">
          <#if redirect=="bigimg"><#--需要大圖顯示-->
            <div class="ad-image-wrapper" style=""> </div>
           <#else>
            <div class="ad-image-wrapper" style="display:none"> </div>
           </#if>
           <div class="ad-controls" style="display:none"> </div>
           <div class="ad-nav">
             <div class="ad-thumbs">
               <ul class="ad-thumb-list">
                 <#list basefileInfos as fileinfo>
                  <#if subject.subCode==fileinfo.filetype>
<#if fileinfo.fileName?substring(fileinfo.fileName?index_of(".")+1)=="txt"||fileinfo.fileName?substring(fileinfo.fileName?index_of(".")+1)== "doc"||fileinfo.fileName?substring(fileinfo.fileName?index_of(".")+1)== "pdf" ||fileinfo.fileName?substring(fileinfo.fileName?index_of(".")+1)== "docx" > 
                                 <li id="${fileinfo.id}"><a class="downloadnotimg" href="#" reallydocpath="${fileinfo.url}"><img style="width:110px;height:69px" src="${path}/images/mark.jpg" class="image0 ${fileinfo.id}"></a><p title="${fileinfo.fileName}"><#if fileinfo.fileName?length gt 7>${fileinfo.fileName[0..6]}...<#else>${fileinfo.fileName}</#if></p></a><img  id="${fileinfo.id}" dataid="${fileinfo.id}" src="${path}/js/adgallery/ad_closed.png" class="closed" title="刪除" οnclick="delImg(this,${fileinfo.filetype},'initdel')" /></li>
                     <#else>
                                 <li id="${fileinfo.id}"><a class="fileImg" href="${apachepath}/${fileinfo.url}"><img style="width:110px;height:69px" src="${apachepath}/${(fileinfo.scaleImageUrl)?default(fileinfo.url)}" class="image0 ${fileinfo.id}"></a><p title="${fileinfo.fileName}"><#if fileinfo.fileName?length gt 7>${fileinfo.fileName[0..6]}...<#else>${fileinfo.fileName}</#if></p></a><img  id="${fileinfo.id}" dataid="${fileinfo.id}" src="${path}/js/adgallery/ad_closed.png" class="closed" title="刪除" οnclick="delImg(this,${fileinfo.filetype},'initdel')" /></li>
        </#if>
                 
    </#if>
                 </#list>
               </ul>
             </div>
           </div>
         </div>
         <div title="進度條碼" class="zz_show" id="fileQueue_${subject.subCode}" style="display:inline;"></div>
       </div>
       <div class="clear"></div>
        </div>
     
</#list>
<script>
$(document).ready(function() {
     var galleries = $('.ad-gallery').adGallery();
     $("a.fileImg").fancybox();
       
       //給非圖片標籤註冊單擊不響應的事件
       $(".downloadnotimg").bind('onclick',function(){
        return ;
       });
       //給非圖片標籤註冊下載事件
       $(".downloadnotimg").bind('dblclick',function(){
        $("#filepath").val($(this).attr("reallydocpath"));
        $("#downloadform").submit();
       });
});
$(function() {

if($.query.get('readonlyflag')=="yes" ||  $("#readonlyflag",parent.parent.document).val()=="yes" ||  $("#readonlyflag").val()=="yes"){//只讀狀態沒有刪除圖標
$(".closed").each(function(){
$(this).hide();
});
$("#fileAndIconDivID").hide();
}

var seldmenu=$(".button3",parent.document);
if(typeof(seldmenu)!="object"){
seldmenu=$(".button3",parent.parent.document)
}
/*首次進入統計下缺失的附件類型,方便進行附件校驗*/
$(".filetypes").each(function(){
if($(this).find("li").size()==0){//對應附件類型無數據則記錄
rushintofileinfo($(this).attr("filetype"),$(this).attr("filetypename"),"add");
}
});
});
//壓入爲空的附件信息 keystr 以菜單id和附件類型作key值
function rushintofileinfo(filecode,valstr,processtype){
var seldmenu=$(".button3",parent.document);
var tempplateid = $.query.get('tempplateid');
if(typeof(seldmenu)!="object"){
seldmenu=$(".button3",parent.parent.document)
tempplateid = seldmenu.attr("tempplateid");
}
if(processtype=="add"){
if(parent.fileinfomap!=undefined){
parent.fileinfomap.put(tempplateid+":"+filecode,valstr);
}else{
parent.parent.fileinfomap.put(tempplateid+":"+filecode,valstr);
}
}else if(processtype=="del"){
if(parent.fileinfomap!=undefined){
parent.fileinfomap.remove(tempplateid+":"+filecode);
}else{
parent.parent.fileinfomap.put(tempplateid+":"+filecode);
}
}
}
</script>

Fancybox的特點如下：

  1. 可以支持圖片、html文本、flash動畫、iframe以及ajax的支持
  2. 可以自定義播放器的CSS樣式
  3. 可以以組的形式進行播放
  4. 如果將鼠標滾動插件（mouse wheel plugin）包含進來的話Fancybox還能支持鼠標滾輪滾動來翻閱圖片
  5. Fancybox播放器支持投影，更有立體的感覺

Fancybox使用方法：

1、引入jquery核心庫和Fancybox插件庫

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

可選 - 如果需要用到fancy transition（一些動畫效果）你還需要引入以下腳本

<script type="text/javascript" src="/fancybox/jquery.easing-1.4.pack.js"></script>

可選 - 如果需要支持鼠標滾輪滾動效果你還需要引入以下腳本

<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>

2、添加樣式表文件

<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen">

3、在頁面上創建鏈接元素

A、圖片元素

<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" kesrc="image_small.jpg" alt=""></a>

B、普通文本

<a id="inline" href="#data" kesrc="#data">This shows content of element who has id="data"</a>
 
<div style="display: none;">
    <div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>

C、Iframe

<a href="http://www.example?iframe">This goes to iframe</a>
 
或者
 
<a class="iframe" href="http://www.example">This goes to iframe</a>

D、Ajax

<a href="http://www.example/data.php">This takes content using ajax</a>

如果你要顯示描述信息，可以在鏈接上加上title，將描述信息放到title中。

4、最終的jquery初始化代碼

$(document).ready(function() {
 
    /* 最基本的，使用了默認配置 */
     
    $("a#single_image").fancybox();
     
    /* 使用了自定義配置 */
     
    $("a#inline").fancybox({
        'hideOnContentClick': true
    });
 
    /* 一下配置支持組播放 */
     
    $("a.group").fancybox({
        'transitionIn'  :   'elastic',
        'transitionOut' :   'elastic',
        'speedIn'       :   600, 
        'speedOut'      :   200, 
        'overlayShow'   :   false
    });
     
});

用rel標籤來創建相冊

<a class="grouped_elements" rel="group1" href="image_big_1.jpg"><img src="image_small_1.jpg" alt=""></a>
<a class="grouped_elements" rel="group1" href="image_big_2.jpg"><img src="image_small_2.jpg" alt=""></a>     
 
<a class="grouped_elements" rel="group2" href="image_big_3.jpg"><img src="image_small_3.jpg" alt=""></a> 
<a class="grouped_elements" rel="group2" href="image_big_4.jpg"><img src="image_small_4.jpg" alt=""></a> 
 
$("a.grouped_elements").fancybox();

Fancybox的API和配置選項說明

屬性名 默認值 簡要說明
padding 10 瀏覽框內邊距，和css中的padding一個意思
margin 20 瀏覽框外邊距，和css中的margin一個意思
opacity false 如果爲true，則fancybox在動畫改變的時候透明度可以跟着改變
modal false 如果爲true，則'overlayShow' 會被設成 'true' ， 'hideOnOverlayClick', 'hideOnContentClick', 'enableEscapeButton', 'showCloseButton' 會被設成 'false'
cyclic false 如果爲true，相冊會循環播放
scrolling 'auto' 設置overflow的值來創建或隱藏滾動條，可以設置成 'auto', 'yes', or 'no'
width 560 設置iframe和swf的寬度，如果 'autoDimensions'爲 'false'，這也可以設置普通文本的寬度
height 340 設置iframe和swf的高度，如果 'autoDimensions'爲 'false'，這也可以設置普通文本的高度
autoScale true 如果爲true，fancybox可以自適應瀏覽器窗口大小
autoDimensions true 在內聯文本和ajax中，設置是否動態調整元素的尺寸，如果爲true，請確保你已經爲元素設置了尺寸大小
centerOnScroll false 如果爲true，當你滾動滾動條時，fancybox將會一直停留在瀏覽器中心
ajax { } 和jquery的ajax調用選項一樣
注意: 'error' and 'success' 這兩個回調事件會被fancybox重寫
swf {wmode: 'transparent'} swf的設置選項
hideOnOverlayClick true 如果爲true則點擊遮罩層關閉fancybox
hideOnContentClick false 如果爲true則點擊播放內容關閉fancybox
overlayShow true 如果爲true，則顯示遮罩層
overlayOpacity 0.3 遮罩層的透明度（範圍0-1）
overlayColor '#666' 遮罩層的背景顏色
titleShow true 如果爲true，則顯示標題
titlePosition 'outside' 設置標題顯示的位置.可以設置成 'outside', 'inside' 或 'over'
titleFormat null 可以自定義標題的格式
transitionIn, transitionOut 'fade' 設置動畫效果. 可以設置爲 'elastic', 'fade' 或 'none'
speedIn, speedOut 300 fade 和 elastic 動畫切換的時間間隔, 以毫秒爲單位
 
changeSpeed 300 切換時fancybox尺寸的變化時間間隔（即變化的速度），以毫秒爲單位
changeFade 'fast' 切換時內容淡入淡出的時間間隔（即變化的速度）
easingIn, easingOut 'swing' 爲 elastic 動畫使用 Easing
showCloseButton true 如果爲true，則顯示關閉按鈕
showNavArrows true 如果爲true，則顯示上一張下一張導航箭頭
enableEscapeButton true 如果爲true，則啓用ESC來關閉fancybox
onStart null 回調函數，加載內容是觸發
onCancel null 回調函數，取消加載內容後觸發
onComplete null 回調函數，加載內容完成後觸發
onCleanup null 回調函數，關閉fancybox前觸發
onClosed null 回調函數，關閉fancybox後觸發

 
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

前端js Aes對本地存儲數據進行加密解密

1、npm install crypto-js 2、編寫LocalStorage類 const CryptoJS = require('crypto-js'); class LocalStorage { construct

IT~少年人 2020-07-08 00:02:52

JavaScript 獲取當前站點的域名和端口號

例：本地IP形式：  http://127.0.0.1:8083/admin          線上域名： https://www.csdn.net/ 獲取域名（第一種方法）：location.host   =    127.0.0.1:

花化世界 2020-06-30 05:30:26

ajax異步下載文件並判斷狀態

今日需要對公司的代碼進行更新，發現之前有的文件丟失導致下載不到直接跳轉到一個空的頁面，第一反應是應該沒有用異步請求，直接用a標籤或者表單之類的處理下載文件請求了。 但是ajax似乎是不支持下載文件的，會把流信息當初文本類處理。。。自然不能

哔哔小子 2020-06-27 23:32:30

ajax請求實用的封裝方法

個人身爲一個java後端開發，對js的閉包簡單理解爲跨方法訪問變量值，放到java裏就是方法A能使用方法B中的變量。 今天寫代碼時看到公司之前同事寫的ajax到處都是，沒有任何封裝，需要優化一下。   項目中的ajax到處都是這類代碼：

哔哔小子 2020-06-27 23:32:30

Js實時監聽input輸入框值變化

<input oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" > <script> // 監聽input輸入框信

itfallrain 2020-06-26 15:58:21

VUE 常規截取和特殊字符之前之後截取

1：平常使用的 let str = 'abcdef'; // 0 str = str.slice(0);//返回整個字符串 abcdef str = str.substring(0);//返回整個字符串 abcdef st

itfallrain 2020-06-26 15:58:16

Vue怎麼判斷對象是否爲空

1: Vue怎麼判斷對象是否爲空 JSON.stringify(evtValue)=='{}' Object.keys(xxxx).length==0 2:js判斷對象是否爲空對象的幾種方法 1.將json對象轉

itfallrain 2020-06-26 15:58:16

firefox下JS動態創建的form表單元素獲取不到值的問題

今天遇到個問題，在Firefox下用Javascript動態創建input元素，在服務器端獲取不到值。 我一點點的刪代碼，刪到最後才發現嵌套的問題。 <table> <form> <tr><td></td></tr> ...... <

超级马里奥2020 2020-06-26 15:44:19

JavaScript圓形鐘錶效果代碼實例

分享一段代碼實例，它實現了利用js實現了自動讀取本地時間的圓形鐘錶效果。 代碼實例如下: 0010020030040050060070080090100110120130140150160170180190200210220230

Return_KB 2020-06-24 23:20:33

js點擊當前鏈接背景變色其他鏈接恢復原來背景色

可能大家都見過這樣的效果，點擊一個鏈接背景會變色，當再點擊其他鏈接的時候，之前被點擊的鏈接背景顏色又會恢復。下面就通過代碼實例介紹一下如何實現此效果。 代碼如下: [HTML] 純文本查看 複製代碼運行代碼010203040506

Return_KB 2020-06-24 23:20:33

商品搶購倒計時效果

現在比較流行商品搶購活動，爲了達到比較人性化的效果，通常有一個倒計時。 下面分享一個比較簡陋的商品搶購倒計時效果。 代碼實例如下: 010203040506070809101112131415161718192021222324

Return_KB 2020-06-24 23:20:22

springboot開發環境下搭建ftp+nginx圖片服務器以及其他文件的存儲

一、在搭建一個ftp服務器用於存儲文件 二、下載nginx，安裝完成後更改配置文件 server { listen 80; server_name localhost; #

Return_KB 2020-06-24 23:20:10

前端jq實現中英文切換（i18n國際化方式，apicloud打包後也適用）

1.項目文件及目錄 2.準備js github下載地址：https://github.com/T-baby/jquery.i18n/releases 3.頁面代碼 <!DOCTYPE html> <html> <hea

木易66丶 2020-06-23 21:55:52

Ecahrts餅圖參數詳解

https://blog.csdn.net/sleepwalker_1992/article/details/82532210

木易66丶 2020-06-23 14:11:52

js粒子特效——particles

鏈接：https://pan.baidu.com/s/1KqsZ5I8Qjz_J7ysQtw8tMw  提取碼：qy38  1.下載並引入particles.js 2.<div class="linebox"><div id="parti

木易66丶 2020-06-23 14:11:39