在没结合css3的transform实现平滑过渡前，我都是用的jquery的animate方法，此方法在PC端基本看不出来有稍微卡顿的现象，但是在性能不高的手机上使用该方法，就会有明显的卡顿现象，不够平滑，而且，在移动端H5页面中很多人使用的js库是zeptoJS，所以要想使用animate方法还要额外引用一个fx.js的插件，这无疑又增加了页面的体积，增加了服务器的请求负担，这显然不是最好的解决办法。那么，今天，本人就给大家分享一个利用css3的transform并结合transition来实现我们常见的无缝间歇平滑向上滚动的特效，其实就是开启硬件加速。

html code:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<title>Document</title>

<style>

*{margin:0;padding:0;}

li{list-style:none;}

body{line-height:1.5;font-size:14px;}

.scroll{display:inline-block;overflow:hidden;position:relative;height:30px;}

.scroll ul{transform:translateY(0);}

.animate{-webkit-transition:all .3s ease-out;}

.scroll li{overflow:hidden;display:-webkit-box;margin-left:10px;width:90%;height:30px;line-height:30px;color:#333;text-overflow:ellipsis;-webkit-line-clamp:1;-webkit-box-orient:vertical;white-space:normal;}

</style>

<script src="zepto.min.js"></script>

</head>

<body>

<div class="scroll">

    <ul>

        <li>2016高颜值拍照手机：一言不合秒单反</li>

        <li>细说奥运中国女排的各「大长腿」</li>

        <li>开学季来了 年轻人如何选择第一台笔记本？</li>

        <li>六大零食是缓解痛经好帮手 ！</li>

    </ul>

</div>

</body>

</html>

js code:

$(function(){

    var scrollDiv = $(".scroll"),

        $ul = scrollDiv.find("ul"),

        $li = scrollDiv.find("li"),

        $length = $li.length,

        $liHeight = $li.height(),

        num = 0;

    if(scrollDiv.length == 0){

        return;

    }

    if($length > 1){

        $ul.append($li.eq(0).clone());

        setInterval(

            function(){

                num++;

                $ul.addClass("animate").css("-webkit-transform","translateY(-"+ $liHeight*(num) +"px)");

                setTimeout(

                    function(){

                        if(num == $length){

                            $ul.removeClass("animate").css("-webkit-transform","translateY(0)");

                            num = 0;

                        }

                    },300);

            },3000);

    }

});

移动手机端H5无缝间歇平滑向上滚动js代码DEMO

移动手机端H5无缝间歇平滑向上滚动js代码的更多相关文章

  1. 【极品代码】一般人我不告诉他，手机端h5播放时不自动全屏代码

    已测适用于ios,某些安卓手机微信下播放视频会出现播放器控件(这个实在是无力吐槽噢,因为之前还遇到过微信播放完视频后竟然无法退出全屏出现广告的情况,只有播放完后刷新页面并且要放到框架页里才能屏蔽微信视 ...

  2. vue+node开发手机端h5页面开发遇到的坑

    项目进行中...随时更新 这里记录了一些手机端调试的方式 一 css 1.文字超过span宽度显示...(单行文字) .topWrap .introduce span { padding: 0 17p ...

  3. 文字列表无缝向上滚动JavaScript代码

    <!DOCTYPE html> <html> <head> <meta charset=utf-> <title>文字列表无缝向上滚动Jav ...

  4. 手机端移动端的选择框mobileSelect.js使用

    手机端移动端的选择框mobileSelect.js使用 文件地址:https://github.com/onlyhom/mobileSelect.js 请感兴趣的自行下载 使用过程 1 引入标签 &l ...

  5. jQuery图片无缝滚动JS代码ul/li结构

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 记录手机端h5页面碰到的一些问题

    关于input光标在手机端偏移 问题根本:不要使用line-height垂直居中. 解决方法:可直接定义height,然后高度由上下padding值撑开. 移动端清除input光标 ios input ...

  7. jquery插件之文字间歇自动向上滚动

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的文字间歇向上滚动特效,当鼠标移动到文字上时,向上滚动会停 ...

  8. iPhone X 适配手机端 H5 页面通用解决方案

    一:本文提供两种解决方案 1.终端解决方案(最优,建议选择) 2.web解决方案 导语: iPhone X的出现,一方面对于整个手机行业的发展极具创新领头羊的作用,另一方面也对现有业务的页面适配带来了 ...

  9. 关于手机端h5上传图片配合exif.min.js，processImg.js的使用

    首先这里有个new FileReader()的概念,这是h5新增的,用来把文件读入内存,并且读取文件中的数据.FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件 ...

随机推荐

  1. tyvj1113 魔族密码

    描述     风之子刚走进他的考场,就……    花花:当当当当~~偶是魅力女皇——花花!!^^(华丽出场,礼炮,鲜花)    风之子:我呕……(杀死人的眼神)快说题目!否则……-_-###    花 ...

  2. 墙裂推荐一本案例驱动的PhoneGap入门书，早看早收货

    清华大学出版社推出的<构建跨平台APP:PhoneGap移动应用实战> 零门槛学APP开发 从无到有 循序渐进 20余个示例APP 3个项目APP 全平台à跨终端à移动开发 完美生命周期: ...

  3. 支持向量机SVM

    SVM(Support Vector Machine)有监督的机器学习方法,可以做分类也可以做回归.SVM把分类问题转化为寻找分类平面的问题,并通过最大化分类边界点距离分类平面的距离来实现分类. 有好 ...

  4. javascript数据结构-链表

    gihtub博客地址 链表 是一种物理存储单元上非连续.非顺序的存储结构,它既可以表示线性结构,也可以用于表示非线性结构,数据元素的逻辑顺序是通过链表中的指针链接次序实现的.链表由一系列结点(链表中每 ...

  5. 巧用dimens适配多个分辨率

      让应用自动适配多个分辨率的屏幕,是每个android程序员的基本功,就好像前端工程师熟练编写CSS Hack一样.适配工作中一个重要的工作就是对页面的调整. 对于页面的适配,有很多的方法和技巧.比 ...

  6. python基础六

    模块 1.定义: 模块:用来从逻辑上组织python代码(变量,函数,类,逻辑:实现一个功能),本质就是.py结尾的python文件(文件名:test.py,对应的模块名:test) 包:用来从逻辑上 ...

  7. 调整 ANTD 组件菜单的字体大小。

    调整 ANTD 组件菜单的字体大小:经过多次试验,原有字体太小,只有12px,通过下列CSS 强制加大. 1.分组子菜单(标题) .ant-menu-inline > .ant-menu-sub ...

  8. java5

    1:final关键字(掌握) (1)是最终的意思,可以修饰类,方法,变量. (2)特点: A:它修饰的类,不能被继承. B:它修饰的方法,不能被重写. C:它修饰的变量,是一个常量. (3)面试相关: ...

  9. Spring Security控制权限

    Spring Security控制权限 1,配置过滤器 为了在项目中使用Spring Security控制权限,首先要在web.xml中配置过滤器,这样我们就可以控制对这个项目的每个请求了. < ...

  10. 更改python的编码问题：UnicodeDecodeError: 'ascii' codec can't decode byte 0xe6 in position 56: ordinal not in range(128)

    as3:/usr/local/lib/python2.7/site-packages# cat sitecustomize.py # encoding=utf8 import sys reload(s ...