html | ICOjump - 交互设计是衔接用户与产品的工具

层上下移动的效果

2008年05月07日

看了别人的效果也模仿写的，那个function $（）h函数真不错，我一开始还在找jquery的引用呢，后来发现原来是他自己写的函数，呵呵。
贴出重点，预览可以看最下面

function $(id){
return document.getElementById(id);
}
function openH(){
if (hMax==false){
down=setInterval(function(){
starH += Math.ceil((200-starH)/5);
$("wrap").style.height=starH+"px";
if ( starH >= 200){
clearInterval(down);
}
},1);
hMax=true;
}else{
up=setInterval(function(){
starH -=Math.ceil((starH/5));
$("wrap").style.height=starH+"px";
if(starH <=25){
clearInterval(up);
}
},10);
hMax=false;
}
}

<style> #wrap{ background-color:#FDEFFF; height:25px; width:30%; margin:0 auto; padding:0 0;} #wrap h2{ height:25px; width:100%; margin:0 0; font-weight:normal; font-size:12px; line-height:25px; text-align:center; border-bottom:1px solid #FFCCCC; cursor:pointer;} </style> <script type="text/javascript"> var starH=25; var hMax=false; var up,down; function $(id){ return document.getElementById(id); } function openH(){ if (hMax==false){ down=setInterval(function(){ starH += Math.ceil((200-starH)/5); $("wrap").style.height=starH+"px"; if ( starH >= 200){ clearInterval(down); } },1); hMax=true; }else{ alert(starH); up=setInterval(function(){ starH -=Math.ceil((starH/5)); $("wrap").style.height=starH+"px"; if(starH <=25){ clearInterval(up); } },10); hMax=false; } } </script> <div id="wrap"> <h2 id="button" onclick="openH()">this is a good</h2> </div>

提示：你可以先修改部分代码再运行。

1个评论标签: css , html , javascript , js

表格标签的合理应用

2008年03月28日

去年5月30日写了一篇读后感在经典论坛《[笔记]css2对表格增加的一些东东》
现在就把它移植过来啦。

—————————————————————————

在N年前，提起表格，多数人想到的应该是布局，包括我自己，以前用dreamwear，表格是一个套一个，一个接一个的用。
不过接触了网页标准之后，发现表格更合理的用处应该是“显示数据”，为什么呢？
我们先来看看传统表格格式。
传统的表格常用的就只有 table， tr， td，分别为对象，行，单元格

<table>
<tr>
<td></td><td>
</td><td></td><td>
</td></tr>
</table>

查看全文 »

0个评论标签: html , php

根据例子来理解scrollHeight,clientHeight,scrollTop的区别

2008年03月17日

在子鼠的博客看到了2个js的例子，正好是我一直搞不清的height系列。。
2篇博客分别是《让一行页脚保持在底部》和《右下角广告代码-已测-支持FIREFOX IE7 IE6》。

我对里面代码根据自己的理解添加了注释。我觉得还是蛮口语化的，大家随便看看。
查看全文 »

0个评论标签: asp , html , javascript

ul/ol,li 和 dl,dt,dd 的区别

2008年03月06日

看到经典论坛的一个帖子《关于dl dt dd写法》里面谈到了 dl和ul/ol之间的区别。由于之前工作上很少用到dl，对于dl也是一知半解，于是就查资料。。。

查看全文 »

0个评论标签: css , dl , html , ul

[Tab]制作有立体效果的表格

2007年06月05日

此效果不错，简单，但是对于视觉上来说还是很不错的。
看到了就收集一下，供大家分享

<style> .aa {margin:100px} ul {width:80px; float:left; margin:0px} .aa li a{border:1px #E5E5E5 solid; background-color:#EAEAEA; width:120px; height:30px; list-style:none; margin:0px;float: left; border-top-color:#FFFFFF; border-left-color:#FFFFFF} .aa li a:hover{border:1px #717171 solid; background-color: #E5E5E5; border-top-color:#FFFFFF; border-left-color:#FFFFFF} </style> <div class="aa"> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </div>

提示：你可以先修改部分代码再运行。

0个评论标签: css , html