对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!

时间:2024-04-28 09:43:23 

在上一篇文章: 觉得猪八戒网左下角的文字滚动,效果不错,自己摸索了一下,以自己的方法实现了!

就有这种效果,不过影响不大。Demo的影响就大了!

网上也有人出现过这样的问题看下面的帖子地址:

firefox 6下 setInterval的一个问题

讨论的人很多,但没给出答案来。

怎么想都想不明白!

今天,突然茅塞顿开,可能是线程的概念,但是具体原因还是不明白,希望有人了解其原应告知,非常感激!

Demo 中黑色的Div是不受浏览器标签切换影响的

而红色的Div会受到影响。
HTML:


<div id="move" style="position: absolute; width: 100px; height: 100px; top: 0pt; left: 0pt; background: none repeat scroll 0% 0% #000000; z-index: 999; color: #ffffff;">我不受浏览器标签切换影响!Hoooo</div>
<div id="move2" style="position: absolute; width: 100px; height: 100px; top: 0pt; left: 0pt; background: none repeat scroll 0% 0% red; z-index: 999; color: #ffffff;">我受浏览器标签切换影响!5555</div>


javascript:


(function(){
var elem = Meng.getId('move'),
elem2 = Meng.getId('move2'),
pos = Meng.getElemViewPosition(elem),
view = Meng.getBrowserView(),
//灰块运动函数
move = function(){
var t1 = Meng.animate(elem,{top:0,left:0},{top:view.height-100,left:view.width-100},3000,function(){
var t2 = Meng.animate(elem,{left:view.width-100},{left:100-view.width},3000,function(){
var t3 = Meng.animate(elem,{top:view.height-100},{top:100-view.height},3000,function(){
move();//确定t3运动完后,我再回调move()函数。
});
});
});
};
move();
// 红块运动函数
Meng.setStyle(elem2,{top:0,left:(view.width-100)+'px'});
var move2 = function(){
var t1 = Meng.animate(elem2,{top:0,left:view.width-100},{top:view.height-100,left:100-view.width},3000,function(){
var t2 = Meng.animate(elem2,{top:view.height-100},{top:100-view.height},3000,function(){
var t3 = Meng.animate(elem2,{left:0},{left:view.width-100},3000,function(){
});
});
});
};
move2();
setInterval(function(){move2();},9050);
// 红块运动函数
})();

标签:setInterval
0
投稿

猜你喜欢

  • 详解Vue内部怎样处理props选项的多种写法

    2024-05-03 15:10:39
  • 如何使用Python的OpenCV库处理图像和视频

    2022-09-06 10:22:12
  • Django vue前后端分离整合过程解析

    2022-04-07 21:01:04
  • 解决python彩色螺旋线绘制引发的问题

    2023-06-30 12:49:12
  • 发个js从样式表取值的函数

    2008-05-20 12:23:00
  • python 装饰器功能以及函数参数使用介绍

    2022-04-03 05:12:32
  • Python实现的简单hangman游戏实例

    2021-04-11 19:26:47
  • border边框在浏览器中的渲染方式

    2010-03-10 10:52:00
  • 利用Python实现快速批量转换HEIC文件

    2022-08-01 08:41:35
  • Python 编程语言详细介绍

    2022-08-21 08:39:27
  • MySQL一个索引最多有多少个列?真实的测试例子

    2024-01-20 18:32:39
  • python多线程方法详解

    2023-10-16 02:46:31
  • Python中import导入不同目录的模块方法详解

    2021-04-08 02:37:08
  • python3.8 微信发送服务器监控报警消息代码实现

    2023-05-15 03:29:46
  • Sqlserver 高并发和大数据存储方案

    2024-01-17 22:45:56
  • win10 + anaconda3 + python3.6 安装tensorflow + keras的步骤详解

    2021-05-18 10:22:32
  • 微信小程序使用navigator实现页面跳转功能

    2024-04-25 10:36:14
  • css行高:line-height属性详解

    2008-06-24 11:42:00
  • python列表逆序排列的4种方法

    2022-09-19 18:26:21
  • 使用python模块plotdigitizer抠取论文图片中的数据实例详解

    2023-07-14 01:50:52
  • asp之家 网络编程 m.aspxhome.com