在没结合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. 【PHP开发篇】一个统计客户端商机提交的获取IP地址

    1.对客服提交数据的ip地址记录. 获取ip地址的方法: public function getIP() { global $ip; if (getenv("HTTP_X_REAL_IP&q ...

  2. python 3编码

    python 3和2很大区别就是python本身改为默认用unicode编码. 字符串不再区分"abc"和u"abc", 字符串"abc"默 ...

  3. tyvj1863 [Poetize I]黑魔法师之门

    背景 经过了16个工作日的紧张忙碌,未来的人类终于收集到了足够的能源.然而在与Violet星球的战争中,由于Z副官的愚蠢,地球的领袖applepi被邪恶的黑魔法师Vani囚禁在了Violet星球.为了 ...

  4. CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记（1）设定背景图

    技术的新发展,除计算机可以接入互联网之外,平板电脑.智能手机.智能电视等其他设备均可访问互联网.在多设备时代,构建多屏体验也不是听说的那么难. 但是这也增加了学习CSS的难度?不知道如何上手,只懂一点 ...

  5. 修复 ThinkPHP3.2.3 抛出异常模块的一个BUG，关闭字段缓存功能

    使用 ThinkPHP3.2.3 遇到一个奇怪的问题,正式环境上报错,提示 “页面错误!请稍后再试~” 为了查看到底出啥错误,哪里出错,于是在入口文件中加了一段代码,开启调试: defined('AP ...

  6. 第2月第24天 coretext 行高

    1.NSMutableAttributedString 行高 NSMutableAttributedString *attributedString = [[NSMutableAttributedSt ...

  7. java后端制作MD5加密

    由于一次业务的需要,我制作了一次密码的修改子业务. 当用户忘记密码的情况下,我需要动态的发给他一个6位的随机密码,通过即时通,短信,微信等.并同时修改数据库中的原密码为这6位的随机密码.让用户再去修改 ...

  8. 从零开始学jQuery插件开发

    http://www.w3cfuns.com/notes/19462/ec18ab496b4c992c437977575b12736c.html jQuery 最成功的地方,是它的可扩展性,通过吸引了 ...

  9. css实现翻页效果

    如图,鼠标移动到图上,实现右上角翻页的效果,本例主要border边框的设置. 一.基本概念 <html> <head> <style> #demo{ width:0 ...

  10. erlang 200w进程测试

    参照<programing erlang>书例子,测试erlang创建进程性能 创建N个进程 都wait,然后挨个发送die关闭进程,代码如下: 测试场景:200w进程.MacBook P ...