币啰编程网

 找回密码
 注册(Register)

QQ登录

只需一步,快速开始

查看: 76|回复: 23

[求助] setInerval实现图片滚动,离开页面后又返回页面时图片加速滚动?

[复制链接]

签到天数: 70 天

[LV.6]常住居民II

发表于 2020-3-18 21:27:26 | 显示全部楼层 |阅读模式
5金钱
在每次页面加载的时候会清除定时器。
问题产生原因:
由于在加载了图片滚动的页面之后,又去到了其他页面,但是定时器没有停止,而页面又没有显示在用户面前,当返回页面的时候,就会把之前定时器中已经移动的图片动画一股脑移动,就会出现如题所述加速滚动的效果。

最佳答案

查看完整内容

监听页面是否显示在用户面前,是:重新走定时器方法,否,清除定时器。以下判断页面是否展示的方法,在安卓5.0 等低版本系统下不生效。




上一篇:币啰编程开发网官方讨论群是多少?
下一篇:IDEA常用快捷键有哪些、?
分享到:

签到天数: 112 天

[LV.6]常住居民II

发表于 2020-3-18 21:27:27 | 显示全部楼层
监听页面是否显示在用户面前,是:重新走定时器方法,否,清除定时器。
以下判断页面是否展示的方法,在安卓5.0 等低版本系统下不生效。
  1. function bannerScroll() {
  2.     let imageBox = document.getElementById("imageBox");
  3.     imageBox.classList.remove('roll-animation-3');
  4.     imageBox.classList.remove('roll-animation-2');
  5.     imageBox.classList.remove('roll-animation-1');
  6.     const bodyWidth = document.body.clientWidth;
  7.     const bodyHeight = document.body.clientHeight;
  8.     const v1 = ((320 / 250) + (320 / 90)) / 2; //320*250尺寸比边界值
  9.     const ratio = bodyWidth / bodyHeight;
  10.     let leftImage = new Image();
  11.     leftImage.src = window.campaign.image_url;
  12.     let leftImageWidth = "";
  13.     let leftImageHeight = "";
  14.     let adLeft = document.getElementById("adLeft");
  15.     leftImage.onload = function () {
  16.         leftImageWidth = leftImage.width;
  17.         leftImageHeight = leftImage.height;
  18.         let imageRealHeight = adLeft.offsetWidth * (leftImageHeight / leftImageWidth);
  19.         // 设置所有图片的高度相同,否则会出现图片拼接不居中问题
  20.         let imageItem = Array.from(document.getElementsByClassName('image-item'));
  21.         for(let item of imageItem){
  22.             item.style.height = imageRealHeight+'px';
  23.         }
  24.         if (ratio < v1) {  //  适配 320*250 设计图样式,停留3s
  25.             slider(imageRealHeight, 4000, "roll-animation-1")
  26.         } else {  // 不停留,直接滚动,1s速度跟css 动画速度保持一致
  27.             slider(imageRealHeight, 3000, "roll-animation-3")
  28.         }
  29.     }
  30. }
  31. var scrollTimer ;// 定义banner滚动定时器
  32. var hidden, visibilityChange;
  33. if (typeof document.hidden !== "undefined") {
  34.     hidden = "hidden";
  35.     visibilityChange = "visibilitychange";
  36. } else if (typeof document.msHidden !== "undefined") {
  37.     hidden = "msHidden";
  38.     visibilityChange = "msvisibilitychange";
  39. } else if (typeof document.webkitHidden !== "undefined") {
  40.     hidden = "webkitHidden";
  41.     visibilityChange = "webkitvisibilitychange";
  42. }

  43. function handleVisibilityChange() {
  44.     if (document[hidden]) {
  45.         //页面失去焦点也就是切换页面时清除定时器
  46.         clearInterval(scrollTimer)    //清除定时器
  47.         console.log("失去焦点");
  48.     } else {
  49.         //页面聚焦时开启定时器,即重新初始化banner图片滚动
  50.         bannerScroll()
  51.         console.log("得到焦点");
  52.     }
  53. }

  54. // 判断浏览器的支持情况
  55. if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") {
  56.     console.log("不支持检测页面焦点获取。");
  57. } else {
  58.     // 监听visibilityChange事件
  59.     document.addEventListener(visibilityChange, handleVisibilityChange, false);
  60. }
  61. // 图片向上滚动,暂停3s
  62. function slider(imageRealHeight, interval, rollClass) {
  63.     clearInterval(scrollTimer);
  64.     let imageBox = document.getElementById("imageBox");
  65.     imageRealHeight = parseFloat(imageRealHeight);
  66.     let clientHeight = parseFloat(document.body.clientHeight);
  67.     let edgeLength = (clientHeight - imageRealHeight) / 2;
  68.     const imageHtml = imageBox.innerHTML;
  69.     imageBox.innerHTML = imageHtml + imageHtml + imageHtml;
  70.     imageBox.style.top = -(imageRealHeight - edgeLength) + 'px';
  71.     let count = 0;
  72.     scrollTimer = setInterval(() => {
  73.         imageBox.classList.add(rollClass);
  74.         const initTop = -(imageRealHeight - edgeLength) + 'px';
  75.         if (count++ === 30) {
  76.             imageBox.classList.remove(rollClass);
  77.             imageBox.innerHTML = imageHtml + imageHtml + imageHtml;
  78.             imageBox.style.top = initTop;
  79.             count = 0;
  80.         } else {
  81.             imageBox.innerHTML = imageBox.innerHTML + imageHtml;
  82.             imageBox.style.top = parseFloat(imageBox.style.top) - (imageRealHeight) + 'px';
  83.         }
  84.     }, interval)
  85. }


  86. bannerScroll();// 执行图片滚动方法
复制代码



回复

使用道具 举报

签到天数: 20 天

[LV.4]偶尔看看III

发表于 2020-3-18 21:28:07 | 显示全部楼层
投楼主一票,不用谢哦!
回复

使用道具 举报

签到天数: 9 天

[LV.3]偶尔看看II

发表于 2020-3-18 21:29:25 | 显示全部楼层
你觉得该怎么做呢?
回复

使用道具 举报

签到天数: 20 天

[LV.4]偶尔看看III

发表于 2020-3-18 21:29:34 | 显示全部楼层
楼主你想太多了!
回复

使用道具 举报

签到天数: 9 天

[LV.3]偶尔看看II

发表于 2020-3-18 23:00:15 | 显示全部楼层
今天怎么了,什么人都出来了!
回复

使用道具 举报

签到天数: 10 天

[LV.3]偶尔看看II

发表于 2020-3-18 23:23:25 | 显示全部楼层
怎么我回帖都没人理我呢?
回复

使用道具 举报

签到天数: 7 天

[LV.3]偶尔看看II

发表于 2020-3-18 23:23:25 | 显示全部楼层
楼上的说的很好!
回复

使用道具 举报

签到天数: 12 天

[LV.3]偶尔看看II

发表于 2020-3-19 02:24:39 | 显示全部楼层
楼主病的不轻啊!
回复

使用道具 举报

签到天数: 20 天

[LV.4]偶尔看看III

发表于 2020-3-19 02:34:45 | 显示全部楼层
精神病院在通缉楼主!
回复

使用道具 举报


НП互联网知识НП

微博

НП技术交流群НП

技术群

QQ手机版 禁言处罚 币啰编程网 蜀ICP备19036706号 Discuz! X3.4 Powered by © 2001-2013 Comsenz Inc. 

快速回复 快速发帖 返回顶部 返回列表