移动端和网页端公告栏文字右向左轮播滑动

效果：一进入页面，文字从右向左滑动，第一段文字滑到左端消失后，第二段才开始出现，就这样飘飘飘，最后一个在左端消失后，第一段接着来。

思路：

css样式—外面有个固定的框框，需要轮播的文字写在ul>li里面，ul设置相对它的父级定位并且有固定宽高，li设置外边距。
js部分—改变ul相对父级的left值，视觉上是文字在滑动，其实是ul的left值改变，定好速度值和最大left值，设置计时器，里面的num值自增，达到最大left值后，num=0，目的是让left值从0开始重复刚才改变。
####下面是案例：
可以复制到自己的编辑器运行看效果

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>滚动幅</title><style type="text/css">* {margin: 0;padding: 0;text-decoration: none;}li{list-style: none;}                #container {position: relative;width: 600px;height: 400px;border: 1px solid #333;overflow: hidden;margin: 0 auto;}        #list {position: absolute;left: 0;width: 20000px;height: 200px;color: #000;font-size: 30px;font-weight: bold;display：flex;}   #list li{margin-left: 600px;}               </style></head><body><div id="container"><ul id="list"><li>浏览器兼容问题及解决方法汇总</li><li>入门级---Vue脚手架(vue-cli)搭建过程---详版</li><li>js基础知识总结整理</li></ul></div></body>
</html>

先写个没有束缚的纯纯的原生js:

<script type="text/javascript">window.onload = function() {                      //要加上这段、页面加载自动执行var list = document.getElementById('list');var aLi = document.getElementsByTagName('li');/*设置以下变量*/var n = list.getElementsByTagName('li').length;  //获取ul下面li的个数（用来求所有margin）var newLeft = 0;                                 //改变ul的left的值var speed = 1;                                  //设置的速度参数var s = 0;                                      //读取li的宽总和var num = 0;                                    //计时器中的num自增变量for(var i=0;i<aLi.length;i++){s += parseInt(aLi[i].offsetWidth);         //offsetWidth读取的是内容高度+内边距+边宽（不包含外间距margin）}var total = s + n*600;                        //获取到的所有li的宽的总和再加上他们的margin/*计时器修改left的值*/var timer = setInterval(function () {newLeft = -speed*num;                    num++;/*达到设置的total值之后，num=0,newLeft继续从0开始*/if(num >= total){num = 0;}list.style.left = newLeft + 'px';}, 1)          }
</script>

下面是用jquery：

引入jquery:<script src="js/jquery-3.1.0.min.js" type="text/javascript"></script>
变量和上面是一样的，不用获取li的个数n，比较起来代码量少了一点

<script type="text/javascript">$(function(){var num = 0;var newLeft = 0;var speed = 1;var s=0;$("#list li").each(function(){s  += $(this).outerWidth(true);    //outerWidth(true)就直接获取了元素宽、内填充、边框、外边距});var timer = setInterval(function(){newLeft = -speed*num;if( num >= s ) {num = 0;}num++;$('#list').css({'left':newLeft+'px'})},10)}
</script>

最近移动端用vue写项目用到这个，于是就出现了一些小问题：
1.滚动的内容是写在li里面的，这个是要在接口获得的data,再渲染到页面。接口写在created里面，js代码写在mounted但是读取不到ul>li的内容，因此宽度获取失败。
原因是钩子函数的加载方式，只要改下js代码的位置写在updated里面就可以解决这个问题。
2.由于移动端页面宽度是自适应的，页面宽度是7.5rem,设置每个li的margin-left自然也是7.5rem,那么问题来了–newLeft的值是用rem还是px？
答案依然是px，一开始我多虑写成了这样$('#list').css({'left':newLeft+'rem'}) ,这里的newLeft是乘以0.01 的，其实这样也有效果，就是觉得代码怪怪的，事实上没必要直接px就好，因为我们显示屏分辨率以px像素为单位，即使用了rem 屏幕也会转为px。
3.关于ul 设置的width: 20000px; 必须设置宽度，li的内容不确定，我是设置了足够大的宽，为了装下滚动的内容，这个办法有点low，你们有更好的尝试也可以，总之不影响效果。。 4.还有我用的是flex布局，推荐用，也可以给li设置float` ,记得清浮动就好。

移动端和网页端公告栏文字右向左轮播滑动相关推荐

海豚客服系统接入技巧分享：微信端和网页端
1微信端 1.如何使用微信端原生对话框? 在微信公众平台里设置自定义菜单,设置文字消息,引导客户用原生页面进行问答. 2.公众号接入海豚客服和微信原生客服有什么不同开通海豚客服账号之后,在第三方客服 ...
导航APP双端带网页端电商/商城/展示/影视/小说/漫画/通用/试玩/导航系统源码
简介: 前端 APICloud 后端 PHP 双端+网页端轮翻海报后台可设置多条轮翻海报与公告,海报可设置H5外链! 后台可无限设置导航图片与文字,可跳转详细页或直接跳转网页. 图标大小自适应-- ...
移动端和网页端开发的区别
我们有: 移动端APP 移动端网页 PC端APP PC端网页. 这四个在开发过程中有什么区别? 只要有网页必然考虑与网页的兼容性(还有适应不同大小的屏幕的问题).只要有APP(客户端) 必然考虑系统 ...
[干货]网页端、移动端导航设计模式全解
界面中的组件设计有很多通用的交互设计模式. 产品导航做为界面上最常见的组件同样也有多种被大家熟知的设计模式,模式化的组件为产品经理快速.有效的创建产品界面.构建信息架构提供的方便的应用. 接下来,我们 ...
网页端、移动端导航设计模式全解
界面中的组件设计有很多通用的交互设计模式. 产品导航做为界面上最常见的组件同样也有多种被大家熟知的设计模式,模式化的组件为产品经理快速.有效的创建产品界面.构建信息架构提供的方便的应用. 接下来,我 ...
通过javascript在网页端生成zip压缩包并下载
通过javascript在网页端生成zip压缩包并下载原文:通过javascript在网页端生成zip压缩包并下载 zip.js是什么 zip.js的github项目地址:http://gildas ...
openfire运行环境部署+jwchat网页端通信聊天+插件的基础知识+webchat环境配置和下载地址
研究Openfire快一个月的时间了,最初的项目要求是利用Openfire作为服务器端,在网页端注册或输入登录信息进行类似QQ的聊天.后来需要在网页端加入客服系统实现匿名登录和实名登录功能,实现N个客 ...
如何在 PC 机上测试移动端的网页？
如何在 PC 机上测试移动端的网页?如果用 HTML5 写的页面,想兼容 iOS.Android 平台的手机,在 PC 机上看有些效果可能不准确,但不可能在每个移动终端都放上去看下效果吧,一般用什么工 ...
HTML5期末大作业：商城网页设计——仿京东商城网页端模板(8页面) HTML+CSS+JavaScript...
HTML5期末大作业:商城网页设计--仿京东商城网页端模板(8页面) HTML+CSS+JavaScript 商城网页HTML代码学生网页课程设计期末作业下载商城大学生网页设计制作成临近期末, ...
HTML5期末大作业：商城网页设计——仿京东商城网页端模板(8页面) HTML+CSS+JavaScript
HTML5期末大作业:商城网页设计--仿京东商城网页端模板(8页面) HTML+CSS+JavaScript 商城网页HTML代码学生网页课程设计期末作业下载商城大学生网页设计制作成临近期末, ...

移动端和网页端公告栏文字右向左轮播滑动

思路：

移动端和网页端公告栏文字右向左轮播滑动相关推荐

最新文章

热门文章