拉窗帘效果，学习一下html中的层

要想把html中的层设计的很好，来实现一定的效果，也要有一定的思想。做web开发也有好几年了，刚开始的时候，对层不是很了解，总感觉不是很好做，因为当时，我对css这类东西不熟，总觉得这些东西应当由美工来完成，知识总是要学的。什么是html的层呢？html的层根普通意义上的层，意思是一样的。很多东西叠加在一起，三明志，汉堡等，分好几层。

看一个例子，一个拉窗帘的效果，用firefox看，IE下面还没有调试好.

http://www.gaodaima.com/demo/curtain/

下面css样式的代码

.collectionDiv{
position:relative;
width:320;
height:426;
}

.clickButton{
position:absolute;
top:350px;
left:14px;
z-index:200;
}

.glow{
position:absolute;
top:346px;
left:11px;
z-index:100;
}

.curtainLeft{
position:absolute;
height:426px;
width:160px;
left:0px;
top:0px;
z-index:300;
background-image: url("curtain_left.png");
background-repeat: repeat-y;
background-position: right;
}

.curtainRight{
position:absolute;
height:426px;
width:160px;
left:160px;
top:0px;
z-index:300;
background-image: url("curtain_right.png");
background-repeat: repeat-y;
background-position: left;
}

根层有关的东西挺多的，下面就上面提到的内容做一下解释

1，层都是有位置的

position : static | absolute | fixed | relative

static  :默认值。无特殊定位，对象遵循HTML定位规则
absolute  :将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义
fixed  :未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范
relative  :对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置

absolute特点：

用absolute的时候，不会考虑周围的其他布局，定死在某个地方，如果有层重复的话，也会叠加在一起，此时的对像不具有外补丁margin,但是还是有内补丁padding和border。使用absolute,要加上left，top之类，不然会使用默认auto，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递

relative特点：

当有几个relative出现时，他们是不可以重叠的，absolute相对于窗口的，而relative相对于其他标签的。

2，层的宽度width和高度heigth

3，距离左边left和距离顶部top

4，z-index用来控制层的显示次序，数字大的层会盖在数据小的层上面

5，设置背景图片，背景图片的优先级大于背景颜色

6，图片平铺，当我们设置了背景图片时，我们就可以来设置图片是的平铺方式，就根我们设置桌面一样的。

background-repeat : repeat | no-repeat | repeat-x | repeat-y

repeat  : 默认值。背景图像在纵向和横向上平铺
no-repeat  : 背景图像不平铺
repeat-x  : 背景图像仅在横向上平铺
repeat-y  : 背景图像仅在纵向上平铺

7，背景位置，background-position后面可以是top， center，bottom，left，center，right；也是数字和百分比数字

对于上面css文件中的参数设置，可以改变一下，来查看一下效果，例如：我把curtainright中的z-index的值改成50会是什么样子呢，各个参数都试一下吧。

顺便把js代码也贴一下，有兴趣的朋友可以看一下

<script language="javascript">
$(document).ready(
 function() {
 $('.curtainLeft').animate({
 width: '-=155',
 }, 3000, function() {
 display:'none';
 });
 $('.curtainRight').animate({
 width: '-=155',
 left: '+=155',
 }, 3000, function() {
 display:'none';
 });
 $('.glow').fadeOut("slow",CompleteFadeOut);
 }
);
function CompleteFadeOut(){
 $('.glow').fadeIn("slow", CompleteFadeIn)
}
function CompleteFadeIn(){
 $('.glow').fadeOut("slow", CompleteFadeOut)
}
</script>

简单的说一下思想，进入页面时，左右二边的白色层向左右二边，缩小。completefadeout和completefadein他们二个相互调用，无限循环，这样才会出现了闪动的效果。

喜欢 (0)赏

[搞代码]

分享 (0)