手機H5頁面(文字滾動、適配各種螢幕、jQuery ajax包含cookie)
阿新 • • 發佈:2018-11-03
###手機H5頁面
###文字滾動
使用li標籤,通過改變margin-top實現向上滾動。
程式碼:
js:
carousel: function() { var items = $('.roll').find('li'); console.log(items); var $itemOne = items.eq(0); var margin_top = 0; var margin_top_height = $itemOne.height(); var lastitems = margin_top_height * items.length; var stay_time = 2000; //停留時間 var current_time = 0; if (items.length > 0) { setInterval(function() { if (margin_top % margin_top_height == 0) { //停留 current_time += 50; if (current_time <= stay_time) { return; } current_time = 0; } margin_top += 1; if (margin_top == lastitems) { margin_top = 0; } $itemOne.css('margin-top', '-' + margin_top + 'px'); }, 50); } },
html:
<ul class="roll_width"> <li> <span class="><img class="" src="images/img.png" alt=""></span> <span class="">張三</span> <span class="">男</span> <span class="">25</span> </li> <li> <span class=""><img class="" src="images/img.png" alt=""></span> <span class="setwidth">李四</span> <span class="setwidth3">男</span> <span class="setwidth2">25</span> </li> <li> <span class=""><img class="" src="images/img.png" alt=""></span> <span class="">王五</span> <span class="">男</span> <span class="">35</span> </li> </ul>
###手機頁面適配各種螢幕
使用手淘團隊的flexible:
<script src="https://s4.ssl.qhres.com/!9259ca14/flexible.js"></script>
<script src="https://lib.baomitu.com/zepto/1.2.0/zepto.min.js"></script>
###jQuery ajax包含cookie
$.ajax({ url: url, data: ret, type: "GET", async: true, xhrFields: { withCredentials: true }, crossDomain: true, dataType: 'json', timeout: 2000, success: function(ret) { }, error: function(xhr, type) { } });