专栏首页前端菜鸟变老鸟手机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) {

        }
    });

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ESLint配置信息完整版

    从入门到进错门
  • Vue组件-爬取页面表格中的数据并保存为csv文件

    实际开发过程中需要将前端以表格形式展示的数据保存为csv格式的文件,由于数据涉及到的种类比较多,格式化都是放在前端进行的,所以后端以接口下载的形式返回csv文件...

    从入门到进错门
  • 知识点:回到顶部(减速)、滚动禁用和启用、判断滚动条位置显示某元素、使用jQuery判断字符串是不是json格式

    方法: 1. 锚点 2. scrollTop 3. scrollTo 4. scrollBy 5. scrollIntoView

    从入门到进错门
  • Mac全栈开发-Markdown手册

    Headings from h1 through h6 are constructed with a # for each level:

    用户1065635
  • bootstrap 标签与徽章

    <span class="label label-default">默认标签</span> <span class="label label-primary"...

    用户5760343
  • Ubuntu Touch环境搭建

    最近搞了一下Nexus 5的MultiRom Manger,体验了一把Ubuntu Touch和Android L,总体感觉还不错,不过Android L的NF...

    sickworm
  • 学点算法搞安全之apriori

    *原创作者:兜哥,本文属FreeBuf原创奖励计划,未经许可禁止转载 前言 在企业安全建设专题中偶尔有次提到算法的应用,不少同学想深入了解这块,所以我专门开了一...

    FB客服
  • 基于图像的场景三维建模

    三月已过半旬,已是春暖花开的季节,也是我们科研爱好者最繁忙的一段时间。春天的到来,意味着新一届的学子即将离开学校,走向自己人生的第二段道路,也意味着您年伊始,所...

    计算机视觉研究院
  • 注册于1998年的域名postre.com以1万美元价格结拍

    米市每天都有惊喜等着大家,之前发布了关于“家庭贷款”Home.loans、“代币”token.com高价易主的消息。原来这只是众多惊喜之一,最近p...

    躲在树上的域小名
  • 国外DIY牛人教你做Wifi机器人(最全教程)

    一、前言 Wifi机器人(Wifi Robot):其实是一辆能通过互联网,或500米以外的笔记本无线设施来远程控制的遥控汽车。由于在车上配备了一个网络摄像...

    机器人网

扫码关注云+社区

领取腾讯云代金券