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文件 document.createElement
Oct 14 Javascript
Bootstrap图片轮播组件使用实例解析
Jun 30 Javascript
Node.js Streams文件读写操作详解
Jul 04 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
Vue.js对象转换实例
Jun 07 Javascript
用Webpack构建Vue项目的实践
Nov 07 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
Mar 19 Javascript
基于layui table返回的值的多级嵌套的解决方法
Sep 19 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 Javascript
vue中destroyed方法的使用说明
Jul 21 Javascript
JavaScript实现alert弹框效果
Nov 19 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 APC的安装与使用详解
2013/06/13 PHP
php实现格式化多行文本为Js可用格式
2015/04/15 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
禁止JQuery中的load方法装载IE缓存中文件的方法
2009/09/11 Javascript
express的中间件bodyParser详解
2014/12/04 Javascript
javascript常用正则表达式汇总
2015/07/31 Javascript
JavaScript中闭包的写法和作用详解
2016/06/29 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
在NodeJs中使用node-schedule增加定时器任务的方法
2020/06/08 NodeJs
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
详解C++编程中一元运算符的重载
2016/01/19 Python
Python三级目录展示的实现方法
2016/09/28 Python
Python实现简单网页图片抓取完整代码实例
2017/12/15 Python
Python构建网页爬虫原理分析
2017/12/19 Python
Python列表推导式与生成器用法分析
2018/08/02 Python
如何利用Python分析出微信朋友男女统计图
2019/01/25 Python
Python通过TensorFlow卷积神经网络实现猫狗识别
2019/03/14 Python
Python闭包和装饰器用法实例详解
2019/05/22 Python
python实现飞机大战小游戏
2019/11/08 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
Python魔术方法专题
2020/06/19 Python
利用canvas实现图片压缩的示例代码
2018/07/17 HTML / CSS
土耳其时尚潮流在线购物网站:Trendyol
2017/10/10 全球购物
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
J2EE面试题
2016/03/14 面试题
焊接专业毕业生求职信
2013/10/01 职场文书
电气专业应届生求职信
2013/11/01 职场文书
培训主管的岗位职责
2013/11/23 职场文书
喝酒检查书范文
2014/02/23 职场文书
挂靠协议书范本
2014/04/22 职场文书
人事行政专员岗位职责
2014/07/23 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
研究生导师评语
2014/12/31 职场文书
解决jupyter notebook图片显示模糊和保存清晰图片的操作
2021/04/24 Python
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫