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);
}
}