html图片与文字轮播,我是这样写文字轮播的

article/2024/12/5 8:27:00

原标题:我是这样写文字轮播的

e1fc532dd9ec3bcee9e399fce5d65de5.png

作者:一半水一半冰

原文:http://www.cnblogs.com/jingh/p/6377736.html

1写在前面

最近总结下之前的工作,才恍然发现时间的流逝永远是悄无声息的,离开学校那座象牙塔已经也有大半年的时间了,生活中不再充满了茫然只有忙碌。

连续加班加点大半个月,做的活动项目终于算是告一段落了,而今天也将是考验其真正价值的时候,现在将这次开发中遇到的问题做一下总结。

2项目背景

这次的项目主要是做一次全国酒店人气排名的营销活动,主要是基于在微信中传播。

预计访问量达到亿级,并发做到2000+/s,且有不少的容错预案,我这次主要负责前端首页方面的展示效果。

功能点:

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

3如何实现

我们可以下面三种方法来进行实现:

1

marquee

当一说到文字无缝滚动时,大家最先想到的是marquee。

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

2

jquery

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

3

css3 + 少量js

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

4实现过程

下面先看html结构:

422ccbb042aafb30cb4df4a0a8df4947.png

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

其次是css的相关数据:

a3a77efd3b42049956fe4a3462aa7a60.png

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

最后是js:

28c4200971d5882078b8cc5388fc4878.png

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

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

责任编辑:


http://chatgpt.dhexx.cn/article/lNOLtp3k.shtml

相关文章

IOS 文本文字下面添加下划线

2019独角兽企业重金招聘Python工程师标准>>> UILabel *infolabel [[UILabel alloc] initWithFrame:CGRectMake(30*RATIO,260*RATIO, self.view.bounds.size.width-60*RATIO, 20*RATIO)];infolabel.text "infoimcba.com";infolabel.textColor [UIColor …

html语言 特效字,用HTML和CSS实现酷炫的文字特效

前言 马上我们就要进入下一个阶段,也就是HTML和CSS实现前端界面的阶段了,想必很多小伙伴都想给自己的页面加点酷炫的特效,今天,我就给大家整理了一些非常酷炫的文字特效来装点你的页面!有些是从网络上找的,…

python抓取图片数字_python 实现识别图片上的数字

Python 3.6 版本 Pytesseract 图像验证码识别 环境: (1) win7 64位 (2) Idea (3) python 3.6 (4) pip install pillow <&nbsp>pip install pytesseract (5) 识别引擎tesseract-ocr 安装 安装tesseract-ocr的识别引擎 第一步:下载安装包 我下载的是64位,根据自…

html改变字母间距,css怎么调整字体间距?

在前端开发的过程中&#xff0c;有时候可能会出现字与字之间比较紧凑&#xff0c;我们可以通过css设置文字间隔让字与字之间的距离大一点&#xff0c;下面我们来看一下如何使用css调整字体间距。 css中解决字与字间隔的方法是使用css样式属性letter-spacing&#xff0c;letter-…

html ul 加点,HTML ul compact 属性 | 菜鸟教程

HTML compact 属性 实例 在无序列表中使用compact属性&#xff1a; CoffeeTeaMilk 尝试一下 浏览器支持 所有主流浏览器都不支持 compact 属性。 定义和用法 HTML5 不支持 compact 属性。 请使用 CSS 替代。 的 compact 属性在 HTML 4.01 已废弃。 compact 属性是一个 boole…

css怎么将文字底下设置颜色,css如何设置文字颜色

css设置文字颜色的方法&#xff1a;1、在DIV标签内使用color颜色样式&#xff0c;代码为【 www.php.cn 】&#xff1b;2、在CSS选择器中使用color颜色样式CSS代码。 本教程操作环境&#xff1a;windows7系统、css3版&#xff0c;DELL G3电脑。 css设置文字颜色的方法&#xff1…

markdown/LaTeX中在字母下方输入圆点的方法

看下面的关联代数的乘法定义, 如果需要在 z z z下面加上一个点, 应该怎么做呢? 下面是一个采用\stackrel命令的方法 {\huge{}_{\stackrel{{}_{{}_{{}_{{}_z}}}}{{}^\cdot}}}\!\leq y⋅ z ⁣ ≤ y {\huge{}_{\stackrel{{}_{{}_{{}_{{}_z}}}}{{}^\cdot}}}\!\leq y ⋅z​​​​​…

html 字前边自动加点,css实现文字越界加点点点显示,并且后面紧跟一个图标

文字越界添加...显比抖朋要插支一圈不者地示 在HTML页面上&#xff0c;会遇到当文字长度超出一定长度的时候&#xff0c;将超出的部分显示为...的情况&#xff0c;这个功能很好实现&#xff0c;很多人都可以直接写出来。 示例代码&#xff1a; .demo { display: block; text-ov…

css文字下方加点

1、border-bottom: 1px dashed #333; 2、 text-emphasis: dot; text-emphasis-position: under; -webkit-text-emphasis: dot; -webkit-text-emphasis-position: under;

css+html 在文字下面加点。

效果 代码&#xff1a; 通过伪类的方式在content里面加点。然后定位在文字的下面。 <head> <style> .wavy { position: relative; } .wavy:before { content: "."; position: absolute; top: 10p…

linux 问题-——退出vi编辑器 wq失效

退出linux的vi编辑器时&#xff0c;先按左上角的esc按键&#xff0c;再输出输入命令 保存不退出w强制保存但不退出w!保存并退出wq强制保存并退出wq&#xff01;不保存退出q不保存并强制退出q! 出现以下问题&#xff1a; esc退出后&#xff0c;不能成功输出上述命令退出。 原因…

vi编辑器 末尾添加_vi编辑器操作指令分享

vi编辑器是所有Unix及Linux系统下标准的编辑器,它的强大不逊色于任何最新的文本编辑器,这里只是简单地介绍一下它的用法和一小部分指令。由于对Unix及Linux系统的任何版本,vi编辑器是完全相同的,因此您可以在其他任何介绍vi的地方进一步了解它。Vi也是Linux中最基本的文本编…

vi编辑器

目录 一、vim编辑器概念 1、为什么用vim编辑器&#xff1f; 2、vim的格式 二、vim的模式 1、命令模式 1.1退出vim快捷键 1.2光标跳转 1.3常用操作命令 2、输入模式 3、末行模式 一、vim编辑器概念 1、为什么用vim编辑器&#xff1f; Linux 系统中“一切皆文件”&…

VI编辑器小结

文章目录 一、vi编辑器的简要介绍二、vi编辑器的工作模式三、vi编辑器的使用方法 工作中发现vi编辑器用处很大&#xff0c;现总结一部分 一、vi编辑器的简要介绍 1、vi编辑器通常被简称为vi&#xff0c;它是Linux和Unix系统上最基本的文本编辑器&#xff0c;类似于Windows 系统…

linux学习之vi编辑器

一、vi编辑器功能 打开、新建、保存文件光标移动文本编辑&#xff08;多/单行/列&#xff09;复制、粘贴、删除查找、替换 二、配置vi编辑器 输入&#xff1b; cd /etc/vim cp vimrc ~/.vimrc cd ~ gedit .vimrc使用notepad打开本地文件 将内容复制到在虚拟机的.vimrc文…

vi编辑器的基本使用

目录 一、vi的基本概念 1.1 命令行模式&#xff08;command mode&#xff09; 1.2 插入模式&#xff08;Insert mode&#xff09; 1.3 底行模式&#xff08;last line mode&#xff09; 二、vi的基本操作 2.1 进入vi&#xff08;重要&#xff09; 2.2 切换至插入模式&am…

如何退出Vi或Vim编辑器

The vi editor is confusing if you’re not used to it. It takes a secret handshake to escape this application if you’ve stumbled into it. Here’s how to quit vi or vim on Linux, macOS, or any other Unix-like system. 如果您不习惯使用vi编辑器,则会感到困惑。…

Linux复习-vi编辑器

文章目录 0、前言1、整体功能2、进入与退出vi编辑器3、vi的工作方式4、文本插入命令5、文本修改命令 0、前言 vi编辑器是Unix系统中自带的文本编辑器&#xff0c;现在用的最多的是vim编辑器&#xff0c;vim 具有程序编辑的能力&#xff0c;可以主动的以字体颜色辨别语法的正确…

vim编辑器三种模式和切换

一&#xff1a;了解并运用命令模式、输入模式、末行模式。 命令模式 命令模式下&#xff0c;所敲的按键&#xff0c;编辑器都理解成命令&#xff0c;以命令驱动执行不同的功能。&#xff08;此模式不能自由进行文本的编辑&#xff09;&#xff0c;该模式是进入vi编辑器的默认模…

【BP数据预测】基于matlab遗传算法优化BP神经网络数据预测【含Matlab源码 1376期】

✅博主简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;修心和技术同步精进&#xff0c;Matlab项目合作可私信。 &#x1f34e;个人主页&#xff1a;海神之光 &#x1f3c6;代码获取方式&#xff1a; 海神之光Matlab王者学习之路—代码获取方式 ⛳️座右铭&#xff1a;…