对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 相关文章推荐
JQuery 获取和设置Select选项的代码
Feb 07 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
Jul 27 Javascript
js 页面元素的几个用法总结
Nov 18 Javascript
javascript简单实现命名空间效果
Mar 06 Javascript
js实现checkbox全选和反选示例
May 01 Javascript
jQuery中get()方法用法实例
Dec 27 Javascript
js实现鼠标点击文本框自动选中内容的方法
Aug 20 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
Jul 06 Javascript
移动端刮刮乐的实现方式(js+HTML5)
Mar 23 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
Jul 25 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
Jan 29 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
Feb 06 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 分页原理分析,大家可以看看
2009/12/21 PHP
php页面缓存ob系列函数介绍
2012/10/18 PHP
php加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
php自定义分页类完整实例
2015/12/25 PHP
php实现基于PDO的预处理示例
2017/03/28 PHP
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
Yii框架操作cookie与session的方法实例详解
2019/09/04 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
JS 精确统计网站访问量的实例代码
2013/07/05 Javascript
Bootstrap Table使用方法详解
2016/08/01 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
2016/11/21 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
vue使用laydate时间插件的方法
2018/11/14 Javascript
vue如何获取自定义元素属性参数值的方法
2019/05/14 Javascript
[01:00]DOTA2 store: Collection of Artisan's Wonders
2015/08/12 DOTA
python实现的防DDoS脚本
2011/02/08 Python
py2exe 编译ico图标的代码
2013/03/08 Python
Python实现的Kmeans++算法实例
2014/04/26 Python
Python实现检测服务器是否可以ping通的2种方法
2015/01/01 Python
解决python通过cx_Oracle模块连接Oracle乱码的问题
2018/10/18 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
python3 线性回归验证方法
2019/07/09 Python
Python 中list ,set,dict的大规模查找效率对比详解
2019/10/11 Python
Python如何读取、写入CSV数据
2020/07/28 Python
python 模拟登陆163邮箱
2020/12/15 Python
利用Storage Event实现页面间通信的示例代码
2018/07/26 HTML / CSS
荷兰男士时尚网上商店:Suitable
2017/12/25 全球购物
会计专业大学生职业生涯规划书
2014/02/11 职场文书
青年志愿者活动方案
2014/08/17 职场文书
2015学生会文艺部工作总结
2015/04/03 职场文书
2015年乡镇信访工作总结
2015/04/07 职场文书
演讲稿:​快乐,从不抱怨开始!
2019/04/02 职场文书
python scipy 稀疏矩阵的使用说明
2021/05/26 Python
HTML常用标签超详细整理
2022/03/19 HTML / CSS