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


Posted in Javascript onOctober 29, 2011

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

就有这种效果,不过影响不大。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); 
// 红块运动函数 
})();
Javascript 相关文章推荐
Javascript 面向对象之重载
May 04 Javascript
ajax请求get与post的区别总结
Nov 04 Javascript
js 实现的可折叠留言板(附源码下载)
Jul 01 Javascript
jquery实现动态操作select选中
Feb 11 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
Jan 28 Javascript
js Dom实现换肤效果
Oct 21 Javascript
JS实现简单的浮动碰撞效果示例
Dec 28 Javascript
bootstrap table支持高度百分比的实例代码
Feb 28 Javascript
微信小程序实现分享到朋友圈功能
Jul 19 Javascript
浅谈JavaScript 代码整洁之道
Oct 23 Javascript
JS中自定义事件的使用与触发操作实例分析
Nov 01 Javascript
Vue 技巧之控制父类的 slot
Feb 24 Javascript
仿猪八戒网左下角的文字滚动效果
Oct 28 #Javascript
js实现双向链表互联网机顶盒实战应用实现
Oct 28 #Javascript
js常用代码段收集
Oct 28 #Javascript
jWiard 基于JQuery的强大的向导控件介绍
Oct 28 #Javascript
理解JSON:3分钟课程
Oct 28 #Javascript
Kibo 用于处理键盘事件的Javascript工具库
Oct 28 #Javascript
stream.js 一个很小、完全独立的Javascript类库
Oct 28 #Javascript
You might like
配置最新的PHP加MYSQL服务器
2006/10/09 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
2017/03/17 PHP
PHP中引用类型和值类型功能与用法示例
2019/02/26 PHP
PHP删除数组中特定元素的两种方法
2019/02/28 PHP
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
javascript实现可键盘控制的抽奖系统
2016/03/10 Javascript
简单了解JavaScript操作XPath的一些基本方法
2016/06/03 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
2016/06/03 Javascript
Node层模拟实现multipart表单的文件上传示例
2018/01/02 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
vue项目开发中setTimeout等定时器的管理问题
2018/09/13 Javascript
js中数组常用方法总结(推荐)
2019/04/09 Javascript
layui form.render('select', 'test2') 更新渲染的方法
2019/09/27 Javascript
js实现点赞效果
2020/03/16 Javascript
JavaScript实现点击图片换背景
2020/11/20 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
[46:02]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第二局
2016/02/28 DOTA
[02:07]TI9显影之尘系列 - Vici Gaming
2019/08/20 DOTA
从零学python系列之浅谈pickle模块封装和拆封数据对象的方法
2014/05/23 Python
在Python中操作时间之mktime()方法的使用教程
2015/05/22 Python
Python找出9个连续的空闲端口
2016/02/01 Python
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
对python程序内存泄漏调试的记录
2018/06/11 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
python基于opencv 实现图像时钟
2021/01/04 Python
Converse匡威法国官网:美国著名帆布鞋品牌
2018/12/05 全球购物
机电专业大学生求职信
2013/10/04 职场文书
传播学毕业生求职信
2013/10/11 职场文书
意向协议书范本
2014/04/23 职场文书
毕业生工作求职信
2014/06/30 职场文书
个人批评与自我批评材料
2014/10/17 职场文书
python 办公自动化——基于pyqt5和openpyxl统计符合要求的名单
2021/05/25 Python
Python答题卡识别并给出分数的实现代码
2021/06/22 Python
德劲DE1105机评
2022/04/05 无线电