特效描述:原生js實現 彈性拖動 交互切換特效,原生js實現彈性拖動交互切換特效
代碼結構
1. 引入CSS
<link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/demo.css" /> <link rel="stylesheet" type="text/css" href="css/component.css" />
2. 引入JS
<script src="js/modernizr.custom.js"></script> <script src="js/draggabilly.pkgd.min.js"></script> <script src="js/elastiStack.js"></script>
3. HTML代碼
<div class="container"> <ul id="elasticstack" class="elasticstack"> <li><img src="img/1.jpg" alt="01"/><h5>Saudade</h5></li> <li><img src="img/2.jpg" alt="02"/><h5>Tuqburni</h5></li> <li><img src="img/3.jpg" alt="03"/><h5>Retrouvailles</h5></li> <li><img src="img/4.jpg" alt="04"/><h5>Onsra</h5></li> <li><img src="img/5.jpg" alt="05"/><h5>Mamihlapinatapai</h5></li> <li><img src="img/6.jpg" alt="06"/><h5>Koi No Yokan</h5></li> </ul> </div><!-- /container --> <script> new ElastiStack( document.getElementById( 'elasticstack' ) ); </script> <div style="text-align:center;clear:both"> </div>