一起CSS

当前位置:一起CSS

IE的市场份额下降到历史最低

日期:2010-05-5 分类:浏览器

微软的 IE 浏览器抵挡不住来自 Firefox 和 Google Chrome 的凶猛攻势。Net Applications 的统计显示,IE 的浏览器市场份额 11 年来首次低于 60%。IE 在2010年4月的市场份额为 59.95%,比前一月下降了 0.9%,降至了1999年初 IE5 发布之初的水平。Firefox 上涨了 0.07% 至 24.59%,Chrome 增加了 0.6 个百分点,达到了 6.73%,Safari 为 4.72%,Opera 失去了 0.07% 至 2.30%,Opera Min 则为 0.79%。

2010年4月主流浏览器市场份额占有率图片

相比之下,StatCounter 的统计显示,IE 的市场份额为 51.42%,Firefox 占 32.62%, Chrome 占 8.82%,Safari 为 4.27%,Opera 为 1.99%。

Net Applications 同时发布了操作系统市场调查数据。据悉,操作系统市场份额并没有明显变化。WindowsXP依旧以63%的份额占据首位。

2010年4月操作系统市场份额占有率图片

查看:374 评论:3 标签:

jQuery EasyUI

日期:2010-03-31 分类:未分类

你见过 ExtJs 界面的漂亮吧,想应用它,却嫌它庞大、臃肿?没关系,你现在可以选择 jQuery EasyUI 。jQuery 是公认的轻量级 JS 框架(虽然不是最小),jQuery EasyUI 系出名门,虽然体积小,但功能却不简单,它为网页开发提供了一些列的 UI 组件,能为开发者节约大量的时间。看几张效果图把:

ExtJs 和 jQuery EasyUI 对比。

jQuery EasyUI 树形菜单、表格应用、弹出窗口等。

jQuery EasyUI 弹出对话框。

jQuery EasyUI 遮罩弹出窗口。

怎么样?不错吧。那就赶快去体验吧!

jQuery EasyUI 的官方地址是:http://jquery-easyui.wikidot.com/

查看:3,916 评论:4 标签:

css hack

日期:2009-11-9 分类:CSS

css hack 是个很有争议的东西,一开始我也很讨厌,因为我觉得可以饶过 css hack,通过另外的方法解决问题。但是,随着工作中的不断实践,改变了我的观点,css hack 虽然不能通过 w3c 标准认证,但适当是使用很有可能会使你的 HTML 结构更紧凑、有效的减少无语义标签或带来其他好处。

在公司,电脑里的浏览器是 ie6,除了开发部和技术部外,其他部门的同事很少装其他浏览器(不过有小部分可能会升级到 ie7/ie8)。而开发部和技术虽然会装 ff,但装好之后一般不会升级,因为他们不一定是前端开发人员,他们装 ff 的目的也只是看看自己做的东西在 ff 下是否正常,所以这就导致了公司里有各个版本的 ie 和 ff 都有。其实这不是最严重的,因为我做的东西除了在 op 下可能会有些差异外,在上面所有浏览器和 sa 、ch 下都表现的很好。最严重的是之前的有些东西他们做的时候可能只考虑到 ie6,所以如果要修复的话,会把我给郁闷坏,因为我不仅要针对浏览器修复,还有可能要针对浏览器版本修复。如果是你的话,你会头疼吗?所以我收集了一些我认为是比较简单方便的 css hack,一来是自己在工作可能需要,二来算是分享吧。这些 css hack 注意顺序一起使用,能区分不同的浏览器和版本。当然,如果你没必要考虑这么复杂的情况,就挑选需要的用咯。通过实例来体现吧。

html 代码

<body>
	<p>您的浏览器是</p>
</body>

阅读全文 >

查看:2,833 评论:19 标签:

修改:自动播放的jQuery幻灯片

日期:2009-10-11 分类:未分类

一位读者在《自动播放的jQuery幻灯片》中反映了一个问题,就是鼠标在缩略图上快速反复移动的时候,会出大图和缩略图不一致、鼠标输出缩略图幻灯片仍在快速切换和 CPU 占用飙涨等问题。因为幻灯片切换的时候有一个动画过程,鼠标每经过一张缩略图都会执行这个动画过程,如果上一个动画过程还没执行完鼠标就移到另一张缩略图上,那这张幻灯片的切换动画会等到上一个动画执行完成才会执行。如果鼠标在这些缩略图上来回移动,那将会“累积”很多动画,它们会一个接一个的执行,所以引发上上面那些问题。

要修复上面的问题,加上一条判断语句即可:如果有动画正在执行,鼠标移到缩略图上就不执行动画函数。具体代码如下(和原来的相比就多了一句判断):

var theInt = null;
var curclicked = 0;
$(function(){
	$('#transparence').css('opacity','0.4');
	$('#pic_list img').css({'opacity':'0.6'});
	$('#pic_list img:eq(0)').css({'top':'0','opacity':'1'});
	$('#pic_list a').click(function(){return false});
	t(0);
	$('#pic_list img').mouseover(function(){
		if($('#this_pic').attr('src') == $(this).attr('src')) return;
		if(!$(this).is(':animated')){
			t($('#pic_list img').index($(this)));
		}
	})
})
t = function(i){
	clearInterval(theInt);
	if( typeof i != 'undefined' )
	curclicked = i;
		$('#this_pic').fadeOut(0).fadeIn(500).attr('src',$('#pic_list img').eq(i).attr('src'));
		$('#this_a').attr('href',$('#pic_list img').eq(i).parents('a').attr('href'));
		$('#this_a').attr('title',$('#pic_list img').eq(i).parents('a').attr('title'));
		$('#pic_list img').eq(i).parents('li').nextAll('li').find('img').animate({top:18,opacity:0.6},500);
		$('#pic_list img').eq(i).parents('li').prevAll('li').find('img').animate({top:18,opacity:0.6},500);
		$('#pic_list img').eq(i).animate({top:0},500).css('opacity','1');
	theInt = setInterval(function (){
		i++;
		if (i > $('#pic_list img').length - 1) {i = 0};
		$('#this_pic').fadeOut(0).fadeIn(500).attr('src',$('#pic_list img').eq(i).attr('src'));
		$('#this_a').attr('href',$('#pic_list img').eq(i).parents('a').attr('href'));
		$('#this_a').attr('title',$('#pic_list img').eq(i).parents('a').attr('title'));
		$('#pic_list img').eq(i).parents('li').nextAll('li').find('img').animate({top:18,opacity:0.6},500);
		$('#pic_list img').eq(i).parents('li').prevAll('li').find('img').animate({top:18,opacity:0.6},500);
		$('#pic_list img').eq(i).animate({top:0},500).css('opacity','1');
	},3000)
}

查看Demo

查看:3,090 评论:13 标签:,,

用js模拟css属性选择器

日期:2009-09-21 分类:CSS

CSS 的属性选择器是很有用的,它能有效的减少类的使用,但众所周知,IE6 是不支持 CSS 属性选择器的,为了兼容 IE6 ,一般的做法还是给需要的元素额外加类。如果是静态页面,那还好处理,直接在需要的元素上加上类,但如果是动态内容或其他因素影响,不能确定要在哪个元素上加类,那就比较棘手了。这个时候用 js 来处理应该是比较好的,方法也许您也想到了,就是:获取元素属性的值,然后判断值是否包含指定的字符串,如果包含就加上类。

做一个列子吧,就拿最近做的一个东西来做吧,是一个列表,如果这个列表中的某个连接是直接打开 pdf 文件,就给这个链接后面加上 pdf 的小图标,以示提醒作用。看代码吧,XHTML 和 CSS 代码就省略了,看主要的 JS 代码:

window.onload = function(){
	var list = document.getElementById('list');
	var listA = list.getElementsByTagName('a');
	for(var i = 0; i < listA.length; i++){
		var href = listA[i].href;
		if(href.indexOf('pdf') != -1){
			listA[i].className = 'haspdf';
		}
	}
}

查看Demo

因为这段代码主要针对 IE6 及以下版本,所以可以加上 IE 条件注释。

查看:2,624 评论:6

分类

最新日志

最新评论

存档

链接

  • 亚当学院
  • CSS视频教程下载
  • 前沿视频教室
  • 前端爱好者
  • GoodText
  • Kily`s Blog
  • mymickey
  • 秦丰网站策划
  • 奥想创意
  • 我的职业生涯
  • 蜗爱CSS
  • 蜈蚣's Blog
  • web标准学习—小辉博客
  • 十字花匠

© Copyright 2010 一起CSS All Rights Reserved