我是这样写文字轮播的
闲谈:今天打开园子发现园龄已经指向1年,才恍然发现时间的流逝永远是悄无声息的,离开学校那座象牙塔已经也有大半年的事件了,生活中不再充满了茫然只有忙碌。连续加班加点大半个月,做的活动项目终于算是告一段落了,而今天也将是考验其真正价值的时候,现在将这次开发中遇到的问题做一下总结。
项目背景: 这次的项目主要是做一次全国酒店人气排名的营销活动,主要是基于在微信中传播,预计访问量达到亿级,并发做到2000+/s,且有不少的容错预案,我这次主要负责前端首页方面的展示效果。
功能点:
文字无缝轮播(不要在意为什么在移动端还会有这样的需求)
当一说到文字无缝滚动时,大家最先想到的是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上发现首次加载当前页面的时候他不会自动滚动。
未完待续。。。
转载于:https://www.cnblogs.com/libin-1/p/6377747.html
我是这样写文字轮播的相关推荐
- html图片与文字轮播,我是这样写文字轮播的
原标题:我是这样写文字轮播的 作者:一半水一半冰 原文:http://www.cnblogs.com/jingh/p/6377736.html 1写在前面 最近总结下之前的工作,才恍然发现时间的流逝永 ...
- ViewFlipper实现文字轮播(仿淘宝头条垂直滚动广告)
ViewFlipper实现文字轮播(仿淘宝头条垂直滚动广告) 广告条目可以单独写成布局文件,然后在布局文件或者代码中添加到总布局中 从源码可以看出,其实ViewFlipper间接的继承了FrameLa ...
- iOS文字轮播简单实现(UILabel)
因项目需求,要做一个文字轮播用来展示一些通知内容,以前也有过这个需求,但之前都是在网上找的第三方,现在有点时间就自己写了个简单的. 整体思路:用一个UILabel来展示内容,通过UIView动画来实现 ...
- 简单的手写jquery轮播图(包含切换按钮、小圆点)
简单的手写jquery轮播图(包含切换按钮.小圆点) css代码 * {margin: 0;padding: 0; }.container {width: 800px;height: 400px;ma ...
- 简单的图片、文字轮播,及切换动画
图片轮播使用的容器是ViewPager,文字轮播使用的是TextSwitcher. 图片轮播的主要思路:利用Timer和TimerTask构建定时任务:监听ViewPager的滑动,根据滑动百分比动态 ...
- viewpage小圆点文字轮播
依赖 glid加载图片 compile 'com.github.bumptech.glide:glide:3.5.2' compile 'com.android.support:support-v4 ...
- 自已动手写的轮播图插件,功能不断增加中,可以下载
前,平时总是使用别人的轮播图插件,这次决定自已写一个,功能越多越好.实际现起来,发现并不容易.先实现基本的功能,下两周要丰富起来. 图是别人的图,心是自已的心.直接上代码: 一:结构 <!-- ...
- js原生写图片轮播和切换
网上有很多轮播图的写法,有一些我觉得写的太过繁琐可读性差.所以我自己写了两个js块.第一个是轮播图写法,第二个是通过点击左右箭头切换图片.这里主要是展示js代码,省略了样式. 1.js原生写轮播图 & ...
- 用js写的轮播图,八位女明星,你翻谁的牌,程序员就是可以为所欲为!
今天下午利用摸鱼的时间做了一个图片轮播,嘿嘿,先看看效果,本来想搞动态图的,整出来效果不好,图片又超过了5M不让传,还是截图吧 感觉需 实现的功能: 1.定时向右滚动. 2.点击明星切换到最中间. 3 ...
最新文章
- ubuntu14.04系统扩容的方法
- Dom4j和Xpath(转)
- 区块链,使用 Go-Ethereum 搭建以太坊私有链
- apache camel 相关配置_MyBatis-Plus返回map自动转驼峰配置object-wrapper-factory
- 用Artifactory管理内部Maven仓库
- OkHttp使用介绍 和 使用进阶
- Flex itemReanderer(转)
- 20.网页卷去的距离与偏移量
- 88. [ExtJS2.1教程-5]ToolBar(工具栏)
- String 转Clob
- 解决办法:C向Python传递字串数组导致进程崩溃
- 计量经济学 pdf_计量经济学笔记(十六)
- iNOC产品部-杨辉三角的变形
- 读书笔记:普林斯顿微积分读本
- Dr.com哆点客户端本地密码查看
- 2018年网络工程师考试提纲
- 双人对战的球类游戏ios源码项目
- 利用python-docx和docxcompose实现word合并,自动化办公
- 2022年一级建造师考试《市政公用工程》练习题及答案(多选题)
- 摄像模组中光学相关知识(三)
热门文章
- python列表函数方法_与Python列表相关的函数
- plsql存储过程修改后怎么保存_Solidity变量存储位置与gas成本详解
- python规模_python语言计算生态规模有多大?
- python rowspan_Python tkinter rowspan未正确调整元素大小
- 透明图片怎么发给别人_戒指大了怎么办?
- mysql数据库 on 命令_MySql 数据库基础命令
- 学习计算机游戏编程,在线游戏学编程,游戏编程汇总
- linux命令大写输入,Linux命令行:对内容进行大小写字符转换 ????
- android 照片多选,Android: 关于系统相册多选图片的问题
- redis value多大会影响性能_选择合适Redis数据结构,减少80%的内存占用