网站用户体验整合设计-体验css+div 简单的滑动门效果代码

体验css+div 简单的滑动门效果代码

Post by 张美工, 2008-9-25, Views:

　　网站风格转向WEB2.0页面简洁，清爽，用户体验做得很好，更重要的是页面简洁是利用效果的整合，比如一个滑动门效果就能容纳很多的内容，如果平铺这些内容那页面的长度将不会是一屏两屏能完成。大家建一个网站，当然是想要放入很多个人很重要的东西，那么针对内容较多的站，我们就可以利用一些效果来把臃肿的内容装在这个容器里，并且这些效果真得可以说是很有趣，下面这段简单的滑动门效果代码希望对大家装东西启到作用哈：）

<script>
var tar=new Array();
tar[0]=new Array("首页","tar1,red");
tar[1]=new Array("给我留言","tar2,blue");
tar[2]=new Array("看看怎么样","tar3,green");
function $(id)
{
return document.getElementById(id);
}
function setar(id)
{
var t=$("bb");
var con=$("content");
if(id==""){id="tar1";}
for(j=0;j<tar.length;j++)
{
    var c=tar[j][1];
    var d=c.split(",");
    if(id==d[0])
    {
      $(id).style.background=d[1];
      $(id).style.color="#fff";
      t.style.background=d[1];
      con.style.border="1px solid "+d[1]+"";
      con.innerHTML=tar[j][0];
    }
    else
    {
      $(d[0]).style.background="#aaa";
      $(d[0]).style.color="#000";
    }
}
}
</script>

<style type="text/css">
#all{
margin:0px;
padding:0px;
text-align:center;
}
#menu{
margin:auto;
width:600px;
height:20px !important;
background-color:#fff;
}
#menu ul{
padding:0px;
margin:0px;
list-style-type:none;
float:left;
background-color:#aaaaaa;
}
#menu li{
margin:0px;
float:left;
height:15px !important;
height /**/:20px;
padding-left:10px;
padding-right:10px;
border-right:1px solid #fff;
padding-top:5px;
font-size:9pt;
font-weight:bold;
}
#bb{
margin:0px auto;
height:2px;
font-size:1px;
line-height:1px;
width:600px;
}
#content{
margin:0px auto;
width:598px !important;
width /**/:600px;
text-align:left;
height:160px;
}
</style>
<div id="all">
<div id="menu">
    <ul>
      <script>
        for(i=0;i<tar.length;i++)
        {
          var tarname=tar[i][0];
          var id=tar[i][1].split(",");
          document.write("<li id=\""+id[0]+"\" onclick=\"setar('"+id[0]+"')\">"+tar[i][0]+"</li>");
        }
      </script>
    </ul>
</div>
<div id="bb"></div>
<div id="content">ddd
</div>
</div>
<script>
setar("tar1");
</script>

相关文章：　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
# Dreamweaver的超级技巧汇总(6)
# Dreamweaver的超级技巧汇总(5)
# Dreamweaver的超级技巧汇总(4)
# Dreamweaver的超级技巧汇总(３)
# Dreamweaver的超级技巧汇总(2)
# Dreamweaver的超级技巧汇总(1)
# 在线QQ MSN TEL交谈工具代码
# 方便使用的一些小简短input\form代码
# VSS使用手册
# JS表单判断函数代码大全 (三)
# JS表单判断函数代码大全 (二)
# JS表单判断函数代码大全

# I E和火狐的css兼容性问题归总

# 体验css+div 之　CSS hack:区分IE6，IE7，firefox

# 体验css+div 之兼容标准XHTML的浮动层特效实现

# 因为编码差异导致IE6不能正常解析CSS文件

# 商业网站响应用户需求重视与Firefox兼容

# frameset 的属性
# frameset元素属性详解、浮动框架的制作、超链接与框架的制作

# 体验css+div 之 SEO

# 40个网页常用小代码

# div+css样式几个小精华

# 网站用户体验--CSS常用小技巧

# 体验css+div 之 css技巧-经典中的经典

# 体验css+div 之 CSS样式表设计的十条技巧

# 体验css+div 之网页切图过程中div+css命名规则

# 网站用户体验--根据项目需求定义常用CSS2基本定义例子
# 体验css+div 之三种使网站背景图片自动适应浏览器大小的方法

# 创建锚链接

# 如何让单行文本框input与多行文本框textarea背景透明

# 用EditPlus转化文件格式到UTF-8
# 让长字符URL/Email自动换行

# HTML特殊字符显示

# 体验css+div定位与table定位代码的差异
# 体验css+div 之 TBody是什么意思?有什么作用?<TBODY>和<BODY>有和区别？

# 体验css+div 简单的滑动门效果代码

# 体验css+div 超实用的滑动门效果代码（css和代码都包含在内）

# 彻底弄懂CSS盒子模式(DIV布局快速入门)

# 如何把握网页布局
 # 实例详解CSS网页布局原理

# 体验CSS+DIV 之基本布局

#  体验css+div 之解决流体布局的问题
#  体验css+div 之固定宽度布局、流体布局、弹性布局的优势对比＜弹性布局＞
#  体验css+div 之固定宽度布局、流体布局、弹性布局的优势对比＜流体布局＞
# 体验css+div 之固定宽度布局、流体布局、弹性布局的优势对比＜固定宽度布局＞

#  体验css+div 之为什么css+div 会盛行
#  体验css+div中id和class各自的用法及区别

# 体验css+div 之规划、组织和维护样式表

# 体验css+div 之基本列表样式

# 体验css+div 之为样式找到目标

# 体验css+div 之圆角框

# 体验css+div 之层叠和特殊性
# css之自动换行

# CSS控制连续英文字母或数字强制换行

# 让css使网页图片半透明

# 体验css+div 之背景透明内容不透明的写法
# 体验css+div 之给整个页面添加渐变背景
 # 用css样式控制做成的按钮,取代图片按钮

# 体验css+div 之鼠标经过按钮发生变化效果
# 体验css+div 之文本框自适应窗口宽度
# 体验css+div 老问题重新讲“怎样使页面整体居中”
# 体验css+div之图像替换 1.徽标图像替换
# 体验css+div 之使用自动空白边让设计居中

+

Tags: 体验 cssdiv 滑动门效果代码

分类:css+div | 评论:0 | 引用:0

上一篇：体验css+div 超实用的滑动门效果代码（css和代码都包含在内）
下一篇：体验css+div 老问题重新讲“怎样使页面整体居中”

或许你还对下面的文章感兴趣

Comments

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

最新文章

最新评论

Guest