移动端banner css3(@keyframes )实现

最新推荐文章于 2024-04-24 19:48:54 发布

weixin_34087301

最新推荐文章于 2024-04-24 19:48:54 发布

阅读量258

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python webpack ViewUI

原文链接：https://my.oschina.net/u/3797834/blog/1634765

本文介绍了一个使用Vue.js实现的轮播图组件，并详细展示了如何通过LESS编写动画效果来增强用户体验。此外，还提供了移动端屏幕适配的实现方法。

2019独角兽企业重金招聘Python工程师标准>>>

这个是我用webpack时的生产文件部分，为了方便观看，在页面引入了less和vue的cdn，需要复制的话方便看

注：cssreset部分没有写进来

//文档结构，只看有用的部分即可

//html部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	    <link rel="shortcut icon" type="image/x-icon" href="" />
	    <title></title>
	    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
		<link href="css/main.css" rel="stylesheet"/><!--cssreset-->
		<link href="less/home.less" rel="stylesheet/less"/><!--less文件-->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script><!--less cdn-->
		<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script><!--vue cdn-->
	</head>
	<body>
	    <div id="home_banner" class="left0">
	    	<article >
	    		<a v-for="img in imgs" :_href="img.href" ><img :src="img.picture"  /></a>
	    	</article>
	    	<ul>
	    		<li v-for="img in imgs"><span></span></li>
	    	</ul>
	    </div>
	</body>
</html>

//js部分

//移动端屏幕适配
let _screen = 750;
let htmfontsi = document.body.clientWidth,
	_htmfontsize = parseFloat(htmfontsi)/_screen*100;
	document.getElementsByTagName("html")[0].style.fontSize=_htmfontsize+"px";
//home
var home_banner=new Vue({
	el: "#home_banner",
  	data:{
  		imgs:[
  			{href:"",picture:"img/huli_08.jpg"},
  			{href:"",picture:"img/huli_08.jpg"},
  			{href:"",picture:"img/huli_08.jpg"},
  			{href:"",picture:"img/huli_08.jpg"}
  		] 
  	}
})
//behavior 行为  
//自用事件封装
function on(argu, method, fun) {
	argu.addEventListener(method, fun);
}
//banner部分
let $home_banner=function(){
	if(home_banner.imgs.length>=2){
		let home_banner$ = document.getElementById("home_banner"),
			length 	= home_banner.imgs.length,
			len =length -1,
			arr     = [];
		for( let i =0;i<length;i++){
			arr.push("left"+i)//从左向右滑动，class成组 注意：i的数字代表当前动画的是第几个img
		} 
		let move   =function(){
						arr.push(arr[0]);
						arr.shift(arr[0]);
						home_banner$.setAttribute("class",arr[0])
					}
		let remove =function(){
						arr.unshift(arr[len]);
						arr.pop(arr[len]);
						let rearr = arr.join(".").replace(/left/g,"right").split(".");
						//从右向左滑动，class成组  注意：left与right转换的时候，数字没有变化，动作开始时，新旧class的i值不变
						home_banner$.setAttribute("class",rearr[0]);
					}	
		let moveto =setInterval(function(){
						move();
					},3000)
		let xl,xr;
		function touchstart() {
			xl = event.changedTouches[0].clientX;
			clearInterval(moveto);
		};

		function touchend() {
			xr = event.changedTouches[0].clientX;
			if (xr - xl < -50) {//向左滑动
				remove();
			} 
			else if (xr - xl > 50) {//向右滑动
				move();
			}
			moveto =setInterval(function(){
						move();
					},3000)
		};
		on(home_banner$,"touchstart",function(event){
			touchstart();
		})
		on(home_banner$,"touchend",function(event){
			touchend();
		})
	}
};
$home_banner();

//less部分

@fff:#fff;
@c3:#333;
@c6:#666;
@c9:#999;
@df:#f3eeee;
@d6:#d6d6d6;
@e:#eee;
@fe:#fe0000;
//loop方法  多层编译
.loop(@count)when(@count > 1){
    &.left@{count}{
        @_count:@count+1;
        article{
            a{
                &:nth-child(@{count}){
                    z-index: 2;
                    -webkit-animation:left_hide 0.3s forwards; 
                }
                &:nth-child(@{_count}){
                    z-index: 3;
                    -webkit-animation:left_show 0.3s forwards; 
                }
            }
        }
        ul{
            li{
                &:nth-child(@{count}){
                    span{
                        -webkit-animation:left_show 0.3s forwards; 
                    }
                }
                &:nth-child(@{_count}){
                    span{
                        -webkit-animation:left_hide 0.3s forwards; 
                    }
                }
            }
        }
    }
    &.right@{count}{
        @_count:@count+1;
        article{
            a{
                &:nth-child(@{count}){
                    z-index: 2;
                    -webkit-animation:right_hide 0.3s forwards; 
                }
                &:nth-child(@{_count}){
                    z-index: 3;
                    -webkit-animation:right_show 0.3s forwards; 
                }
            }
        }
        ul{
            li{
                &:nth-child(@{count}){
                    span{
                        -webkit-animation:right_show 0.3s forwards; 
                    }
                }
                &:nth-child(@{_count}){
                    span{
                        -webkit-animation:right_hide 0.3s forwards; 
                    }
                }
            }
        }
    }
    .loop((@count - 1));
}
#home_banner{
    position: relative;
    float: left;
    width: 100%;
    overflow: hidden; 
    .loop(10);//此处调用loop方法 括号内的值为可实现效果的img的最大数量，可以根据img的数目更改
    //下面几个涉及 first-child 和last-child故而不写入loop中
    &.left0{
        article{
            a{
                &:last-child{
                    z-index: 2;
                    -webkit-animation:left_hide 0.3s forwards; 
                }
                &:first-child{
                    z-index: 3;
                    -webkit-animation:left_show 0.3s forwards; 
                }
            }
        }
        ul{
            li{
                &:last-child{
                    span{
                        -webkit-animation:left_show 0.3s forwards; 
                    }
                }
                &:first-child{
                    span{
                        -webkit-animation:left_hide 0.3s forwards; 
                    }
                }
            }
        }
    }
    &.left1{
        article{
            a{
                &:first-child{
                    z-index: 2;
                    -webkit-animation:left_hide 0.3s forwards; 
                }
                &:nth-child(2){
                    z-index: 3;
                    -webkit-animation:left_show 0.3s forwards; 
                }
            }
        }
        ul{
            li{
                &:first-child{
                    span{
                        -webkit-animation:left_show 0.3s forwards; 
                    }
                }
                &:nth-child(2){
                    span{
                        -webkit-animation:left_hide 0.3s forwards; 
                    }
                }
            }
        }
    }
    &.right0{
        article{
            a{
                &:last-child{
                    z-index: 2;
                    -webkit-animation:right_hide 0.3s forwards; 
                }
                &:first-child{
                    z-index: 3;
                    -webkit-animation:right_show 0.3s forwards; 
                }
            }
        }
        ul{
            li{
                &:last-child{
                    span{
                        -webkit-animation:right_show 0.3s forwards; 
                    }
                }
                &:first-child{
                    span{
                        -webkit-animation:right_hide 0.3s forwards; 
                    }
                }
            }
        }
    }
    &.right1{
        article{
            a{
                &:first-child{
                    z-index: 2;
                    -webkit-animation:right_hide 0.3s forwards; 
                }
                &:nth-child(2){
                    z-index: 3;
                    -webkit-animation:right_show 0.3s forwards; 
                }
            }
        }
        ul{
            li{
                &:first-child{
                    span{
                        -webkit-animation:right_show 0.3s forwards; 
                    }
                }
                &:nth-child(2){
                    span{
                        -webkit-animation:right_hide 0.3s forwards; 
                    }
                }
            }
        }
    }

    //从左侧出发
    @keyframes left_show{
        0%{
            transform: translateX(-100%);
        }
        100%{
            transform: translateX(0);
        }
    }
    //从右侧出发
    @keyframes right_show{
        0%{
            transform: translateX(100%);
        }
        100%{
            transform: translateX(0);
        }
    }
    //从左侧隐藏
    @keyframes left_hide{
        0%{
            transform: translateX(0);
        }
        100%{
            transform: translateX(100%);
        }
    }
    //从右侧隐藏
    @keyframes right_hide{
        0%{
            transform: translateX(0);
        }
        100%{
            transform: translateX(-100%);
        }
    }

    article{
        position: relative;
        width: 100%;
        height: 3.58rem;
        overflow: hidden;
        a{
            position: absolute;
            width: 100%;
            height: 100%;
            img{
                width: 100%;
                height: 100%;
            }            
        }
    }
    ul{
        position: absolute;
        z-index: 3;
        bottom: 0.24rem;
        left: 50%;
        transform: translateX(-50%);
        display: table;
        li{
            position: relative;
            float: left;
            width: 0.22rem;
            height: 0.06rem;
            margin: 0 0.12rem;
            background-color: @fe;
            border-radius: 1rem ;
            box-shadow: rgba(71,63,64,0.75) 0 2px 2px;
            font-size: 0;
            overflow: hidden;
            span{
                display: block;
                width: 100%;
                height: 100%;
                background-color: @fff;
            }
        }
    }
}

转载于:https://my.oschina.net/u/3797834/blog/1634765