对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实现判断移动终端浏览器版本信息
Dec 09 Javascript
打字效果动画的4种实现方法(超简单)
Oct 18 Javascript
加载 vue 远程代码的组件实例详解
Nov 20 Javascript
详解vue项目的构建,打包,发布全过程
Nov 23 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
May 09 Javascript
微信小程序实现带缩略图轮播效果
Nov 04 Javascript
elementUI select组件使用及注意事项详解
May 29 Javascript
elementUI select组件value值注意事项详解
May 29 Javascript
关于layui 下拉列表的change事件详解
Sep 20 Javascript
angula中使用iframe点击后不执行变更检测的问题
May 10 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
Dec 01 Javascript
Vue时间轴 vue-light-timeline的用法说明
Oct 29 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(7) php 字符串相关应用
2010/03/05 PHP
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
PHP 读取文本文件内容并分页显示
2016/01/02 PHP
php微信公众号开发(2)百度BAE搭建和数据库使用
2016/12/15 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
jquery.post用法示例代码
2014/01/03 Javascript
JavaScript验证电子邮箱的函数
2014/08/22 Javascript
JS获取图片高度宽度的方法分享
2015/04/17 Javascript
JavaScript核心语法总结(推荐)
2016/06/02 Javascript
JS获取一个未知DIV高度的方法
2016/08/09 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
nodejs用gulp管理前端文件方法
2018/06/24 NodeJs
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
2019/05/07 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
利用Python的Django框架生成PDF文件的教程
2015/07/22 Python
python计算列表内各元素的个数实例
2018/06/29 Python
python 从文件夹抽取图片另存的方法
2018/12/04 Python
Python3使用TCP编写一个简易的文件下载器功能
2019/05/08 Python
Pytorch: 自定义网络层实例
2020/01/07 Python
Python中logging日志库实例详解
2020/02/19 Python
Python利用FFT进行简单滤波的实现
2020/02/26 Python
Python unittest框架操作实例解析
2020/04/13 Python
Python实现进度条和时间预估的示例代码
2020/06/02 Python
python 使用cycle构造无限循环迭代器
2020/12/02 Python
全球最大的生存食品、水和装备专用在线市场:BePrepared.com
2020/01/02 全球购物
古汉语文学求职信范文
2014/03/16 职场文书
学校食品安全责任书
2015/01/29 职场文书
2015秋季开学典礼演讲稿
2015/07/16 职场文书
《折线统计图》教学反思
2016/02/22 职场文书
html form表单基础入门案例讲解
2021/07/15 HTML / CSS