前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >手机H5页面(文字滚动、适配各种屏幕、jQuery ajax包含cookie)

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

作者头像
从入门到进错门
发布2018-10-10 16:41:23
4.5K0
发布2018-10-10 16:41:23
举报

###手机H5页面

###文字滚动

使用li标签,通过改变margin-top实现向上滚动。

代码:

js:

代码语言:javascript
复制
 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:

代码语言:javascript
复制
<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:

代码语言:javascript
复制
<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

代码语言:javascript
复制
$.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) {

        }
    });
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018年09月30日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档