w3cTrain

Keep Moving

关于z-index的问题是很多程序员都不知道它是如何起作用的。说起来不难,但是大部分人并没有花时间去看规范,这往往会照成严重的后果。

你不信?那就一起来看看下面的问题。

##问题

在下面的HTML我们写了3个<div>元素,然后每个<div>元素里面都有一个<span>元素,每个<span>元素都有个背景色,并且使用absolute定位,为了能更清楚地看到z-index的效果,我们写了一些其他的样式。第一个<span>元素的z-index值为1,其他两个没有设置。

代码如下:

1
2
3
4
5
6
7
8
9
<div>
<span class="red">Red</span>
</div>
<div>
<span class="green">Green</span>
</div>
<div>
<span class="blue">Blue</span>
</div>
Read More...

发现原来XMLHttpRequest对象可以有获取进度的功能,发篇文章记录一下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$.ajax({
xhr: function()
{
var xhr = new window.XMLHttpRequest();

//Upload progress
xhr.upload.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
//Do something with upload progress
console.log(percentComplete);
}
}, false);

//Download progress
xhr.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
//Do something with download progress
console.log(percentComplete);
}
}, false);
return xhr;
},
type: 'POST',
url: "/",
data: {},
success: function(data){
//Do something success-ish
}
});
Read More...

众所周知,浏览器会为我们创建基本的样式。比如<h2>,我们不需要为它写任何css样式,在浏览器上展示出来,一眼就只知道它是大标题。问题是,不同浏览器之间的默认效果不尽相同,于是乎,在Chrome下很漂亮的样式,去到Firefox下可能整个页面都变得一团糟(当然也有可能是其他原因)。

举个栗子,IE浏览器下的<ul>标签的margin-left值为30pt,但是在Firefox,Chrome,Safari<ul>默认属性是padding-left:40px。所以我们需要考虑下浏览器兼容性。

###IE盒子模型
https://dn-w3ctrain.qbox.me/ie_box_model.jpg

Read More...

在这篇教程中,我将为你介绍如何在页面滚动时触发css动画。这种效果使用JavaScript&CSS就能做到。

Jeet Grid System website 就是使用这种小技巧的例子,当你向下滚动的时候,CSS transform animation就被触发了。

想要达到这种目的,有很多Javascript/jQuery 插件可以用,比如WOW,在这篇教程中,我将为你展示如何不适用插件做到这种效果。

##The markup

那么我们开始了,首先是写好html标签,revealOnScroll类必须家在需要在滚动时触发的元素上面。

1
<div data-animation="flipInX" data-timeout="400">...some content here...

Read More...