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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/webKris/article/details/80592987

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

思路:

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,设置每个limargin-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` ,记得清浮动就好。

展开阅读全文

没有更多推荐了,返回首页