css一张图无限循环滚动,纯css实现单张图片无限循环无缝滚动

functionaddKeyFrames(height,offsetHeight){

let style= document.createElement(‘style‘);

style.type= ‘text/css‘;

let keyFrames= ‘@-webkit-keyframes scrollUpAndPause { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(0); transform: translateY(A_DYNAMIC_VALUE); } 100% { -webkit-transform: translateY(0); transform: translateY(A_DYNAMIC_VALUE); } } @-moz-keyframes scrollUpAndPause { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(0); transform: translateY(A_DYNAMIC_VALUE); } 100% { -webkit-transform: translateY(0); transform: translateY(A_DYNAMIC_VALUE); } } @-o-keyframes scrollUpAndPause { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(0); transform: translateY(A_DYNAMIC_VALUE); } 100% { -webkit-transform: translateY(0); transform: translateY(A_DYNAMIC_VALUE); } } @keyframes scrollUpAndPause { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(0); transform: translateY(A_DYNAMIC_VALUE); } 100% { -webkit-transform: translateY(0); transform: translateY(A_DYNAMIC_VALUE); } } @-webkit-keyframes scrollUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(0); transform: translateY(B_DYNAMIC_VALUE); } } @-moz-keyframes scrollUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(0); transform: translateY(B_DYNAMIC_VALUE); } } @-o-keyframes scrollUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(0); transform: translateY(B_DYNAMIC_VALUE); } } @keyframes scrollUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(0); transform: translateY(B_DYNAMIC_VALUE); } }‘;

keyFrames= keyFrames.replace(/A_DYNAMIC_VALUE/g, ‘-‘+(height-(offsetHeight-height)/2)+‘px‘);

keyFrames = keyFrames.replace(/B_DYNAMIC_VALUE/g, ‘-‘+height+‘px‘);

style.innerHTML=keyFrames;

document.getElementsByTagName(‘head‘)[0].appendChild(style);

}//初始化图片滚动动画高度

functioninitAnimate() {

const adLeftHeight= document.getElementById("adLeft").offsetHeight; //左侧区域高度

const adLeftWidth = document.getElementById("adLeft").offsetWidth; //左侧区域宽度

let leftImage = newImage();

let leftImageWidth= "";

let leftImageHeight= "";

leftImage.src=window.campaign.image_url;

leftImage.οnlοad= function() {

leftImageWidth=leftImage.width;

leftImageHeight=leftImage.height;

let imageRealHeight= adLeftWidth * (leftImageHeight /leftImageWidth);//const imageBoxScrollHeight = document.getElementById("imageBox").scrollHeight; // 三张图片的总高度

//const imageHeight = imageBoxScrollHeight/3;// 单张图片高度

addKeyFrames(imageRealHeight,adLeftHeight);

}

}