自動排版 - HackMD

# 自動排版 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">  <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>  <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> ```