jQuery文字轮播特效


Posted in Javascript onFebruary 12, 2017

闲谈:离开学校那座象牙塔已经也有大半年的事件了,生活中不再充满了茫然只有忙碌。连续加班加点大半个月,做的活动项目终于算是告一段落了,而今天也将是考验其真正价值的时候,现在将这次开发中遇到的问题做一下总结。

项目背景: 这次的项目主要是做一次全国酒店人气排名的营销活动,主要是基于在微信中传播,预计访问量达到亿级,并发做到2000+/s,且有不少的容错预案,我这次主要负责前端首页方面的展示效果。

功能点:

文字无缝轮播(不要在意为什么在移动端还会有这样的需求)

jQuery文字轮播特效

当一说到文字无缝滚动时,大家最先想到的是marquee,但是已经好久没有接触这个标签了,w3c也不对其进行维护了,并且还有最后必须等到全部滚动完毕才会再次滚动,并且对于rem布局采用基于px的滚动体验会非常的
差等等。。

第二个想到的是采用类似jquery实现的图片轮播机制,可以基本完成,但是发现无论是jquery还是zepto文字在滚动的时候会抖动,可用性比较差。

再就是现在用到的css3 + 少量js,采用很少的代码就可以实现文字不同长度,文字条数不定的文字无缝滚动轮播。

下面先看html结构

<div class="outer">
    <ul id="J_scroll">
      <li>1.这是第一条数据</li>
      <li>2.这是第二条数据</li>
      <li>3.这是第三条数据</li>
      <li>4.这是第四条数据</li>
      <li>5.这是第五条数据</li>
      <li>1.这是第一条数据</li> 
    </ul>
  </div>

与图片的无缝滚动一样,也需要将第一条数据拷贝一份放在最后面

其次是css的相关数据

.outer{
    width: 122px;
    height: 80px;
    overflow: hidden;
  }
  .outer ul{
    display:inline-block;
    height: 80px;
    -webkit-transform: translate3d(0, 0, 0); /* 3d渲染,开启硬件加速 */
    transform: translate3d(0, 0, 0);
    font-size: 0;  /* 使inline-block无默认间距 */
    white-space: nowrap; /* 超出不折行 */
  }
  .outer ul li{
    display: inline-block;
    padding-right: 50px;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    font-size: 24px;
  }
  .theanimation{
    animation:theanimation 20s infinite linear;
    -webkit-animation:theanimation 20s infinite linear;
  }
  @keyframes theanimation{
   from {
    transform:translateX(0%);
   } 
   to {
    transform:translateX(-100%);
   } 
  }
  @-webkit-keyframes theanimation{ 
   from {
    -webkit-transform:translateX(0%);
   } 
   to {
    -webkit-transform:translateX(-100%);
   }
  }

由于IOS的一些渲染机制,最好滚动的元素内部都需要启动硬件加速,否则会有卡顿和文字显示不全的问题。

最后是js

$('#J_scroll').width($('#J_scroll').width() - $('#J_scroll li:first-child').innerWidth());
  $('#J_scroll').addClass('theanimation');

这里还是写的jquery,相信大家都能看的懂,就是让滚动元素的宽度等于他的内部元素的总宽度减去第一个(或者最后一个)元素的宽度,这样能保证无缝的效果。

最后要说明为什么要用js动态添加css3的类名实现滚动效果,一开始的时候我也是想直接将css3滚动特效写在滚动的元素上,但是在iPhone上发现首次加载当前页面的时候他不会自动滚动。

Javascript 相关文章推荐
js 页面输出值
Nov 30 Javascript
Underscore.js常用方法总结
Feb 28 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
Nov 15 Javascript
浅谈JavaScript的闭包函数
Dec 08 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
Dec 21 Javascript
利用Angularjs中模块ui-route管理状态的方法
Dec 27 Javascript
js仿小米手机上下滑动效果
Feb 05 Javascript
H5手机端多文件上传预览插件
Apr 21 Javascript
element ui table(表格)实现点击一行展开功能
Dec 04 Javascript
vue 开发之路由配置方法详解
Dec 02 Javascript
react-router-dom 嵌套路由的实现
May 02 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
Jul 28 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
Feb 12 #Javascript
jQuery、zepto、js常用小技巧
Feb 12 #Javascript
JS中如何实现Laravel的route函数详解
Feb 12 #Javascript
js输入框使用正则表达式校验输入内容的实例
Feb 12 #Javascript
浅谈js中同名函数和同名变量的执行问题
Feb 12 #Javascript
老生常谈jquery id选择器和class选择器的区别
Feb 12 #Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
Feb 12 #Javascript
You might like
php ss7.5的数据调用 (笔记)
2010/03/08 PHP
php二维数组排序详解
2013/11/06 PHP
PHP实现的简单日历类
2014/11/29 PHP
php动态变量定义及使用
2015/06/10 PHP
php需登录的文件上传管理系统
2020/03/21 PHP
php采用session实现防止页面重复刷新
2015/12/24 PHP
PHP 中常量的知识整理
2017/04/14 PHP
Yii 2.0在Grid中格式化时间方法示例
2017/06/06 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
php微信公众号开发之图片回复
2018/10/20 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
ie和firefox不兼容的解决方法集合
2009/04/28 Javascript
JavaScript浏览器选项卡效果
2010/08/25 Javascript
js获取select标签选中值的两种方式
2014/01/09 Javascript
AngularJs解决跨域问题案例详解(简单方法)
2016/05/19 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
js仿小米官网图片轮播特效
2016/09/29 Javascript
详解vue 组件之间使用eventbus传值
2017/10/25 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
微信小程序与后台PHP交互的方法实例分析
2018/12/10 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
2019/10/26 Javascript
Vue双向数据绑定(MVVM)的原理
2020/10/03 Javascript
关于JavaScript中异步/等待的用法与理解
2020/11/18 Javascript
python循环监控远程端口的方法
2015/03/14 Python
Python中List.count()方法的使用教程
2015/05/20 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
pycharm下pyqt4安装及环境配置的教程
2020/04/24 Python
Python中常见的数制转换有哪些
2020/05/27 Python
Python生成pdf目录书签的实例方法
2020/10/29 Python
四年的个人工作自我评价
2013/12/10 职场文书
环保公益广告语
2014/03/13 职场文书
最新结婚典礼主持词
2014/03/14 职场文书
五好关工委申报材料
2014/05/31 职场文书
应用外语系自荐信
2014/06/26 职场文书