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

张映 发表于 2010-09-20

分类目录: html/css

标签:, , , ,

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

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

http://blog.51yip.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他们二个相互调用,无限循环,这样才会出现了闪动的效果。



转载请注明
作者:海底苍鹰
地址:http://blog.51yip.com/htmlcss/1025.html

1 条评论

  1. eldman 留言

    我是一位老人,想用网页给孙子做一些学习用的东西,以前学过点html,但现在都用html5加js和css了,感觉现在的浏览器都可以做很多东西了。

留下评论

留下评论
  • (必需)
  • (必需) (will not be published)
  • (必需)   5X6=?