手机H5页面（文字滚动、适配各种屏幕、jQuery ajax包含cookie）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/caomage/article/details/82912637

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

        }
    });