对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