对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最常用与实用的创建类的代码
Aug 12 Javascript
关于js datetime的那点事
Nov 15 Javascript
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
Jquery实现textarea根据文本内容自适应高度
Apr 03 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
Jun 20 Javascript
AngularJs页面筛选标签小功能
Aug 01 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
Sep 08 Javascript
vue-router中的hash和history两种模式的区别
Jul 17 Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 Javascript
Angular8 Http拦截器简单使用教程
Aug 20 Javascript
vue element upload组件 file-list的动态绑定实现
Oct 11 Javascript
vue实现带过渡效果的下拉菜单功能
Feb 19 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 flv视频时间获取函数
2010/06/29 PHP
php木马webshell扫描器代码
2012/01/25 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
javascript concat数组累加 示例
2009/09/03 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
js的alert弹出框出现乱码解决方案
2013/09/02 Javascript
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
jQuery中Ajax的get、post等方法详解
2015/01/20 Javascript
js兼容火狐显示上传图片预览效果的方法
2015/05/21 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
JavaScript 基础函数_深入剖析变量和作用域
2016/05/18 Javascript
JavaScript中windows.open()、windows.close()方法详解
2016/07/28 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
2017/08/24 Javascript
AngularJs 禁止模板缓存的方法
2017/11/28 Javascript
微信小程序实现弹出菜单
2018/07/19 Javascript
vue+django实现一对一聊天功能的实例代码
2019/07/17 Javascript
js 判断当前时间是否处于某个一个时间段内
2019/09/19 Javascript
vue 取出v-for循环中的index值实例
2019/11/09 Javascript
小结Python用fork来创建子进程注意事项
2014/07/03 Python
Python实现破解猜数游戏算法示例
2017/09/25 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
django-orm F对象的使用 按照两个字段的和,乘积排序实例
2020/05/18 Python
美国老牌主机服务商:iPage
2016/07/22 全球购物
Java里面Pass by value和Pass by Reference是什么意思
2016/05/02 面试题
物流经理自我评价
2013/09/23 职场文书
我未来的职业规划范文
2014/01/11 职场文书
区域经理岗位职责
2015/02/02 职场文书
2015年安全员工作总结范文
2015/04/22 职场文书
女性健康知识讲座通知
2015/04/23 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
基于Python绘制子图及子图刻度的变换等的问题
2021/05/23 Python
python实现双向链表原理
2022/05/25 Python