jhlovett
- 浏览: 600748 次
- 性别:
- 来自: 卡哇伊
-
文章分类
- 全部博客 (299)
- C# (25)
- Java (1)
- WinForm (0)
- Asp.Net (86)
- Jsp (2)
- Php (1)
- Web Service (0)
- Desgin Patterns (19)
- Data Structure & Algorithms (1)
- SQLserver (41)
- Mysql (0)
- Oracle (2)
- Javascript (50)
- Ajax (10)
- Jquery (1)
- Flex (0)
- Regular Expression (5)
- DIV+CSS+XHTML+XML (18)
- Software Test (0)
- Linux (0)
- Utility (17)
- Net Digest (4)
- windows 2003 (10)
- Other (4)
- English (1)
- IT Term (1)
最新评论
-
w497480098h：
学习了 很好谢谢
SQL Server下无限多级别分类查询解决办法(简单查询树形结构数据库表) -
main_fun：
确实不错
iframe自适应高度 -
jveqi：
...
DBA -
mxcie：
其它版本没有确认，今天使用vs2003时，其.sln文件也需要 ...
彻底删除项目的VSS源代码管理信息 -
moneyprosper：
就只有IE支持，火狐和谷歌都不支持此种方法。正在寻找中。。。
从父页面读取和操作iframe中内容方法
仿163的一款TAB选项卡，有的人也称它为网页标签。本标签用到了三个gif背景图片，运行的时候可以点右键保存；无意发现了一这一个，觉得很不错应该奉献给大家，因为它不但美观，而且兼容性好，标签还可以自适应宽度，非常实用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>仿网易TAB标签</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>
BODY {
FONT-SIZE: 14px;
}
OL LI {
MARGIN: 8px
}
#con {
FONT-SIZE: 12px;
MARGIN: 0px auto;
WIDTH: 600px
}
#tags {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px 0px 0px 10px;
WIDTH: 400px;
PADDING-TOP: 0px;
HEIGHT: 23px
}
#tags LI {
BACKGROUND: url(http://jhxk.iteye.com/upload/attachment/136408/f89059e8-7235-30c7-956f-6944089cd2a3.gif) no-repeat left bottom;
FLOAT: left;
MARGIN-RIGHT: 1px;
LIST-STYLE-TYPE: none;
HEIGHT: 23px
}
#tags LI A {
PADDING-RIGHT: 10px;
PADDING-LEFT: 10px;
BACKGROUND: url(http://jhxk.iteye.com/upload/attachment/136410/bfc50a6e-4732-375e-8769-8c6ee90a5618.gif) no-repeat right bottom;
FLOAT: left;
PADDING-BOTTOM: 0px;
COLOR: #999;
LINE-HEIGHT: 23px;
PADDING-TOP: 0px;
HEIGHT: 23px;
TEXT-DECORATION: none
}
#tags LI.emptyTag {
BACKGROUND: none transparent scroll repeat 0% 0%;
WIDTH: 4px
}
#tags LI.selectTag {
BACKGROUND-POSITION: left top;
MARGIN-BOTTOM: -2px;
POSITION: relative;
HEIGHT: 25px
}
#tags LI.selectTag A {
BACKGROUND-POSITION: right top;
COLOR: #000;
LINE-HEIGHT: 25px;
HEIGHT: 25px
}
#tagContent {
BORDER-RIGHT: #aecbd4 1px solid;
PADDING-RIGHT: 1px;
BORDER-TOP: #aecbd4 1px solid;
PADDING-LEFT: 1px;
PADDING-BOTTOM: 1px;
BORDER-LEFT: #aecbd4 1px solid;
PADDING-TOP:1px;
BORDER-BOTTOM: #aecbd4 1px solid;
BACKGROUND-COLOR: #fff
}
.tagContent {
PADDING-RIGHT: 10px;
DISPLAY: none;
PADDING-LEFT: 10px;
BACKGROUND: url(http://jhxk.iteye.com/upload/attachment/136408/f89059e8-7235-30c7-956f-6944089cd2a3.gif) repeat-x;
PADDING-BOTTOM: 10px;
WIDTH: 576px;
COLOR: #474747;
PADDING-TOP: 10px;
HEIGHT: 250px
}
#tagContent DIV.selectTag {
DISPLAY: block
}
</STYLE>
</HEAD>
<BODY>
<DIV id=con>
<UL id=tags>
<LI><A onClick="selectTag('tagContent0',this)"
href="javascript:void(0)">源码爱好者</A> </LI>
<LI class=selectTag><A onClick="selectTag('tagContent1',this)"
href="javascript:void(0)">ASP源码</A> </LI>
<LI><A onClick="selectTag('tagContent2',this)"
href="javascript:void(0)">自适应宽度的标签</A> </LI>
</UL>
<DIV id=tagContent>
<DIV class=tagContent id=tagContent0>源码爱好者（<a href="http://www.codefans.net">CoreFans.net</a>）提供各类编程源码、书籍教程、JavaScript/CSS特效代码以及常用软件下载等，做有质量的学习型源码下载站。</DIV>
<DIV class="tagContent selectTag" id=tagContent1>这时是ASP标签的内容。</DIV>
<DIV class=tagContent id=tagContent2>自适应宽度的标签内容。</DIV>
</DIV>
</DIV>
<SCRIPT type=text/javascript>
function selectTag(showContent,selfObj){
// 标签
var tag = document.getElementById("tags").getElementsByTagName("li");
var taglength = tag.length;
for(i=0; i<taglength; i++){
tag[i].className = "";
}
selfObj.parentNode.className = "selectTag";
// 标签内容
for(i=0; j=document.getElementById("tagContent"+i); i++){
j.style.display = "none";
}
document.getElementById(showContent).style.display = "block";
}
</SCRIPT>
</BODY>
</HTML>
淡蓝色竖向简洁Tab
淡蓝色竖向简洁Tab，选项卡，很多人都喜欢的一种风格。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>div+css+js实现菜单的收缩与展开</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
margin: 30px auto;
}
ul {
list-style: none;
}
#faq {
font-size: 12px;
width: 800px;
}
#faq li {
margin: 0 0 10px;
padding: 0 0 5px;
}
#faq dl {
margin: 0;
padding:0;
display:inline;
}
#faq dt {
font-weight:bold;
cursor:pointer;
line-height: 20px;
padding: 0 0 5px 22px;
border-bottom:1px #ccc dotted;
}
#faq dd {
display:none;
margin:0;
padding: 5px 0 5px 20px;
background:#E5ECF9;
line-height: 180%;
}
</style>
<script type="text/javascript">
var lastFaqClick=null;
window.onload=function(){
var faq=document.getElementById("faq");
var dls=faq.getElementsByTagName("dl");
for (var i=0,dl;dl=dls[i];i++){
var dt=dl.getElementsByTagName("dt")[0];//取得标题
dt.id = "faq_dt_"+(Math.random()*100);
dt.onclick=function(){
var p=this.parentNode;//取得父节点
if (lastFaqClick!=null&&lastFaqClick.id!=this.id){
var dds=lastFaqClick.parentNode.getElementsByTagName("dd");
for (var i=0,dd;dd=dds[i];i++)
dd.style.display='none';
}
lastFaqClick=this;
var dds=p.getElementsByTagName("dd");//取得对应子节点，也就是说明部分
var tmpDisplay='none';
if (gs(dds[0],'display')=='none')
tmpDisplay='block';
for (var i=0;i<dds.length;i++)
dds[i].style.display=tmpDisplay;
}
}
}
function gs(d,a){
if (d.currentStyle){
var curVal=d.currentStyle[a]
}else{
var curVal=document.defaultView.getComputedStyle(d, null)[a]
}
return curVal;
}
</script>
</head>
<body>
<ul id="faq">
<li>
<dl>
<dt>关于源码爱好者网站</dt>
<dd>源码爱好者（www.CoreFans.net）提供各类编程源码、书籍教程、JavaScript/CSS特效代码以及常用软件下载等，做有质量的学习型源码下载站。</dd>
</dl>
</li>
<li>
<dl>
<dt>源码爱好者是一个学习型源码下载站</dt>
<dd>源码爱好者立志做一个最好的学习型源码下载站，欢迎您的经常光临，也欢迎提出宝贵建议！</dd>
</dl>
</li>
<li>
<dl>
<dt>AjAX是什么？</dt>
<dd>一种能够提升用户体验的WEB2.0新型技术，可以实现像电脑系统一样的操作体验，类似本地化的一种脚本技术。</dd>
</dl>
</li>
</ul>
</body>
</html>
自动定时切换的TAB选项卡/滑动门
这个滑动门特效不错，可以设定时间，自动循环切换，也可以鼠标控制，而且选项卡也比较漂亮，在新浪和百度见到过这种自动切换的TAB，很实用，代码也简洁。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Tabs - CodeFans.net</title>
<style>
#index_yp {
width:235px;
height:300px;
float:left
}
.index_yp_card {
width:235px;
height:37px;
float:left
}
.yp_card_0, .yp_card_2, .yp_card_4 {
width:55px;
height:37px;
float:left;
background-image:url(http://jhxk.iteye.com/upload/attachment/136440/9b1a9a8c-c348-3e2c-8a11-a3fe1d356ca0.png);
text-align:center;
color:#003366;
font-weight:bold;
line-height:32px;
cursor:pointer
}
.yp_card_1, .yp_card_3, .yp_card_5, .yp_card_6 {
width:45px;
height:37px;
float:left;
background-image:url(http://jhxk.iteye.com/upload/attachment/136440/9b1a9a8c-c348-3e2c-8a11-a3fe1d356ca0.png);
text-align:center;
color:#333333;
line-height:32px;
cursor:pointer
}
.yp_card_0 {
background-position:0px 0px
}
.yp_card_1 {
background-position:-55px 0px
}
.yp_card_2 {
background-position:-100px 0px
}
.yp_card_3 {
background-position:-155px 0px
}
.yp_card_4 {
background-position:-200px 0px
}
.yp_card_5 {
background-position:-255px 0px
}
.yp_card_6 {
background-position:-300px 0px
}
.index_yp_main {
width:215px;
height:262px;
float:left;
border:1px solid #71B3C6;
border-top:0px!important;
padding:0px 9px 0px 9px
}
.yp_main_content {
width:201px;
height:33px;
float:left;
border:1px solid #BCDCE4;
background-color:#F1F8FA;
margin-bottom:7px;
padding:3px 6px 3px 6px;
overflow:hidden
}
.yp_main_content dt {
width:201px;
height:13px;
float:left;
font-weight:normal;
margin:0px;
font-size:12px;
padding-top:2px
}
.yp_main_content dd {
width:201px;
line-height:13px;
float:left;
font-weight:normal;
margin:0px;
font-size:12px;
padding-top:3px;
text-align:right
}
.yp_main_content img {
padding:0px 0px 2px 3px
}
.yp_main_list {
width:215px;
float:left
}
#index_m2_ad {
width:690px;
height:100px;
padding:5px 0px 0px 5px;
float:left
}
</style>
</head>
<body>
<div id="index_yp">
<!--yp1 start-->
<div id="yp_card1" style="display:block">
<div class="index_yp_card">
<div onmouseover="changeMc(1,1)" onmouseout="hi()" class="yp_card_0">ASP</div>
<div onmouseover="changeMc(1,2)" onmouseout="hi()" class="yp_card_3">PHP</div>
<div onmouseover="changeMc(1,3)" onmouseout="hi()" class="yp_card_3">JSP</div>
<div onmouseover="changeMc(1,4)" onmouseout="hi()" class="yp_card_3">VC++</div>
<div onmouseover="changeMc(1,5)" onmouseout="hi()" class="yp_card_5">综合</div>
</div>
<div onmouseover="changeMc(1,1)" onmouseout="hi()" class="index_yp_main">ASP(循环周期(1秒))</div>
</div>
<!--end-->
<!--yp2 start-->
<div id="yp_card2" style="display:none">
<div class="index_yp_card">
<div onmouseover="changeMc(2,1)" onmouseout="hi()" class="yp_card_1">ASP</div>
<div onmouseover="changeMc(2,2)" onmouseout="hi()" class="yp_card_2" >PHP</div>
<div onmouseover="changeMc(2,3)" onmouseout="hi()" class="yp_card_3">JSP</div>
<div onmouseover="changeMc(2,4)" onmouseout="hi()" class="yp_card_3">VC++</div>
<div onmouseover="changeMc(2,5)" onmouseout="hi()" class="yp_card_5">综合</div>
</div>
<div onmouseover="changeMc(2,2)" onmouseout="hi()" class="index_yp_main">PHP(循环周期(1秒))</div>
</div>
<!--end-->
<!--yp3 start-->
<div id="yp_card3" style="display:none">
<div class="index_yp_card">
<div onmouseover="changeMc(3,1)" onmouseout="hi()" class="yp_card_1">ASP</div>
<div onmouseover="changeMc(3,2)" onmouseout="hi()"class="yp_card_6">PHP</div>
<div onmouseover="changeMc(3,3)" onmouseout="hi()" class="yp_card_2">JSP</div>
<div onmouseover="changeMc(3,4)" onmouseout="hi()" class="yp_card_3">VC++</div>
<div onmouseover="changeMc(3,5)" onmouseout="hi()" class="yp_card_5">综合</div>
</div>
<div onmouseover="changeMc(3,3)" onmouseout="hi()" class="index_yp_main">JSP(循环周期(1秒))</div>
</div>
<!--end-->
<!--yp4 start-->
<div id="yp_card4" style="display:none">
<div class="index_yp_card">
<div onmouseover="changeMc(4,1)" onmouseout="hi()" class="yp_card_1">ASP</div>
<div onmouseover="changeMc(4,2)" onmouseout="hi()" class="yp_card_6">PHP</div>
<div onmouseover="changeMc(4,3)" onmouseout="hi()" class="yp_card_6">JSP</div>
<div onmouseover="changeMc(4,4)" onmouseout="hi()" class="yp_card_2">VC++</div>
<div onmouseover="changeMc(4,5)" onmouseout="hi()" class="yp_card_5">综合</div>
</div>
<div onmouseover="changeMc(4,4)" onmouseout="hi()" class="index_yp_main">VC++(循环周期(1秒))</div>
</div>
<!--end-->
<!--yp5 start-->
<div id="yp_card5" style="display:none">
<div class="index_yp_card">
<div onmouseover="changeMc(5,1)" onmouseout="hi()" class="yp_card_1">ASP</div>
<div onmouseover="changeMc(5,2)" onmouseout="hi()" class="yp_card_6">PHP</div>
<div onmouseover="changeMc(5,3)" onmouseout="hi()" class="yp_card_6">JSP</div>
<div onmouseover="changeMc(5,4)" onmouseout="hi()" class="yp_card_6">VC++</div>
<div onmouseover="changeMc(5,5)" onmouseout="hi()" class="yp_card_4">综合</div>
</div>
<div onmouseover="changeMc(5,5)" onmouseout="hi()" class="index_yp_main">综合(循环周期(1秒))</div>
</div>
<!--end-->
</div>
<script language="javascript" type="text/javascript">
<!--
var s=5;
var t=1000;//循环周期(1秒)
var timer;
function changeMc(x,y){
// x是当前显示的层 y是即将显示的层
clearTimeout(timer);
if (x!=y){
document.getElementById('yp_card'+x).style.display = "none";
document.getElementById('yp_card'+y).style.display = "block";
s=y
}
}
function hi(){
timer=setTimeout("sh()",t)
}
function sh(){
s=(s>=5)?1:s+1
for (var i=1;i<=5;i++){
document.getElementById("yp_card"+i).style.display = "none";
}
document.getElementById("yp_card"+s).style.display = "block"
timer=setTimeout("sh()",t)
}
sh()
-->
</script>
</body>
</html>
横向、竖向排列的多种选项卡及滑动门
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选项卡-www.codefans.net</title>
<style type="text/css">
<!--
* {
margin:0;
padding:0;
font-size:12px;
font-weight:normal;
}
.jj {
font-weight:bolder!important;
}
.box {
border-top-color:#c00!important;
}
.pr {
color:#060!important;
}
#tab01 {
position:relative;
width:336px;
height:88px;
padding-top:15px;
margin:50px;
overflow:hidden;
}
#tab01 h3 {
position:relative;
z-index:2;
float:left;
height:14px;
padding:0 7px 0 8px;
margin-left:-1px;
border-left:solid 1px #ccc;
border-right:solid 1px #fff;
text-align:center;
background:#fff;
cursor:pointer;
}
/*/*/
#tab01 h3.up {
height:18px;
padding:5px 7px 0 7px;
margin:-6px 0 0 0;
border:solid #ccc;
border-width:1px 1px 0;
color:#c00;
}
#tab01 div {
display:none;
position:absolute;
left:0;
top:32px;
z-index:1;
width:324px;
height:54px;
padding:5px;
border:solid 1px #ccc;
color:#666;
}
#tab01 div.up {
display:block;
}
#tab02 {
position:relative;
width:200px;
margin:50px;
border:solid #ccc;
border-width:0 1px 1px;
}
/*/*/
#tab02 h4 {
height:18px;
line-height:18px;
border:solid #ccc;
border-width:1px 0;
margin-bottom:-1px;
text-align:center;
background:#f6f6f6;
cursor:pointer;
}
#tab02 h4.up {
color:#c00;
}
#tab02 ol {
display:none;
height:54px;
padding:5px;
color:#666;
}
#tab02 ol.up {
display:block;
}
#tab03 {
position:relative;
width:100px;
margin:50px;
}
#tab03 h3 {
position:relative;
z-index:1;
height:16px;
padding-top:4px;
margin-bottom:-1px;
border:solid #ccc;
border-width:1px 0 1px 1px;
text-align:center;
font-family:宋体;
background:#eee;
cursor:pointer;
}
#tab03 h3.up {
z-index:3;
color:#c00;
background:#fff;
}
#tab03 div.tab {
display:none;
position:absolute;
left:99px;
top:0;
z-index:2;
width:300px;
height:200px;
padding:5px;
border:solid 1px #ccc;
color:#666;
}
#tab03 div.tab.up {
display:block;
}
-->
</style>
</head>
<body>
<div id="tab01">
<h3>我的首页</h3>
<div class="jj">
<p>我的首页，放我自己的东西哦！</p>
</div>
<h3 class="pr">日记</h3>
<div>
<p>我自己写的日记。</p>
</div>
<h3>音乐</h3>
<div>
<p>我喜欢听的音乐哦！</p>
</div>
<h3 class="box">回家</h3>
<div>
<p>我想回家！</p>
</div>
</div>
<div id="tab02">
<h4>源码下载</h4>
<ol class="pr">
<li>源码下载请到源码爱好者</li>
</ol>
<h4 class="box">网页特效</h4>
<ol>
<li>网页特效</li>
</ol>
<h4>可爱</h4>
<ol>
<li>可爱的人是谁呀？</li>
</ol>
<h4 class="bb">笑话</h4>
<ol>
<li>讲个笑话听听吧？</li>
</ol>
</div>
<div id="tab03">
<h3>源码首页</h3>
<div class="tab">
<p>源码爱好者是最好的源码下载站</p>
</div>
<h3>中国</h3>
<div class="tab wushi">
<p>中国是世界面积大的国家</p>
</div>
<h3>河南</h3>
<div class="tab">
<p>河南是中国人口最多的省份</p>
</div>
<h3 class="box">江苏</h3>
<div class="tab tab123">
<p>江苏江苏，我爱你。</p>
</div>
</div>
</div>
<script type="text/javascript">
<!--
function Pid(id,tag){
if(!tag){
return document.getElementById(id);
}
else{
return document.getElementById(id).getElementsByTagName(tag);
}
}
function tab(id,hx,box,iClass,s,pr){
var hxs=Pid(id,hx);
var boxs=Pid(id,box);
if(!iClass){
boxsClass=boxs;
}
else{
var boxsClass = [];
for(i=0;i<boxs.length;i++){
if(boxs[i].className.match(/\btab\b/)){
boxsClass.push(boxs[i]);
}
}
}
if(!pr){
go_to(0);
yy();
}
else {
go_to(pr);
yy();
}
function yy(){
for(var i=0;i<hxs.length;i++){
hxs[i].temp=i;
if(!s){
s="onmouseover";
hxs[i][s]=function(){
go_to(this.temp);
}
}
else{
hxs[i][s]=function(){
go_to(this.temp);
}
}
}
}
function go_to(pr){
for(var i=0;i<hxs.length;i++){
if(!hxs[i].tmpClass){
hxs[i].tmpClass=hxs[i].className+=" pr1984_com";
boxsClass[i].tmpClass=boxsClass[i].className+=" pr1984_com";
}
if(pr==i){
hxs[i].className+=" up";
boxsClass[i].className+=" up";
}
else {
hxs[i].className=hxs[i].tmpClass;
boxsClass[i].className=boxsClass[i].tmpClass;
}
}
}
}
tab("tab01","h3","div","","onclick",2);
tab("tab02","h4","ol");
tab("tab03","h3","div","tab");
//-->
</script>
</body>
</html>
CSS+JSS滚动切换的选项卡【荐】
多种选项卡菜单，横向、竖向排列，有滑动门，也有需要点击才激活的滑动门（大家常说的选项卡），想用哪个你就用哪个，这里只是一种实现方法，选项卡色调什么的请根据您自己的网站风格修改下。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>可以滚动切换的选项卡-codefans.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<STYLE>
* {
margin:0;
padding:0;
font-size:12px;
}
img {
border:none;
}
ul, ol {
list-style:none;
}
#content {
margin:20px auto;
border:1px solid #a5b5c0;
width:188px;
height:241px;
background:url(http://jhxk.iteye.com/upload/attachment/136425/2d148614-7de0-3640-a495-8e068396b144.gif);
overflow:hidden;
}
#title {
height:17px;
*height:16px;
background:url(http://jhxk.iteye.com/upload/attachment/136431/ae374a90-8a61-382c-b701-5051659ab449.gif) repeat-x;
border-bottom:1px solid #a5b5c0;
padding:3px 0 0 6px;
*padding:4px 0 0 6px;
font-weight:700;
}
#title li {
float:left;
display:inline;
width:92px;
}
#tit_l {
float:left;
width:92px;
overflow:hidden;
height:14px;
}
#tit_r {
float:right;
margin-top:-1px;
*margin-top:-2px;
}
#tit_r img {
margin-right:4px;
cursor:pointer;
}
#tit_r img:hover {
filter: Alpha(Opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}
#text {
clear:both;
height:210px;
}
#text ul {
background:url(http://jhxk.iteye.com/upload/attachment/136427/88d4c3da-0cdb-3777-9e98-7bbd52318074.gif) no-repeat 12px 4px;
margin:6px 0;
}
#text li {
padding-left:34px;
line-height:21px;
}
#text li a {
color:#123b8d;
text-decoration:none;
}
#text li a:hover {
text-decoration:underline;
}
</STYLE>
</head>
<body>
<DIV id=content>
<DIV id=title>
<DIV id=tit_l>
<DIV id=mytit>
<UL>
<LI>最新更新 </LI>
<LI>下载排行 </LI>
<LI>最受关注 </LI>
</UL>
</DIV>
</DIV>
<DIV id=tit_r><IMG alt="" src="http://jhxk.iteye.com/upload/attachment/136429/dc248a7e-8b23-3099-8ebd-548973c5e8fb.gif"><IMG alt="" src="http://jhxk.iteye.com/upload/attachment/136433/5c77ef30-13ff-3a75-9253-42fe213b04a8.gif"></DIV>
</DIV>
<DIV id=text>
<UL id=c1>
<li><a href="/soft/1160.shtml" target="_blank">VC++实现超酷QQ界面</a></li>
<li><a href="/soft/3477.shtml" target="_blank">基于C#同步套接字</a></li>
<li><a href="/soft/4067.shtml" target="_blank">《网页制作完全手册》 chm</a></li>
<li><a href="/soft/2144.shtml" target="_blank">VB调用模板进行打印的实例</a></li>
<li><a href="/soft/1183.shtml" target="_blank">ASP.net报表设计源码包</a></li>
<li><a href="/soft/1610.shtml" target="_blank">J2me开发环境的搭建教程</a></li>
<li><a href="/soft/3182.shtml" target="_blank">《jQuery in Action》 源代码</a></li>
<li><a href="/soft/3307.shtml" target="_blank">DCS PHP在线记账/记事本</a></li>
<li><a href="/soft/2832.shtml" target="_blank">VB打印控件Listview示例</a></li>
<li><a href="/soft/4321.shtml" target="_blank">仿支付宝CSS网站导航栏</a></li>
</UL>
<UL id=c2>
<li><a href="http://codefans.net/soft/4387.shtml" target="_blank">BICQ 仿QQ聊天系统</a></li>
<li><a href="http://codefans.net/soft/3389.shtml" target="_blank">DIV+JS弹出窗口框架</a></li>
<li><a href="http://codefans.net/soft/4383.shtml" target="_blank">WindowLite 可拖动提示窗口</a></li>
<li><a href="http://codefans.net/soft/4381.shtml" target="_blank">Asp生成静态完整实例</a></li>
<li><a href="http://codefans.net/soft/4380.shtml" target="_blank">VC++固定资产管理系统</a></li>
<li><a href="http://codefans.net/soft/4376.shtml" target="_blank">jQuery相册播放插件</a></li>
<li><a href="http://codefans.net/soft/4374.shtml" target="_blank">Ajax拖动分页插件</a></li>
<li><a href="http://codefans.net/soft/4373.shtml" target="_blank">C#餐饮管理系统</a></li>
<li><a href="http://codefans.net/soft/4387.shtml" target="_blank">BICQ 仿QQ聊天系统</a></li>
<li><a href="http://codefans.net/soft/4387.shtml" target="_blank">BICQ 仿QQ聊天系统</a></li>
</UL>
<UL id=c3>
<li><a href="/soft/1160.shtml" target="_blank">VC++实现超酷QQ界面</a></li>
<li><a href="/soft/3477.shtml" target="_blank">基于C#同步套接字</a></li>
<li><a href="/soft/4067.shtml" target="_blank">《网页制作完全手册》 chm</a></li>
<li><a href="/soft/2144.shtml" target="_blank">VB调用模板进行打印的实例</a></li>
<li><a href="/soft/1183.shtml" target="_blank">ASP.net报表设计源码包</a></li>
<li><a href="/soft/1610.shtml" target="_blank">J2me开发环境的搭建教程</a></li>
<li><a href="/soft/3182.shtml" target="_blank">《jQuery in Action》 源代码</a></li>
<li><a href="/soft/3307.shtml" target="_blank">DCS PHP在线记账/记事本</a></li>
<li><a href="/soft/2832.shtml" target="_blank">VB打印控件Listview示例</a></li>
<li><a href="/soft/4321.shtml" target="_blank">仿支付宝CSS网站导航栏</a></li>
</UL>
</DIV>
</DIV>
<SCRIPT type=text/javascript>
/** /**/
var myTitle = document.getElementById("mytit");
myTitle.innerHTML += myTitle.innerHTML;
var lists = myTitle.getElementsByTagName("li");
var num = lists.length - 2;
//alert(num)
myTitle.style.width = (num+1) * 92;//计算标题长度
var ele = document.getElementById("tit_l");
var w = ele.clientWidth;
var n = 18;
var t = 38;//数值越小速度越快
var times = new Array(n);
var k = 0;
var l = 0;
yahooo(0);
function yahooo(s)
{
if(k >= num && s > 0)
{
ele.scrollLeft = w;
k = 1;
}
if(k < 1 && s < 0)
{
ele.scrollLeft = (num-1) * w;
k = num-1;
}
k += s;
var x = ele.scrollLeft;
var d = k * w - x;
for(i=0;i<n;i++)
(
function()
{
if(times[i]) {clearTimeout(times[i])} ;
var j = i;
times[i] = setTimeout(function(){ele.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n)));},(i+1)*t);
}
)();
}
var imgs = document.getElementById("tit_r").getElementsByTagName("img");
///
var c1 = document.getElementById("c1");
var c2 = document.getElementById("c2");
var c3 = document.getElementById("c3");
imgs[0].onclick = function()
{
yahooo(-1);
if(k==0){c1.style.display = "block";c2.style.display = "none";c3.style.display = "none";}
if(k==1){c1.style.display = "none";c2.style.display = "block";c3.style.display = "none";}
if(k==2){c1.style.display = "none";c2.style.display = "none";c3.style.display = "block";}
}
imgs[1].onclick = function()
{
yahooo(1);
if(k==0 || k==3){c1.style.display = "block";c2.style.display = "none";c3.style.display = "none";}
if(k==1 || k==4){c1.style.display = "none";c2.style.display = "block";c3.style.display = "none";}
if(k==2){c1.style.display = "none";c2.style.display = "none";c3.style.display = "block";}
}
</SCRIPT>
</body>
</html>
列表、排行专用的灰、红滑动门菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滑动门-www.codefans.net</title>
<script type="text/javascript">
</script>
<style type="text/css">
/* www.codefans.net */
* {
margin:0;
padding:0;
word-break:break-all;
}
body {
background:#FFF;
color:#333;
font:12px/1.6em Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-size:1em;
}
a {
color:#333;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
ul, li {
list-style:none;
}
fieldset, img {
border:none;
}
/* Hotnews style */
#hotnews {
width:300px;
margin:100px;
}
#hotnews_caption {
width:300px;
overflow:hidden;
border-bottom:3px solid #C2130E;
}
#hotnews_caption ul {
float:right;
}
#hotnews_caption ul li {
float:left;
border-left:1px solid #FFF;
width:50px;
line-height:25px;
text-align:center;
cursor:pointer;
}
#hotnews_caption .normal {
background:#CCC;
}
#hotnews_caption .current {
background:#C2130E;
color:#FFF;
}
#hotnews_content {
}
#hotnews_content .normal {
display:none;
}
#hotnews_content .current {
display:block;
}
#hotnews_content ul {
padding:8px 0 0 5px;
}
#hotnews_content ul li a {
font-size:14px;
}
</style>
<script type="text/javascript">
function secBoard(elementID,listName,n) {
var elem = document.getElementById(elementID);
var elemlist = elem.getElementsByTagName("li");
for (var i=0; i<elemlist.length; i++) {
elemlist[i].className = "normal";
var m = i+1;
document.getElementById(listName+"_"+m).className = "normal";
}
elemlist[n-1].className = "current";
document.getElementById(listName+"_"+n).className = "current";
}
</script>
</head>
<body>
<div id="hotnews">
<div id="hotnews_caption">
<ul>
<li class="current" onmousemove="secBoard('hotnews_caption','list',1);">首页</li>
<li class="normal" onmousemove="secBoard('hotnews_caption','list',2);">排行</li>
<li class="normal" onmousemove="secBoard('hotnews_caption','list',3);">最新</li>
<li class="normal" onmousemove="secBoard('hotnews_caption','list',4);">热点</li>
</ul>
</div>
<div id="hotnews_content">
<div class="current" id="list_1">
<ul>
<li><a href="/soft/4489.shtml" target="_blank">淘特 AspCms v5.5 SP1</a></li>
<li><a href="/soft/3091.shtml" target="_blank">C9 ASP静态文章系统 v2.0.1</a></li>
<li><a href="/soft/3582.shtml" target="_blank">TacodEmp ASP企业网站系统 v1.3</a></li>
</ul>
</div>
<div class="normal" id="list_2">
<ul>
<li><a href="/soft/4626.shtml" target="_blank">良精公司企业网站系统ASP开源版 v1.0</a></li>
<li><a href="/soft/2605.shtml" target="_blank">露珠ASP个人站程序 v3.21</a></li>
<li><a href="/soft/3158.shtml" target="_blank">最新ACCESS版纯真IP数据库附ASP查询程序</a></li>
</a>
</li>
</ul>
</div>
<div class="normal" id="list_3">
<ul>
<li><a href="/soft/2221.shtml" target="_blank">愚人笔记ASP文章动态版 V4.0</a></li>
<li><a href="/soft/3368.shtml" target="_blank">QvodCMS视频点播专家 ASP v2.2</a></li>
<li><a href="/soft/2482.shtml" target="_blank">雷风HTML影视系统ASP版带采集 v1.1</a></li>
</ul>
</div>
<div class="normal" id="list_4">
<ul>
<li><a href="/soft/1037.shtml" target="_blank">网趣ASP购物系统时尚版 v9.2</a></li>
<li><a href="/soft/4548.shtml" target="_blank">QJblog ASP版多用户博客 v1.0</a></li>
<li><a href="/soft/2141.shtml" target="_blank">Pcook CMS 泡客静态文章系统（带采集） v3.0</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
- 大小: 604 Bytes
- 大小: 2.6 KB
- 大小: 381 Bytes
- 大小: 51 Bytes
- 大小: 574 Bytes
- 大小: 163 Bytes
- 大小: 94 Bytes
- 大小: 162 Bytes
- 大小: 26.1 KB
分享到：
发表评论
-
简单选项卡制作方式
2009-10-26 15:16 996<!DOCTYPE html PUBLIC " ... -
字体放大效果，字体[大][中][小]
2009-10-20 16:12 1040<!DOCTYPE html PUBLIC " ... -
JS中保留两位小数
2009-10-19 11:22 3159//这里使用字符串的"123.0000" ... -
JS中String,Date,Math常用函数
2009-10-11 18:25 3669String,Date,Math常用函数 ... -
eval，confirm,alert,prompt函数
2009-10-11 12:23 1441eval()函数JavaScript有许多小窍门来使编程更加容 ... -
从零开始学习jQuery(剧场版) 你必须知道的javascript
2009-10-03 11:28 850一.摘要 本文是jQuery系列教程的剧场版, 即和jQue ... -
深入浅出JSON
2009-10-02 20:27 652JSON定义 JSON(JavaScript Objec ... -
数据类型和Json格式
2009-10-02 19:53 8701. 前几天，我才知 ... -
防止网页被嵌入框架的代码
2009-10-02 17:31 877<script type="text/java ... -
学习javascrip闭包 (closure)
2009-10-02 16:53 840闭包（closure）是Javascript语言的一个难点 ... -
花点时间搞清top、postop、scrolltop、scrollHeight、offsetHeight
2009-09-30 18:41 17151. top 此属性仅仅在对象的定位(position ... -
document.write()和document.writeln()的区别
2009-09-18 11:06 8158解决思路： 两者都是JavaScript向客户端输出的方法，对 ... -
几个常用的小函数(检查是否为数字,否为电话号码,num是否是负数,检查是否为日期...)
2009-09-10 17:41 1113//函数名：chkemail//功能介绍：检查是否为Email ... -
为什么二月的天数比其他月少？
2009-09-06 09:10 1439——公元前46年，罗马皇帝恺撒在修改历法时，规定每年为12个月 ... -
iframe自适应高度
2009-09-01 23:40 3213Demo页面：主页面 iframe_a ... -
document.body和document.documentElement的区别
2009-09-01 22:25 2334document.body:是DOM中Document对象里的 ... -
从父页面读取和操作iframe中内容方法
2009-08-27 20:50 3600基本的操作方法： ... -
Js Tab选项卡示例集合
2009-08-15 23:22 7917清新选项卡（一个页面布局两个） 一个横排的清新选项卡， ... -
Js事件列表
2009-08-15 20:41 871js事件列表 onkeypress,onkeyd ... -
Javascript onerror事件及try....catch
2009-07-29 23:25 1072<script type="text/java ...
相关推荐
html css js tab选项卡
js Tab选项卡标签滑动带滚动条的内容滚动切换显示代码 http://www.17sucai.com/pins/5386.html
js tab选项卡切换
常用幻灯片和JS tab选项卡，工作中用到的。。
总共3KB div结构拓展性强 特点：结构简单,兼容性好,可扩展性强,特别适合前端新手, 部分代码演示: <div class="TabTitle"> ... 同一页面，滑动门，选项卡同在 兼容性好2 兼容性好3 兼容性好4 </div> </div>
TAB选项卡,JS代码，网页设计与制作，很实用的代码
原生js tab选项卡新闻列表切换效果代码，我们也习惯于称为"滑动门"，一般在网站里面，我们可以做一个选项卡的特效，在页面展示新闻信息等，非常适合在企业网站或者门户网站中使用。php中文网推荐下载！
Tab选项卡 html js Tab选项卡 css html js
前段时间刚刚为大家分享过一款...今天要继续分享一款五彩的jQuery Tab选项卡动画插件，它与其他的Tab选项卡不同的是，不仅有多种风格可自由选择切换，而且切换每一个Tab页的时候Tab页内容的背景就会不同，非常炫酷。
简单的css+js tab选项卡效果。只需用html和css。。加简单的js效果控制
封装了一个选项卡，不过已经不像选项卡了-_-!!! 可嵌套，可重复使用，面向对象
JS网站常用简洁TAB选项卡是一款代码简洁易用，兼容主流浏览器。
原生js tab代码选项卡里面按钮控制图片滚动选项卡切换
jquery tab插件制作多功能选项卡，鼠标滑过切换选项卡、鼠标点击切换选项卡、自动切换选项卡、支持数据回调功能，也可以与其他插件结合jquery.lazyload，制作选项卡切换图片延迟加载等
js通用的tab选项卡切换图片
整理的一些JS特效Tab,供大家参考，学习！
常用新闻分类TAB选项卡js特效
代码简介：jQuery叶子Tab选项卡是一款基于CSS3 jQuery实现的动态滑动展示的选项卡Tab效果，选项卡在切换过程中带有动态滑动效果，选项卡内可以防止图片、文本或者图文混排内容。