---
# System prepended metadata

title: 自動排版

---

# 自動排版
https://webformatter.com/
排版:CTRL+SHIFT+F
方法:ALT+SHITF+L
# 超酷炫特效
http://vegas.jaysalvat.com/documentation/transitions/
# vegas
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<link rel="stylesheet" href="http://jaysalvat.github.io/vegas/releases/latest/vegas.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="http://jaysalvat.github.io/vegas/releases/latest/vegas.js"></script>
<body>
    <div id="example">example</div>
    ...
     HTML内容
    ...
    <script>
    $('#example, body').vegas({
     slides: [
     { src: 'https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg' },
     { src: 'https://cdn.mos.cms.futurecdn.net/VSy6kJDNq2pSXsCzb6cvYF.jpg' },
     { src: '/image/kitty.jfif' },
     { src: '/image/kitty.jfif' }
     ]
    });
    </script>
    </body>
</html>
```
https://ithelp.ithome.com.tw/articles/10193995
# textillate
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

 <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
 <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
 <script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/textillate/0.4.0/jquery.textillate.min.js"></script>
<body>
    <h1 class="example" data-in-effect="fadeIn">Hello World</h1>
    <script>
        $( ".example" ).textillate();
    </script>
     <h1 class="example">
        <ul class="texts">
            <!--
                屬性設定[註1]
                data-in-effect: 進場效果
                data-out-effect: 出場效果
                data-in-shuffle: 進場使用隨機模式
                data-out-shuffle: 出場使用隨機模式
            -->
            <li data-out-effect="fadeOut" data-out-shuffle="true">Hello</li>
            <li data-in-effect="fadeIn">World</li>
        </ul>
    </h1>
    <script>
        $( ".example" ).textillate();
    </script>
</body>
</html>
```
https://ithelp.ithome.com.tw/articles/10192421
# datatables
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <!-- DataTables v1.10.16 -->
  <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
  <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<body>
    <table class="example">
        <thead>
            <tr>
                <td></td>
                ...
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                ...
            </tr>
        </tbody>
    </table>

    <script>
        $( ".example" ).DataTable({
            // 參數設定[註1]
            "bPaginate": true, // 顯示換頁
            "searching": true, // 顯示搜尋
            "info":	true, // 顯示資訊
            "fixedHeader": true, // 標題置頂
        });
    </script>
</body>
</html>
$(function(){
            $('#table').DataTable({
                "searching": true, //搜尋功能, 預設是開啟
                "paging": true, //分頁功能, 預設是開啟
                "ordering": true, //排序功能, 預設是開啟
                "lengthMenu": [10, 20],
                "pageinate":{
                    "first":"第一頁",
                    "previous":"上一頁",
                    "next":"下一頁",
                    "last":"最後一頁"
                }
            });
            

        })
```

# wow
https://timchen0607.medium.com/%E9%83%BD%E7%B5%A6%E6%88%91%E5%8B%95%E8%B5%B7%E4%BE%86-wow-js-%E5%88%86%E4%BA%AB-19f18dd6674e
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wow{
        
          width: 200px;
          height: 100px;
          margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 1%;
          display: block; 
          margin: 10px auto;
        }

            </style>
        
</head>
<link rel="stylesheet" href="http://jaysalvat.github.io/vegas/releases/latest/vegas.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="http://jaysalvat.github.io/vegas/releases/latest/vegas.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<body>

<img src="https://upload.cc/i1/2019/11/09/Rn1Zji.png" draggable="false" title="bounce" class="animated bounce infinite delay-2s">
<img src="https://upload.cc/i1/2019/11/09/H1zVUS.png" draggable="false" title="flash" class="animated flash infinite delay-2s">
<img src="https://upload.cc/i1/2019/11/09/fogIDC.png" draggable="false" title="pulse" class="animated pulse infinite delay-2s">
<img src="https://upload.cc/i1/2019/11/09/ZU0vln.png" draggable="false" title="rubberBand" class="animated rubberBand infinite delay-2s">
<img src="https://upload.cc/i1/2019/11/09/v2i65J.png" draggable="false" title="headShake" class="animated headShake infinite delay-2s">
<img src="https://upload.cc/i1/2019/11/09/EB69Xj.png" draggable="false" title="swing" class="animated swing infinite delay-2s">
<img src="https://upload.cc/i1/2019/11/09/1HtkGn.png" draggable="false" title="tada" class="animated tada infinite delay-2s">
<img src="https://upload.cc/i1/2019/11/09/y4qOsY.png" draggable="false" title="wobble" class="animated wobble infinite delay-2s">
<img src="https://upload.cc/i1/2019/11/09/nPAr0t.png" draggable="false" title="jello" class="animated jello infinite delay-2s">
<img src="https://upload.cc/i1/2019/11/09/L46taf.png" draggable="false" title="fadeInUp" class="animated fadeInUp infinite delay-2s">
<img src="https://upload.cc/i1/2019/11/09/WFzjID.png" draggable="false" title="fadeOutDown" class="animated fadeOutDown infinite delay-2s">
<img src="https://upload.cc/i1/2019/11/09/ibdam4.png" draggable="false" title="flipInX" class="animated flipInX infinite delay-2s">
<img src="https://upload.cc/i1/2019/11/09/ZT1dHr.png" draggable="false" title="flipOutY" class="animated flipOutY infinite delay-2s">
<img src="https://upload.cc/i1/2019/11/09/1uWObU.png" draggable="false" title="hinge" class="animated hinge infinite delay-2s">
<img src="https://upload.cc/i1/2019/11/09/7F6gp0.png" draggable="false" title="jackInTheBox" class="animated jackInTheBox infinite delay-2s">
<img src="https://upload.cc/i1/2019/11/09/4ENuUR.png" draggable="false" title="rollIn" class="animated rollIn infinite delay-2s">
<img src="https://upload.cc/i1/2019/11/09/HI0jM3.png" draggable="false" title="rollOut" class="animated rollOut infinite delay-2s">
<img src="https://upload.cc/i1/2019/11/09/WLJopD.png" draggable="false" title="zoomInDown" class="animated zoomInDown infinite delay-2s">
<img src="https://upload.cc/i1/2019/11/09/HCOFmL.png" draggable="false" title="zoomOutLeft" class="animated zoomOutLeft infinite delay-2s">
<img src="https://upload.cc/i1/2019/11/09/N9gSv7.png" draggable="false" title="slideInDown" class="animated slideInDown infinite delay-2s">
<img src="https://upload.cc/i1/2019/11/09/QFcXdo.png" draggable="false" title="slideOutRight" class="animated slideOutRight infinite delay-2s">
<img src="https://upload.cc/i1/2019/11/09/yOpXLl.png" draggable="false" title="heartBeat" class="animated heartBeat infinite delay-2s">
    <div id="example">example</div>
    1231231231231
    <script>
    $('body').vegas({
     slides: [
     { src: 'https://media0.giphy.com/media/bJcjR4PyC5uFPMVHLt/giphy.webp'},    
     { src: '/image/yellow.jpg' },
     { src: '/image/white.jpg' },
     { src: '/image/pink.jpg' },
     { src: '/image/blackcat.jpg' },
     { src: '/image/1306.gif'}
     ],
     transition: 'blur',
     animation: 'kenburns' 

     
    });
    new WOW().init();

    </script>
</body>
</html>
```