在没结合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. golang笔记——并发

    go语言中的main函数也是运行在一个单独的goroutine中的,一般称为 main goroutine,main函数结束时,会打断其它 goroutine 的执行,但是其它 goroutine 不 ...

  2. spring mvc统一异常处理（@ControllerAdvice + @ExceptionHandler）

    spring 封装了非常强大的异常处理机制.本文选取@ControllerAdvice + @ExceptionHandler 这种零配置(全注解),作为异常处理解决方案! @ControllerAd ...

  3. multiple merge document

    http://www.aspose.com/docs/display/wordsnet/How+to++produce+multiple+documents+during+mail+merge

  4. UVALive 3644 X-Plosives

    X-Plosives Time Limit: 3000MS   Memory Limit: Unknown   64bit IO Format: %lld & %llu [Submit]   ...

  5. 解决Xftp经常断开连接的问题，Xftp中文乱码

    #文件 --> 选项 --> 勾选“发送保持活动状态消息” 间隔 60秒 #工具 -> 选项 延伸阅读: Xshell个性化设置,解决Xshell遇到中文显示乱码的问题

  6. 进阶系列二【绝对干货】---Quartz.Net的入门

    一.Quartz.Net是什么? Quartz.Net是一个开源的作业调度框架,OpenSymphony的开源项目,是Quartz的C#移植项目.非常适合在平时的工作中,定时轮询数据库同步,定时邮件通 ...

  7. nginx + tomcat配置负载均衡

    目标:Nginx做为HttpServer,连接多个tomcat应用实例,进行负载均衡. 注:本例程以一台机器为例子,即同一台机器上装一个nginx和2个Tomcat且安装了JDK1.7. 1.安装Ng ...

  8. UVALive 4849 String Phone（2-sat、01染色）

    题目一眼看去以为是4-sat... 题意:给n(n<=3000)个黑方块的坐标,保证黑方块没有公共边.对于每个黑方块选一个角作为结点,使得所选结点满足输入的一个无向图.其中距离为曼哈顿距离.输出 ...

  9. java学习第四天 类和变量

    java也属于面向对象的编程 面向对象的三大特征:  封装 继承 多态 类 对象 对象:真实存在的唯一的事物 面向对象编程(oop)思想力图使对计算机语言中的事物的描述和自然界中的事物尽可能保持一致 ...

  10. Hotaru's problem(hdu 5371)

    题意:给出一个数字串,询问最长的子串,满足以下要求:将子串平均分为三部分,一三部分相等,一二部分对衬. /* 在manachar的基础上,枚举回文串的中心,再找第三部分. */ #include< ...