JavaScript数组的indexOf()方法

最近写个小demo的时候需要求数组中某一元素的下标,首先就想到了Array的indexOf()方法,但是要注意的是indexOf()方法在IE里有不支持的情况,仅有IE9以上的版本(含IE9)支持。为照顾那些顽固不化的老东西,那就自己写个扩展呗。想着用遍历比较方便,就这么写了。

?View Code JAVASCRIPT
 
if(!Array.prototype.indexOf) {
	Array.prototype.indexOf = function(elt) {
		for(var i = 0,j = this.length; i < j; i++) {
			if(this[i] === elt) {
				return i;
			}
		}
		return -1;	
	}
}

继续阅读JavaScript数组的indexOf()方法

祝贺皇马折桂欧冠

其实这篇文章在欧冠决赛结束后那天就写了,不过当时没写完便搁置了,闲着没事还是发出来吧,好歹也写了那么多字,不能浪费。

昨晚被李sir拖到所里看欧冠决赛,作为一名皇马伪球迷,当然希望皇马能够最终夺冠,也希望BBC组合能够均有建树。在9分钟迭戈科斯塔因伤下场后我一度认为机会来了。但卡西的失误以及长时间的落后也让我心急火燎。整场比赛其实都很无聊,双方的发挥都不属于正常水平。不过伤停补时阶段拉莫斯的头球扳平,瞬间点燃了我们的激情。其实在最后阶段我一直告诉李sir皇马可以扳平了,虽说只是个这么个愿望,但没想到真被我猜中了。

继续阅读祝贺皇马折桂欧冠

纯CSS3打造焦点轮播图(无js)

今天给大家带来一个不借助js,只用纯css3实现的焦点轮播图教程,包括轮播间隔时间我们也可以自定义。这里我们用到的是css3的@keyframe规则和animation属性。注意,此规则与属性仅IE10以及Chrome、Safari、Opera、Firefox支持。具体用法可以参照这篇文章:http://www.w3cplus.com/content/css3-animation或者网络相关资料。

首先我们先构建主框架,很简单,就不详述了。

<div id = "container">  
  <ul id="slide">
    <li id="first"><a href=""><img src="1.jpg" alt="图片1"/></a></li>
    <li id="second"><a href=""><img src="2.jpg" alt="图片2"/></a></li>
    <li id="third"><a href=""><img src="3.jpg" alt="图片3"/></a></li>
    <li id="fourth"><a href=""><img src="4.jpg" alt="图片4"/></a></li>
  </ul>
</div>

继续阅读纯CSS3打造焦点轮播图(无js)

CSS3做个爱心送给你的爱人

之前有在网上看到过别人做的一个爱心图形,非常好看,今天尝试着自己做了一个,虽然看起来有点别扭,但也分享一下吧。

做这个爱心主要是牵扯到css3的border-radius属性以及transform属性。爱心看起来用css制作有点困难,但当你学会能够庖丁解牛的时候就觉得其实不过尔尔。将爱心拆分成若干个我们已经学会制作的几个图形然后再组合起来就可以了。

爱心可以拆分成两个矩形,且上边的两个角为圆角,接着将两个图形一个左旋转,一个右旋转,然后调整两个图形距离,部分重合后便有了爱心的模样。 继续阅读CSS3做个爱心送给你的爱人

冷饭还要炒下去吗?

冷饭越炒越不是个滋味,一是实在浅显,只能给新手小众看,二是最近都是关于IE6的Bug问题,更觉得越写越不敢继续下去。原因在于现在HTML5大行其道,并且微软宣布停止更新XP,使得IE的份额,尤其是IE6,大幅下滑。IE6本就是个前端祸害,而新技术的推广真的很需要前端人员的努力!越来越多搞前端的人不再让自己设计的页面兼容IE6,甚至IE7、8,所以针对IE的这些漏洞或许真的用处很少。
继续阅读冷饭还要炒下去吗?

炒冷饭系列之IE Bug(7) —— overflow:auto时的溢出

这个Bug出现在IE6、7中,当一个设置了相对定位的元素包裹在设置了overflow:auto 的容器中时,相对定位的元素在现代浏览器中会被裁剪,通过下拉滚动条可看到全部,而在IE6、7中则会出现里容器的元素超过容器的部分会溢出来,滚动条并未发生任何作用。

html代码:

 
<div id="container">
	<div id="box"></div>
</div>

继续阅读炒冷饭系列之IE Bug(7) —— overflow:auto时的溢出

炒冷饭系列之IE Bug(6) —— IE躲猫猫Bug

偏头痛差点要了我的命,不过这依然不能拖慢我炒冷饭的步伐。今天带来一个非常经典的IE Bug —— 躲猫猫(Peekaboo Bug)。这个Bug主要出现在IE6和IE7里。在看一个国外文档时看到一个作者说IE7自从06年就修复了这个Bug,具体不得知,但在我的例子中IE7还是会出现的。

先讲下出现Bug的环境:一个拥有背景色或者背景图片的容器中,有一个浮动元素以及一个不浮动的元素,最后有一个清除双边浮动的元素,三个元素均不设置宽高,当底部清除浮动的那个元素更靠近上面的浮动元素时,则触发这一Bug。具体表现在:IE6、7中没有浮动的那个元素内容显示不出来,但当你重新刷新一下或者点开另外一个窗口然后再回到原来这个窗口时,内容就会重新显示出来。就我本人测试来看,在不显示内容的区域用鼠标拖选也可以把内容显示出来,或者直接CTRL+A全选一样可以达到效果。
继续阅读炒冷饭系列之IE Bug(6) —— IE躲猫猫Bug

偏头痛

早上醒来,偏头痛,神经跳动性的疼,痛不欲生!有可能是昨晚受凉,也有可能最近抽烟熬夜过劳的原因。话说这病也属于家族遗传病,老妈就有此症状。大概每年我都会有一次偏头痛,有时持续两三天,有时也会持续一周。疼的时候真想把脑袋瓜子撬开,它会在你毫无防备的情况突然间在头部的一片固定区域给你疼那么一下,间歇性、毫无规律性的疼。
继续阅读偏头痛

炒冷饭系列之IE Bug(5) —— 怪异模式下的盒子居中问题

当一个html页面头部没有声明DTD的时候,在IE浏览器中就会进入怪异模式,怪异模式下页面渲染标准会遵循IE6以下的低版本渲染标准,从而在IE浏览器中会出现很多异常情况。我们在让一个盒子居中在一个容器时,常常会使用设置margin的左右间距值为auto来实现,然而IE的怪异模式会不认识这个auto值,导致页面无法实现我们想要的效果。在本例中我们删掉页面头部的DTD声明,从而使IE进入怪异模式,来达到我们的演示目的。

html代码:

<div id="container">
	<div id="box">
	</div>
</div>

继续阅读炒冷饭系列之IE Bug(5) —— 怪异模式下的盒子居中问题

炒冷饭系列之IE Bug(4) —— 列表项之间的空白间隙

这个Bug依然出现在可恶的IE6上,当我们做一个垂直列表的时候,希望列表项之间没有空隙,但是在IE6上却会莫名其妙出现空隙。

html代码:

<ul>
	<li><a href="">首页</a></li>
	<li><a href="">产品</a></li>
	<li><a href="">服务</a></li>
	<li><a href="">关于</a></li>
</ul>

继续阅读炒冷饭系列之IE Bug(4) —— 列表项之间的空白间隙