使用jQuery创建一段代码后,确保它可以在chrome上运行,然后在IE上对其进行了测试,然后我意识到没有jQuery代码在其中运行。我试图通过将所有jQuery更改为Pure JS来解决此问题。但仍然没有结果。请问有人在这里可以帮助我了解IE为什么会出现这种情况以及如何解决此问题。是给客户的,他们正在使用IE。
所以代码是:
let Section5Run = true;
const myServices = $('.service-link');
function ServiceSlideIn(services, index = 0) {
if (services.length -1 < index) { return; }
$(services[index]).css('transform', 'translateX(0%)');
console.log("Section 5 occurance " + index);
setTimeout(ServiceSlideIn, 500 , services, ++index);
}
//On Load Page
$(document).ready(function() {
//When Window Is Scrolled
$(window).scroll( function(){
const MSOFFSET = $('.service-link')[0].clientHeight/2;
var bottom_of_object = $('#section-5-box').offset().top + MSOFFSET;
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > bottom_of_object && Section5Run ){
Section5Run = false;
ServiceSlideIn(myServices);
}
});
});
然后将其转换为此:
function ServiceSlideIn(services, index = 0) {
if (services.length -1 < index) { return; }
services[index].style.transform = "translateX(0%)";
console.log("Section 5 occurance " + index);
setTimeout(ServiceSlideIn, 500 , services, ++index);
}
var cond = true;
document.addEventListener("scroll", function () {
var wind = window.scrollY;
var sec_5 = document.getElementById("section-5-box");
var items = document.getElementsByClassName("service-link");
var sec_off = offset(sec_5).top;
console.log("rest");
if (wind + (sec_5.clientHeight * 1.5) > sec_off && cond){
console.log("Clients's top: " + sec_off);
console.log("Client's Height is " + sec_5.clientHeight);
console.log("Window's height: " + (wind + sec_5.clientHeight/3));
console.log("items Length " + items.length);
ServiceSlideIn(items);
cond= false;
}
});
function offset(el) {
var rect = el.getBoundingClientRect(),
scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
scrollTop = window.pageYOffset || document.documentElement.scrollTop;
return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
}
在这里完成了相当基本的幻灯片动画。
请cubeangle.com自己检查网站,然后在“我们的服务”下,框从右到左滑动。
谢谢大家。