伏龙阁资源网

jQuery文字轮播特效
站长资源 2024/11/27 佚名
2 0

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

项目背景： 这次的项目主要是做一次全国酒店人气排名的营销活动，主要是基于在微信中传播，预计访问量达到亿级，并发做到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上发现首次加载当前页面的时候他不会自动滚动。

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
www.wwsws.com 伏龙阁资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接