1. 程式人生 > >手機H5頁面(文字滾動、適配各種螢幕、jQuery ajax包含cookie)

手機H5頁面(文字滾動、適配各種螢幕、jQuery ajax包含cookie)

###手機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) {

        }
    });