移動端banner css3(@keyframes )實現
這個是我用webpack時的生產文件部分，爲了方便觀看，在頁面引入了less和vue的cdn，須要複製的話方便看javascript
注：cssreset部分沒有寫進來css
//文檔結構，只看有用的部分便可html
//html部分vue
<!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部分java
//移動端屏幕適配
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部分webpack
@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;
}
}
}
}
相關文章
- 1. 移動端banner css3(@keyframes )實現
- 2. 【css3】CSS3動畫（animation @keyframes）
- 3. CSS3 動畫關鍵幀 @keyframes
- 4. @-webkit-keyframes myfirst 動畫 css3
- 5. css3 keyframes 實現無限旋轉360度
- 6. CSS3 @keyframes 語法
- 7. css3中的 @Keyframes
- 8. CSS3 @keyframes animate
- 9. css3實現左右移動
- 10. CSS3 @keyframes 規則（1）
- 更多相關文章...
- • 移動設備 統計 - 瀏覽器信息
- • Hibernate實現增刪改查 - Hibernate教程
- • ☆基於Java Instrument的Agent實現
- • Spring Cloud 微服務實戰(三) - 服務註冊與發現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
