我正在开发一个基于 jQuery 的音乐播放器,它在主要部分中有很长的项目列表(无序列表,每个 <li> 中都有 <div> 元素,用于获取有关艺术家、专辑和标题的信息)。
您可以在此处访问它的临时公开版本:http: //music.sixteennet.co.uk/ ?anonymous
(所有歌曲都是公开版的无用链接,所以不要费心播放任何东西:P)
首先,快速描述一下这个东西到底是什么:
左侧是一个侧边栏,显示即将播放的歌曲列表。用户在搜索/单击艺术家后选择主列表中的歌曲(单击,shift-click,ctrl-click,你知道的),并通过点击或拖放将它们添加到左侧的播放列表中。我已经完成了所有这些工作(这个问题与如何构建 Javascript 用户界面无关)。
问题:$(window).mousemove()、.mouseup() 和 .mousedown() 包含将框带入视图的函数,其高度以像素为单位(16 * 主列表中选定歌曲的数量)[每个 <li > 高 16 像素]。当鼠标移动时,此框随之移动,直到鼠标悬停在播放列表上时,播放列表会改变颜色,如果用户决定使用 mouseup()(取消单击),则将所选歌曲添加到播放列表中。
唯一的问题是,当鼠标在当前可见的选定歌曲框的情况下移动时,在 Google Chrome中,框的移动非常缓慢,但只有当鼠标位于主歌曲列表上时(但是,CPU 使用率在整个显示框的时间)。在 Firefox 6 和 IE 9 中,整个移动是平滑的,CPU 使用率不是 100%(即使在 Athlon 64 3500+ 上)。(我)在两台 PC 上重复了这个测试,一台运行 Windows 7,另一台运行 Ubuntu Linux。
我非常怀疑这是谷歌浏览器的一个错误,但如果有人愿意通过源代码并告诉我问题是什么(如果有的话)......你就是我的上帝:)
编辑:我说 Chrome/V8 的原因是因为 Safari,使用相同的渲染引擎(WebKit)没有这个问题(虽然它不如 Firefox/IE9/Opera 流畅)