`
yiminghe
  • 浏览: 1460291 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

mac chrome 标签效果实现

阅读更多

google 发布了 mac 版的chrome,据说增加了几万行 mac 下特有的平台代码,性能没啥察觉,倒是 mac chrome 的标签效果挺有趣,在关闭和打开新标签时,按照google的说法,顺应mac平台增加了一些滑动效果。



tabPanelLite 实现一下呵 :


演示 @ google code


注意事项:


1. 关键要熟悉 extjs 的动画机制,详见 Ext.Fx分析   ,  Ext.lib.anim分析


2. 注意 动画wrap的生成,不能完全依赖extjs ,要自己订制wrap了。

 

 

/*建立tab包装层,用来定位改变大小并移动,关键overflow:hidden,tab在其中绝对定位*/
	var wrap= lis.item(index).wrap({
		
		style:{position:"relative",float:"left",overflow:"hidden"}
	});
	/*开始动画*/
	lis.item(index).slideOut('bl', { duration: .35 ,
		wrap:wrap,
		callback:function(el){
			el.remove();
			wrap.remove();
			var panels = me.panelContainer.select("> div.panel");
			panels.item(index).remove();
		}
	});
1
0
分享到:
评论

相关推荐

    Chrome浏览器

    10. **跨平台支持**:Chrome支持Windows、Mac OS X、Linux以及Android和iOS等操作系统。 与360浏览器相比,虽然360在本土化服务和安全防护上有其特色,但Chrome的国际标准支持和开源背景使其在性能和隐私保护方面更...

    jquery插件mac os 风格的导航栏

    通过使用JavaScript特效,我们可以模拟出Mac OS中特有的导航栏效果,使网站在视觉上更加吸引人,并提升用户体验。 首先,我们要理解jQuery插件的基本概念。jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历...

    解压后直接拖到扩展里.zip

    标签“Axure chrome for mac”进一步确认了这个扩展是专门为Mac用户设计的,用于在Chrome浏览器上与Axure软件配合使用。这意味着它可能具有Mac系统特有的优化或者功能,以提供更好的用户体验。 压缩包子文件的文件...

    防苹果mac后台模板html

    【防苹果Mac后台模板HTML】是一种专为模拟苹果Mac操作系统后台界面设计的网页模板,它主要基于HTML和jQuery技术构建,旨在为用户提供一种与Mac OS相似的视觉体验和交互效果。这种模板通常包括一系列精心设计的组件、...

    select标签multiple属性的使用方法.zip

    此外,还可以通过JavaScript或jQuery实现更复杂的交互,比如模拟多选框的视觉效果,或者添加动态加载、搜索过滤等功能。 ### 五、浏览器兼容性 `<select>`标签的`multiple`属性在所有主流浏览器(包括Chrome、Fire...

    Mac OS X桌面菜单jQuery.zip

    6. **动画效果**: 为了达到Mac OS X菜单的流畅动画效果,开发者可能使用jQuery的动画方法,如`.fadeIn()`, `.slideToggle()`等,来实现元素的渐显渐隐和滑动效果。 7. **响应式设计**: 为了让菜单适应不同屏幕尺寸...

    Java嵌入谷歌内核简单浏览器跨平台

    标签"内嵌浏览器"表明这个项目专注于提供一个内部集成的浏览器组件,"java"表示它是基于Java语言实现的,"jxbrowser"则是该项目的核心库名,专门用于Java平台的内嵌式浏览器解决方案。 在压缩包子文件的文件名称...

    PHPWind mac模板

    4. **JavaScript与jQuery**:为了实现动态效果和交互,模板可能包含JavaScript代码或引用了jQuery库。这些脚本文件可能在`js`子目录下,它们负责按钮点击、滑动效果、表单验证等功能。 5. **响应式设计**:由于Mac...

    CSS好用的特效

    本文将深入探讨标题"CSS好用的特效"所涵盖的几个关键知识点,并结合描述和标签,详细介绍以下五个主题:CSS圆角、Jquery提示框插件、纯CSS相册、鼠标滑过小图显示大图的CSS特效以及mac桌面临摹(仅支持Chrome)。...

    15个开发者必须知道的chrome技巧

    5. **多插入符编辑**:编辑文件时,按Ctrl (Mac上为Cmd) 并点击鼠标可以创建多个插入符,实现多处同时编辑,提高效率。 6. **保存控制台记录**:启用Console标签下的"Preserve log"选项,DevTools将在页面重载时不...

    Firefox火狐浏览器官方18.0b3-mac版本dmg安装包

    - **WebGL支持**:支持3D图形渲染,为网页带来更丰富的视觉效果。 - **WebRTC**:支持实时通信技术,用于视频通话和在线协作。 5. **Firefox更新与维护**:作为开源软件,Firefox会定期发布更新,修复已知问题,...

    Firefox 6.0 正式版11个新功能.docx

    此外,它还支持Windows XP和Mac OS X系统,并通过WebGL技术实现了3D网页特效,为开发者创造了制作高性能网站和页面的新可能。 总之,Firefox 6.0 的发布不仅带来了多项实用的新功能,还在安全性、性能和用户体验上...

    Firefox火狐浏览器官方68.3.0esr-mac版本dmg安装包

    3. **WebExtensions API**:Firefox 68.3.0esr全面支持WebExtensions,这意味着更多的Chrome扩展可以无缝迁移至Firefox,极大地丰富了浏览器的功能扩展。 4. **强化的安全性**:内置智能跟踪保护功能,有效防止第三...

    nwjs-0.34.0-mac-osx-x64

    - CSS3不仅提供了更多的样式选择器,如类选择器、属性选择器、伪类和伪元素,还支持边框半径、渐变、阴影、动画和过渡效果,使得网页设计更加美观和动态。 - CSS3还引入了Flexbox和Grid布局,让网页的响应式设计和多...

    Helendesign 滑雪模板

    10. **兼容性测试**:模板需经过多浏览器和多设备的兼容性测试,确保在主流浏览器(如Chrome、Firefox、Safari、Edge)和操作系统(Windows、Mac、iOS、Android)上的正常运行。 总的来说,Helendesign 滑雪模板是...

    maxthon.rar_maxthon_浏览器源代码

    这些引擎用于执行网页中的JavaScript代码,实现交互性和动态效果。 **4. 多进程架构** 现代浏览器通常采用多进程架构,每个标签页或插件都在独立的进程中运行,以防止一个页面崩溃影响其他页面。遨游浏览器可能也...

    互动百科五屏JS广告代码

    在描述中提到的“兼容性好”,意味着该JS广告代码考虑到了不同浏览器和操作系统之间的差异,可能包括对IE、Firefox、Chrome、Safari、Opera等主流浏览器的支持,以及对Windows、Mac、iOS、Android等操作系统平台的...

    学习控件Lodop

    例如,`Set_PrintPage()`用于设置打印页数,`Set_PrintContent()`用于设置打印内容,`Set_MirrorPrint()`则可以实现镜像打印效果。 3. **功能特性** - **多页打印**:Lodop支持将多个HTML页面合并为一份打印文档,...

    WEB打印控件Lodop

    WEB打印控件Lodop是Web应用程序中实现打印功能的一款高效解决方案,尤其在网页打印、报表打印、标签打印等场景下表现出色。它允许开发者通过简单的JavaScript调用,实现复杂打印需求,无需用户安装额外的驱动程序,...

    FCKeditor内容编辑器

    6. **跨平台**:FCKeditor可在多种操作系统和浏览器上运行,如Windows、Linux、Mac以及Firefox、Chrome、Safari、IE等主流浏览器。 **二、使用方法** 1. **安装与引入**:下载FCKeditor压缩包,解压后将相关文件...

Global site tag (gtag.js) - Google Analytics