效果:一进入页面,文字从右向左滑动,第一段文字滑到左端消失后,第二段才开始出现,就这样飘飘飘,最后一个在左端消失后,第一段接着来。思路: 【share|移动端和网页端公告栏文字右向左轮播滑动】css样式—外面有个固定的框框,需要轮播的文字写在ul>li里面,ul设置相对它的父级定位并且有固定宽高,li设置外边距。
js部分—改变ul相对父级的left值,视觉上是文字在滑动,其实是ul的left值改变,定好速度值和最大left值,设置计时器,里面的num值自增,达到最大left值后,num=0,目的是让left值从0开始重复刚才改变。
####下面是案例:
可以复制到自己的编辑器运行看效果
滚动幅 * {
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;
}
- 浏览器兼容问题及解决方法汇总
- 入门级---Vue脚手架(vue-cli)搭建过程---详版
- js基础知识总结整理
先写个没有束缚的纯纯的原生js:
下面是用jquery:
引入jquery:
变量和上面是一样的,不用获取li的个数n,比较起来代码量少了一点
最近移动端用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` ,记得清浮动就好。推荐阅读
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- web前端笔记|web前端学习-第一天
- JAVA框架之路|spring-boot笔记-工程搭建(一)
- spring|Java学习笔记(SpringMVC)
- URL协议和HTTP协议
- Web服务器的环境