306 lines
10 KiB
JavaScript
306 lines
10 KiB
JavaScript
/* ................... 防抖函数 ................... */
|
||
function debounce(func, delay) {
|
||
let timeout
|
||
return function () {
|
||
clearTimeout(timeout) // 如果持续触发，那么就清除定时器，定时器的回调就不会执行。
|
||
timeout = setTimeout(() => {
|
||
func.apply(this, arguments)
|
||
}, delay)
|
||
}
|
||
}
|
||
// 节流函数
|
||
function throttle(handle, wait) {
|
||
let lastTime = 0
|
||
return function (e) {
|
||
let nowTime = new Date().getTime()
|
||
if (nowTime - lastTime > wait) {
|
||
handle()
|
||
lastTime = nowTime
|
||
}
|
||
}
|
||
}
|
||
var vm = new Vue({
|
||
el: "#app",
|
||
data: {
|
||
menuCss: false,
|
||
menuActive: 0,
|
||
logo: "/assets/images/logo.png",
|
||
tel: '',
|
||
i: 2,
|
||
activeIndex: 2,
|
||
solveSwiper: "",
|
||
teleManaI: 1,
|
||
fuwuTabI: 1,
|
||
fuwuTabJ: 1,
|
||
fuwuTabK: 1,
|
||
advanTabI: 1,
|
||
questionI: 1,
|
||
callSenceTabI: 1,
|
||
videoShowFlag: false,
|
||
videoTopShow: true,
|
||
videoBtnShow: true,
|
||
videoHonorBtnShow: true,
|
||
menuLeft: false,
|
||
useI: 1
|
||
},
|
||
mounted() {
|
||
window.addEventListener('scroll', this.onScroll, false);
|
||
window.addEventListener("scroll", this.menuFixed);
|
||
this.scrollToPage(); // 跳转到页面的指定位置
|
||
this.allSwiper();
|
||
this.gifPlay();
|
||
if (screen.availWidth !== 1280 && window.devicePixelRatio !== 1.5) {
|
||
new WOW().init();
|
||
};
|
||
},
|
||
mixins: [mixins],
|
||
methods: {
|
||
menuFixed: debounce(function () {
|
||
if (!!document.documentElement.scrollTop && document.documentElement.scrollTop > 500 || document.body.scrollTop > 500) {
|
||
this.menuCss = true;
|
||
// this.logo = "/assets/images/logo1.png";
|
||
} else {
|
||
this.menuCss = false;
|
||
// this.logo = "/assets/images/logo.png";
|
||
}
|
||
}, 100),
|
||
solveTab(i) {
|
||
this.i = i;
|
||
var j = i - 1;
|
||
this.solveSwiper.slideTo(j, 1000, false);
|
||
},
|
||
teleMana(i) {
|
||
this.teleManaI = i;
|
||
},
|
||
fuwuTab(i) {
|
||
this.fuwuTabI = i;
|
||
},
|
||
fuwuTab2(i) {
|
||
this.fuwuTabJ = i;
|
||
},
|
||
fuwuTab3(i) {
|
||
this.fuwuTabK = i;
|
||
},
|
||
callSenceTab(i) {
|
||
this.callSenceTabI = i;
|
||
},
|
||
videoPlay(e) {
|
||
e.preventDefault();
|
||
var video = document.querySelector('#call-video');
|
||
let _this = this;
|
||
if (video.paused) {
|
||
video.play();
|
||
this.videoBtnShow = false;
|
||
this.videoTopShow = false;
|
||
video.controls = false;
|
||
} else if (video.play()) {
|
||
video.pause();
|
||
this.videoBtnShow = true;
|
||
video.controls = true;
|
||
}
|
||
video.addEventListener('ended', function () {
|
||
_this.videoBtnShow = true;
|
||
_this.videoTopShow = true;
|
||
}, false);
|
||
},
|
||
videoShow(e) {
|
||
e.preventDefault()
|
||
var video = document.getElementById("fix-video")
|
||
this.videoShowFlag = true
|
||
if (video.paused) {
|
||
video.play()
|
||
}
|
||
},
|
||
videoClose() {
|
||
this.videoShowFlag = false
|
||
var video = document.getElementById("fix-video")
|
||
if (video.play()) {
|
||
video.pause()
|
||
}
|
||
},
|
||
videoHonorShow(e) {
|
||
e.preventDefault()
|
||
var self = this
|
||
var video = document.getElementById("honor-video")
|
||
this.videoHonorBtnShow = false
|
||
if (video.paused) {
|
||
video.play()
|
||
video.controls = "controls"
|
||
video.addEventListener("ended", function () {
|
||
video.controls = ""
|
||
self.videoHonorBtnShow = true
|
||
})
|
||
}
|
||
},
|
||
onScroll: debounce(function () {
|
||
// 获取所有锚点元素
|
||
const navContents = document.querySelectorAll('main .call-menu')
|
||
// 所有锚点元素的 offsetTop
|
||
const offsetTopArr = []
|
||
navContents.forEach(item => {
|
||
offsetTopArr.push(item.offsetTop)
|
||
})
|
||
// 获取当前文档流的 scrollTop
|
||
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
|
||
// 定义当前点亮的导航下标
|
||
let navIndex = 0
|
||
for (let n = 0; n < offsetTopArr.length; n++) {
|
||
// 如果 scrollTop 大于等于第n个元素的 offsetTop 则说明 n-1 的内容已经完全不可见
|
||
// 那么此时导航索引就应该是n了
|
||
if (scrollTop >= offsetTopArr[n] - 100) {
|
||
navIndex = n
|
||
}
|
||
}
|
||
this.menuActive = navIndex
|
||
}, 100),
|
||
// 跳转到指定索引的元素
|
||
scrollToPs(index) {
|
||
// throttle((index) => {
|
||
// console.log("🚀 file: callcenter.js:153 index:", index)
|
||
var targetOffsetTop = document.getElementsByClassName("call-menu")[index].offsetTop;
|
||
var offsetTop = targetOffsetTop - 50;
|
||
if (screen.availWidth === 1280 && window.devicePixelRatio === 1.5) {
|
||
offsetTop = targetOffsetTop / 1.2 - 50
|
||
}
|
||
scrollTo(0, offsetTop);
|
||
// }, 100)
|
||
},
|
||
scrollToPage() {
|
||
if (sessionStorage.getItem('position')) {
|
||
scrollTo({
|
||
left: 0,
|
||
top: sessionStorage.getItem('position')
|
||
});
|
||
sessionStorage.removeItem('position');
|
||
}
|
||
},
|
||
pageToPosition() {//页面跳转时，滚动到上次的位置
|
||
let position = document.documentElement.scrollTop || document.body.scrollTop;
|
||
sessionStorage.setItem('position', position);
|
||
},
|
||
allSwiper() {
|
||
var _this = this;
|
||
if (/android|windows phone|webos|iphone|ipod|blackberry/i.test(navigator.userAgent.toLowerCase())) {
|
||
var stateSwiper = new Swiper('.call-state-box', {
|
||
loop: true, // 循环模式选项
|
||
initialSlide: 1,
|
||
spaceBetween: "0",
|
||
slidesPerView: 1,
|
||
// centeredSlides: true,
|
||
slideToClickedSlide: true,
|
||
autoplay: {
|
||
delay: 3000,
|
||
disableOnInteraction: false
|
||
},
|
||
pagination: {
|
||
el: '.swiper-pagination',
|
||
clickable: true
|
||
},
|
||
navigation: {
|
||
nextEl: '.swiper-button-next',
|
||
prevEl: '.swiper-button-prev'
|
||
}
|
||
});
|
||
} else {
|
||
var stateSwiper = new Swiper('.call-state-box', {
|
||
loop: true, // 循环模式选项
|
||
initialSlide: 1,
|
||
spaceBetween: "40",
|
||
slidesPerView: 4,
|
||
// centeredSlides: true,
|
||
slideToClickedSlide: true,
|
||
autoplay: {
|
||
delay: 3000
|
||
},
|
||
pagination: {
|
||
el: '.swiper-pagination',
|
||
clickable: true,
|
||
disableOnInteraction: false
|
||
},
|
||
navigation: {
|
||
nextEl: '.swiper-button-next',
|
||
prevEl: '.swiper-button-prev',
|
||
}
|
||
});
|
||
}
|
||
},
|
||
gifPlay() {
|
||
//observer配置项
|
||
var observerOptions = {
|
||
threshold: .5, //目标元素与视窗重叠的阈值（0~1）
|
||
root: null // 目标视窗即目标元素的父元素，如果没有提供，则默认body元素
|
||
}
|
||
//observer 回调函数
|
||
const observerCallback = (entries) => {
|
||
entries.forEach(item => {
|
||
/*
|
||
* item.time发生相交到相应的时间，毫秒
|
||
* item.rootBounds：根元素矩形区域的信息，如果没有设置根元素则返回 null，图中蓝色部分区域。
|
||
* item.boundingClientRect：目标元素的矩形区域的信息，图中黑色边框的区域。
|
||
* item.intersectionRect：目标元素与视口（或根元素）的交叉区域的信息，图中蓝色方块和粉红色方块相交的区域。
|
||
* item.isIntersecting：目标元素与根元素是否相交
|
||
* item.intersectionRatio：目标元素与视口（或根元素）的相交比例。
|
||
* item.target：目标元素，图中黑色边框的部分。
|
||
*/
|
||
|
||
// 当前元素可见
|
||
// console.log("🚀 observerCallback item.intersectionRatio", item.intersectionRatio)
|
||
if (item.isIntersecting) {
|
||
{
|
||
const imgBeforeSrc = item.target.src;
|
||
let imgSrc = imgBeforeSrc.replace(/\.png/g, ".gif")
|
||
item.target.src = imgSrc;
|
||
}
|
||
// 解除观察当前元素 避免不可见时候再次调用callback函数
|
||
// observer.unobserve(item.target)
|
||
}
|
||
else {
|
||
// 当前元素不可见
|
||
const imgBeforeSrc = item.target.src;
|
||
let imgSrc = imgBeforeSrc.replace(/\.gif/g, ".png")
|
||
item.target.src = imgSrc;
|
||
}
|
||
})
|
||
}
|
||
const webpObserverCallback = (entries) => {
|
||
entries.forEach(item => {
|
||
if (item.isIntersecting) {
|
||
{
|
||
const imgBeforeSrc = item.target.src;
|
||
let imgSrc = imgBeforeSrc.replace(/\.png/g, ".webp")
|
||
item.target.src = imgSrc;
|
||
}
|
||
// 解除观察当前元素 避免不可见时候再次调用callback函数
|
||
// observer.unobserve(item.target)
|
||
}
|
||
else {
|
||
// 当前元素不可见
|
||
const imgBeforeSrc = item.target.src;
|
||
let imgSrc = imgBeforeSrc.replace(/\.webp/g, ".png")
|
||
item.target.src = imgSrc;
|
||
}
|
||
})
|
||
}
|
||
//实例化观察者对象
|
||
var observer = new IntersectionObserver(observerCallback, observerOptions);
|
||
var webpObserver = new IntersectionObserver(observerCallback, observerOptions);
|
||
//将目标元素传入观察对象
|
||
if (location.href.indexOf("/phone") > -1) {
|
||
webpObserver.observe(document.querySelector("#call-item-img201 img"));
|
||
webpObserver.observe(document.querySelector("#call-item-img202 img"));
|
||
webpObserver.observe(document.querySelector("#call-item-img203 img"));
|
||
webpObserver.observe(document.querySelector("#call-item-img204 img"));
|
||
webpObserver.observe(document.querySelector("#call-item-img205 img"));
|
||
} else {
|
||
observer.observe(document.querySelector("#call-item-img1 img"));
|
||
observer.observe(document.querySelector("#call-item-img2 img"));
|
||
observer.observe(document.querySelector("#call-item-img21 img"));
|
||
observer.observe(document.querySelector("#call-item-img3 img"));
|
||
observer.observe(document.querySelector("#call-item-img31 img"));
|
||
}
|
||
},
|
||
menuLeftSwitch(bool) {
|
||
this.menuLeft = bool
|
||
},
|
||
}
|
||
}); |