送上教程......希望大家能编辑出更好的风格！

SSAY · 发表于 2007-6-26 22:31:25

很多人看到yahoo上有个div+css的效果，就是点下那表格，表格就只剩下标题了，现在我来告诉大家如何实现这些功能！

<!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>隐藏/显示层</title>
<style type="text/css">
<!--
body{
background: #FFF;
color: #000;
font: normal 12px 宋体,arial,sans-serif;
margin: 0;
padding: 0;
text-align: left;
}
div,form,ul,ol,li,span,p {
border: 0;
margin: 0;
padding: 0;
}
/*清除float*/
.clear{
clear: both;
font-size: 1px;
visibility: hidden;
}
/*分类标题*/
.class_title{
margin: 0 auto;
width: 504px;
height: 17px;
border: 1px solid #9EB1C0;
padding: 1px;
background:url(http://www.east-dragon.cn/files/sw/images/title_bg.gif);
}
.class_title h2{
margin: 0;
padding: 2px 0 2px 18px;
height: 12px;
color: #16387C;
font: bold 13px 宋体,arial,sans-serif;
cursor:pointer;
letter-spacing: 2px;
text-align: left;
}
#tabclass1{
background:url(http://www.east-dragon.cn/files/sw/images/tab_drop1.gif) 6px center no-repeat;
}
/*分类列表（模块一）*/
#class_cnt1{
background: url(http://www.east-dragon.cn/files/sw/images/class_cntbg.gif) left bottom repeat-x;
border: solid #9EB1C0;
border-width: 0 1px 1px 1px;
height: 287px;
margin: 0 auto;
text-align: left;
width: 506px;
display: block;
overflow:hidden;
}
#class_cnt1 p{
margin:0;
padding:3px;
line-height:150%;
}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
//=======================================================
//函数名称：getObject(objectId)
// 参数objectId:控件的ID值
//函数功能：获得控件的ID值
//返回值：ture(获得ID值) false(获取ID失败)
//=======================================================
function getObject(objectId) {
if(document.getElementById && document.getElementById(objectId)) {
// W3C DOM
return document.getElementById(objectId);
} else if (document.all && document.all(objectId)) {
// MSIE 4 DOM
return document.all(objectId);
} else if (document.layers && document.layers[objectId]) {
// NN 4 DOM.. note: this won't find nested layers
return document.layers[objectId];
} else {
return false;
}
}
// 显示列表框
function displayList(){
var h = getObject('class_cnt1').offsetHeight; // 内容容器class_cnt1的初始高度（这时高度为：0）
var max_h = 287; // 容器的最大高度
var anim = function(){
h += 50; // 每次递增50像素
//如果增加的高度开始超过容的最大高度
if(h >= max_h){
getObject('class_cnt1').style.height = "287px"; // 工期高度为287px(因为我们只希望容器这么高)
getObject('tabclass1').style.backgroundImage="url(http://www.east-dragon.cn/files/sw/images/tab_drop1.gif)"; // 让图片标签改变背景
if(tt){window.clearInterval(tt);} // 如果高度在每2毫秒递减，则清楚改行为（如果不清楚，程序将一直自动运行高度每2毫秒递减）
}
else{ // 如果增加中的容器高度没有超过287px
getObject('class_cnt1').style.display="block"; // 让容器可见（这样我们才能够看到容器在增高的效果）
getObject('class_cnt1').style.height = h + "px"; // 容器高度不断的以50px递增
}
}
var tt = window.setInterval(anim,2); // 设置每2毫秒循环一次（每2毫秒，运行一次anim[容器的高度递减50px]）
}
// 隐藏列表框
function hiddenList(){
var h = getObject('class_cnt1').offsetHeight; // 内容容器class_cnt1的初始高度（这时高度为：287px）
var anim = function(){
h -= 50; // 每次递减50像素
if(h <= 5){
getObject('class_cnt1').style.display="none"; // 内容容器不可见（当容器高度小于5px）
getObject('tabclass1').style.backgroundImage="url(http://www.east-dragon.cn/files/sw/images/tab_drop2.gif)";
if(tt){window.clearInterval(tt);}
}
else{
getObject('class_cnt1').style.height = h + "px"; // // 容器高度不断的以50px递减
}
}
var tt = window.setInterval(anim,2); // 设置每2毫秒循环一次（每2毫秒，运行一次anim[容器的高度递减50px]）
}
//=======================================================
//函数名称：showClassList()
//函数功能：隐藏-显示级分类列表框（class_cnt1）
//返回值：无
//=======================================================
function showClassList(){
// 如果内容容器为不可见的display:none
if(getObject('class_cnt1').style.display == "none"){
displayList(); // 显示内容框
}
else{ // 如果内容容器为可见的display:block
hiddenList(); // 隐藏内容框
}
}
-->
</script>
</head>
<body>
<div class="class_title">
<h2 id="tabclass1" onclick="showClassList()" title="隐藏/显示信息">分类信息</h2>
</div>
<div id="class_cnt1">
<p>
1111111<br />
111111111<br />
1111111<br />
111111111<br />
1111111<br />
111111111<br />
1111111<br />
111111111<br />
1111111<br />
111111111<br />
1111111<br />
111111111<br />
111111111<br />
</p>
</div>
</body>
</html>

复制代码

把这个代码加到ＤＷ保存个html页面看看效果！

cliffcrag · 发表于 2007-6-26 22:32:50

ding ding

SSAY · 发表于 2007-6-26 22:34:13

有人告诉我，说他在google的网站上看到这么个效果，就是可以把div层拖着走，想拉上面就上面，想拉下面就下面，问我怎么做的！
现在我来告诉大家！～

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
body
{
margin:10px;
}
#dragHelper
{
position:absolute;/*重要*/
border:2px dashed #000000;
background-color:#FFFFFF;
filter: alpha(opacity=30);
}
.normal
{
position:absolute;/*重要*/
width:300px;
#height:10px;
border:1px solid #666666;
background-color:#FFFFFF;
}
.over
{
position:absolute;/*重要*/
width:300px;
#height:10px;
border:1px solid #666666;
background-color:#f3f3f3;
filter: alpha(opacity=50);
}
.dragArea {
CURSOR: move;
}
</style>
</HEAD>
<BODY oncontextmenu="window.event.returnValue=false">
<input type="text" id="evt" name="eventValue" size="40" />
<div id="dragHelper" style="display:none"></div>
<div class="normal" overClass="over" dragClass="normal">
<table width="100%">
<tbody>
<tr bgcolor="#CCCCCC" bar="yes"><td><a href="#">Cobao</a></td><td dragArea="yes" class="dragArea">........</td><td><a href="#" onclick="openClose(this)">-</a> x</td></tr>
<tr><td colspan="3">地址:[url]http://www.cobao.cn[/url]</td></tr>
<tr><td colspan="3">关键字:</td></tr>
<tr><td colspan="3">说明:</td></tr>
</tbody>
</table>
</div>
<div class="normal" overClass="over" dragClass="normal">
<table width="100%">
<tbody>
<tr bgcolor="#CCCCCC" bar="yes"><td>新浪</td><td dragArea="yes" class="dragArea">........</td><td><a href="#" onclick="openClose(this)">-</a> x</td></tr>
<tr><td colspan="3">地址:[url]http://www.sina.com.cn[/url]</td></tr>
<tr><td colspan="3">关键字:</td></tr>
<tr><td colspan="3">说明:</td></tr>
</tbody>
</table>
</div>
<div class="normal" overClass="over" dragClass="normal">
<table width="100%">
<tbody>
<tr bgcolor="#CCCCCC" bar="yes"><td>网易</td><td dragArea="yes" class="dragArea">........</td><td><a href="#" onclick="openClose(this)">-</a> x</td></tr>
<tr><td colspan="3">地址:[url]http://www.163.com[/url]</td></tr>
<tr><td colspan="3">关键字:</td></tr>
<tr><td colspan="3">说明:</td></tr>
</tbody>
</table>
</div>
<div class="normal" overClass="over" dragClass="normal">
<table width="100%">
<tbody>
<tr bgcolor="#CCCCCC" bar="yes"><td>QQ</td><td dragArea="yes" class="dragArea">........</td><td><a href="#" onclick="openClose(this)">-</a> x</td></tr>
<tr><td colspan="3">地址:[url]http://www.qq.com[/url]</td></tr>
<tr><td colspan="3">关键字:</td></tr>
<tr><td colspan="3">说明:</td></tr>
</tbody>
</table>
</div>
</BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
var dragObjs = []; //可以拖拽的元素数组
var dragObjTops = [];
var dragHelper = document.getElementById("dragHelper"); //拖拽时位置框
var dragObj = null; //拖拽对象元素
var dragObjPos = 0;
var dragObjOffset = {left:0,top:0}; //拖拽对象原始位置
var mouseInDragObjOffset = {x:0,y:0}; //鼠标在拖拽对象中的相对位置
var initHeight = 40;
Number.prototype.NaN0=function(){return isNaN(this)?0:this;}
function getPosition(e){ //获取元素相对文档的绝对位置
var left = 0;
var top = 0;
while (e.offsetParent){
left += e.offsetLeft;
top += e.offsetTop;
e = e.offsetParent;
}
left += e.offsetLeft;
top += e.offsetTop;
return {x:left, y:top};
}
function mouseCoords(ev){ //获取鼠标相对文档的绝对位置
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
function getMouseOffset(target, ev){ // 获取鼠标相对元素的相对位置
ev = ev || window.event;
var elementPos = getPosition(target);
var mousePos = mouseCoords(ev);
return {x:mousePos.x - elementPos.x, y:mousePos.y - elementPos.y};
}
function mouseDown(ev){
ev = ev || window.event;
target = ev.srcElement || ev.target;
if(dragObj){
return;
}
var dragArea = false;
if(target.getAttribute("dragArea")){
dragArea = true;
}
while(!target.getAttribute("isDragObj")){
if(target.tagName=="HTML")
break;
target = target.parentNode;
}
if(dragArea && target.getAttribute("isDragObj")){
dragObj = target;
//重写的目的是让当前对象在最上层
document.body.removeChild(dragObj);
document.body.appendChild(dragObj);
//记录下拖拽对象原始位置
dragObjOffset.left = dragObj.style.left;
dragObjOffset.top = dragObj.style.top;
dragObj.className = dragObj.getAttribute("overClass");
//鼠标在拖拽对象中的相对位置
mouseInDragObjOffset = getMouseOffset(dragObj, ev);
dragHelper.style.left = dragObj.style.left;
dragHelper.style.top = dragObj.style.top;
dragHelper.style.width = dragObj.offsetWidth;
dragHelper.style.height = dragObj.offsetHeight;
dragHelper.style.display = "";
//alert(dragObj.offsetWidth+":"+dragObj.clientWidth);
}
}
function mouseUp(ev){
ev = ev || window.event;
target = ev.srcElement || ev.target;
if(dragObj){
dragObj.style.left = dragHelper.style.left;
dragObj.style.top = dragHelper.style.top;
dragHelper.style.display = "none";
dragObj.className = dragObj.getAttribute("dragClass");
dragObj = null;
}
}
function mouseMove(ev){
ev = ev || window.event;
if(dragObj) {
var mousePos = mouseCoords(ev);
/*dragHelper.style.left = dragObjOffset.left;
dragHelper.style.top = dragObjOffset.top;
dragHelper.style.width = dragObj.offsetWidth;
dragHelper.style.height = dragObj.offsetHeight;
dragHelper.style.display = "";*/
var windowWidth = document.body.offsetWidth; //窗口宽度
var windowHeight = document.body.offsetHeight; //窗口高度
//拖拽对象应该所在当前位置
var dragObjLeft = mousePos.x - mouseInDragObjOffset.x;
var dragObjTop = mousePos.y - mouseInDragObjOffset.y;
//增加判断，不然拖拽对象拖出浏览器窗口
if(dragObjLeft >= 0 && dragObjLeft <= windowWidth - dragObj.offsetWidth - 20)
dragObj.style.left = dragObjLeft;
if(dragObjTop >=0)
dragObj.style.top = dragObjTop;
repaint();
}
}
//克隆对象
function cloneObject(srcObj, destObj){
destObj = srcObj.cloneNode(true);
}
function makeDraggable(element){
element.setAttribute("isDragObj", "y");
}
function repaint(){
for(i=0; i<dragObjs.length; i++){
if(dragObjs[i] == dragObj){
dragObjPos = i;
dragObjs[i] = dragHelper;
break;
}
}
if(dragObjPos>0 && parseInt(dragObj.style.top)<parseInt(dragObjs[dragObjPos-1].style.top)){
dragObjs[dragObjPos] = dragObjs[dragObjPos-1];
dragObjs[dragObjPos-1] = dragHelper;
dragObjPos = dragObjPos - 1;
}
if(dragObjPos<dragObjs.length-1 && parseInt(dragObj.style.top)>parseInt(dragObjs[dragObjPos+1].style.top)){
dragObjs[dragObjPos] = dragObjs[dragObjPos+1];
dragObjs[dragObjPos+1] = dragHelper;
dragObjPos = dragObjPos + 1;
}
paintDragObjs();
dragObjs[dragObjPos] = dragObj;
}
function paintDragObjs(){
var h = 40;
for(i=0; i<dragObjs.length; i++){
dragObjs[i].style.left = 20;
dragObjs[i].style.top = h;
h += dragObjs[i].offsetHeight + 10;
}
}
function openClose(obj){
obj.innerHTML = obj.innerHTML=="-"?"+":"-";
while(obj.tagName != "TBODY"){
obj = obj.parentNode;
}
for(i=0; i<obj.childNodes.length; i++){
if(obj.childNodes[i].nodeName == "#text"
|| obj.childNodes[i].getAttribute("bar")){ continue; }
obj.childNodes[i].style.display=obj.childNodes[i].style.display==""?"none":"";
}
paintDragObjs();
}
document.onmousedown = mouseDown;
document.onmouseup = mouseUp;
document.onmousemove = mouseMove;
window.onload = function(){
var objs = document.getElementsByTagName("Div");
for(i=0; i<objs.length; i++){
var item = objs.item(i);
//if(i==1)item.style.height=150;
if(item.getAttribute("overClass")){
makeDraggable(item);
dragObjs.push(item);
item.style.left = 20;
item.style.top = initHeight;
dragObjTops.push(initHeight);
initHeight += item.offsetHeight + 10;
}
}
// dragHelper = document.createElement('DIV');
// dragHelper.style.cssText = 'position:absolute;display:none;';
// document.body.appendChild(dragHelper);
}
//-->
</SCRIPT>
</HTML>

复制代码

加到dw，保存html看下效果吧．．是不是实现了！

SSAY · 发表于 2007-6-26 22:36:42

前两天，有朋友在模仿淘宝网，看到他的首页，很感兴趣，想把ss也做成这样的效果，但下面的布局有点难．．．

现在我展示给大家看看．．．

把以下代码加到dw保存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>TAO BAO TEST</title>
<style>
/* 子鼠 [url]www.zishu.cn[/url] */
body{ margin:10px; padding:10px; font-size:12px; line-height:1.7; text-align:center;}
#zishu{ width:780px; margin-left:auto; margin-right:auto;}
.list{width:260px; height:155px; float:left;}
.box{ float:left; width:225px;}
.box2{ padding:0 5px 0 5px; text-align:left;}
#r1{background-position: 0;}
#r2{background-position: -19px;}
#r3{background-position: -38px;}
#r4{background-position: -57px;}
#r5{background-position: -76px;}
#r6{background-position: -95px;}
#r7{background-position: -114px;}
#r8{background-position: -133px;}
#r9{background-position: -152px;}
#t1{background-position: 0px 0px;}
#t2{background-position: 0px -5px;}
#t3{background-position: 0px -10px;}
#t4{background-position: 0px -15px;}
#t5{background-position: 0px -20px;}
#t6{background-position: 0px -25px;}
#t7{background-position: 0px -30px;}
#t8{background-position: 0px -35px;}
#t9{background-position: 0px -40px;}
#y1{background-position: 0px 0px;}
#y2{background-position: 0px -18px;}
#y3{background-position: 0px -36px;}
#y4{background-position: 0px -54px;}
#y5{background-position: 0px -72px;}
#y6{background-position: 0px -90px;}
#y7{background-position: 0px -108px;}
#y8{background-position: 0px -126px;}
#y9{background-position: 0px -144px;}
#u1{border-right: 1px solid #8A8FA0;border-left: 1px solid #8A8FA0;}
#u2{border-right: 1px solid #DF4493;border-left: 1px solid #DF4493;}
#u3{border-right: 1px solid #3B6DA5;border-left: 1px solid #3B6DA5;}
#u4{border-right: 1px solid #AA86CE;border-left: 1px solid #AA86CE;}
#u5{border-right: 1px solid #6EA314;border-left: 1px solid #6EA314;}
#u6{border-right: 1px solid #C55936;border-left: 1px solid #C55936;}
#u7{border-right: 1px solid #FAAD2D;border-left: 1px solid #FAAD2D;}
#u8{border-right: 1px solid #86D500;border-left: 1px solid #86D500;}
#u9{border-right: 1px solid #2F8A8E;border-left: 1px solid #2F8A8E;}
.cd1{background-image:url(../jsneedpic/f2006517215038.gif);background-repeat:no-repeat;cursor:pointer;float:left; width:19px;
height:142px;}
.ce1{background-image:url( ../jsneedpic/s2006517215046.gif);background-repeat:no-repeat;height:5px;overflow:hidden;}
.cf1{background:#fafafa;border-top: 0;border-bottom: 0; height:119px;}
.cg1{background-image:url(../jsneedpic/32006517215056.gif);background-repeat:no-repeat;height:18px;overflow:hidden;}
.l1{width:40px;height:20px;cursor:pointer; margin-left:180px;}
</style>
</head>
<body>
<div id="zishu">
<div class="list">
<a href="http://www.zishu.cn"><div id="r1" class="cd1"></div></a>
<div class="box">
<div id="t1" class="ce1"></div>
<div id="u1" class="cf1">
<div class="box2">这里是内容1</div>
</div>
<div id="y1" class="cg1">
<a href="http://www.zishu.cn"><div class="l1"></div></a>
</div>
</div>
</div>
<div class="list">
<a href="http://www.zishu.cn"><div id="r2" class="cd1"></div></a>
<div class="box">
<div id="t2" class="ce1"></div>
<div id="u2" class="cf1">
<div class="box2">这里是内容2</div>
</div>
<div id="y2" class="cg1">
<a href="http://www.zishu.cn"><div class="l1"></div></a>
</div>
</div>
</div>
<div class="list">
<a href="http://www.zishu.cn"><div id="r3" class="cd1"></div></a>
<div class="box">
<div id="t3" class="ce1"></div>
<div id="u3" class="cf1">
<div class="box2">这里是内容3</div>
</div>
<div id="y3" class="cg1">
<a href="http://www.zishu.cn"><div class="l1"></div></a>
</div>
</div>
</div>
<div class="list">
<a href="http://www.zishu.cn"><div id="r4" class="cd1"></div></a>
<div class="box">
<div id="t4" class="ce1"></div>
<div id="u4" class="cf1">
<div class="box2">这里是内容4</div>
</div>
<div id="y4" class="cg1">
<a href="http://www.zishu.cn"><div class="l1"></div></a>
</div>
</div>
</div>
<div class="list">
<a href="http://www.zishu.cn"><div id="r5" class="cd1"></div></a>
<div class="box">
<div id="t5" class="ce1"></div>
<div id="u5" class="cf1">
<div class="box2">这里是内容5</div>
</div>
<div id="y5" class="cg1">
<a href="http://www.zishu.cn"><div class="l1"></div></a>
</div>
</div>
</div>
<div class="list">
<a href="http://www.zishu.cn"><div id="r6" class="cd1"></div></a>
<div class="box">
<div id="t6" class="ce1"></div>
<div id="u6" class="cf1">
<div class="box2">这里是内容6</div>
</div>
<div id="y6" class="cg1">
<a href="http://www.zishu.cn"><div class="l1"></div></a>
</div>
</div>
</div>
<div class="list">
<a href="http://www.zishu.cn"><div id="r7" class="cd1"></div></a>
<div class="box">
<div id="t7" class="ce1"></div>
<div id="u7" class="cf1">
<div class="box2">这里是内容7</div>
</div>
<div id="y7" class="cg1">
<a href="http://www.zishu.cn"><div class="l1"></div></a>
</div>
</div>
</div>
<div class="list">
<a href="http://www.zishu.cn"><div id="r8" class="cd1"></div></a>
<div class="box">
<div id="t8" class="ce1"></div>
<div id="u8" class="cf1">
<div class="box2">这里是内容8</div>
</div>
<div id="y8" class="cg1">
<a href="http://www.zishu.cn"><div class="l1"></div></a>
</div>
</div>
</div>
<div class="list">
<a href="http://www.zishu.cn"><div id="r9" class="cd1"></div></a>
<div class="box">
<div id="t9" class="ce1"></div>
<div id="u9" class="cf1">
<div class="box2">这里是内容9</div>
</div>
<div id="y9" class="cg1">
<a href="http://www.zishu.cn"><div class="l1"></div></a>
</div>
</div>
</div>
<p>以上为测试代码，CSS和内容都没有优化，但思路应该是对的！子鼠 2006-05-17 晚</p>
</div>
</body>
</html>

复制代码

SSAY · 发表于 2007-6-26 22:41:50

我朋友的脑子似乎像个小孩，只要他没事情做，他就乱想．．．这下好了，他问我，我不会php也不会asp，但我想把php里面加载出来的数据显示在ss首页上，但是问题出来了，我一看，妈的，显示了一个屏幕，怎么把他搞少点．我告诉他，把ss里的数据调用值简短点就可以了，但他说，不想这样，我想让所有人看到，但是不要怎么大．．．呵呵，那就做分页吧．

啊，分页．．．对～

看以下效果：

<!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" lang="gb2312">
<head>
<title>CSS+JS实现的静态页面翻页效果</title>
<style type="text/css">
* {
font : normal 12px/1.5em "Microsoft YaHei", Tahoma;
_font : normal 12px/1.5em Tahoma; /* CSS Hack For IE6 */
border: 0px;
margin: 0px;
padding: 0px;
overflow: hidden;
text-decoration: none;
*text-overflow: ellipsis; /* CSS Hack For IE7 & IE6 */
}
a {
color: #333;
}
a :link{
color: #333;
}
a:active{color:#FF6600}
a:hover {
color: #06c;
}
body {
background: #f3faff;
text-align: center;
}
ul {
list-style-type: none;
}
li {
margin-bottom: 13px; /* CSS Hack For Firefox */
*margin-bottom: 12px; /* CSS Hack For IE7 & IE6 */
_margin-bottom: 3%; /* CSS Hack For IE6 */
white-space: nowrap;
}
#Main_News {
/*background-color: teal;*/
border: 1px #acd0f0 solid;
width: 445px;
height: 402px;
}
#Content {
width: 425px;
height: 372px;
margin: 10px 10px 0px 10px;
_margin: 10px 5px 0px 5px; /* CSS Hack For IE6 */
overflow: hidden;
text-align: left;
}
#Pages {
width: 445px;
height: 20px;
margin: 0px;
text-align: right;
}
#Pages a:link{color:#000000}
#Pages a:hover{color:#FF0000}
#Pages a:active{color:#3300FF}
</style>
<script defer="defer" language="javascript" type="text/javascript">
<!--
var _offset = 0;
function _$id(_obj) {
return document.getElementById(_obj);
}
function _$Pages(_i) {
_$id("Content").scrollTop = (_$id("Content").clientHeight*_i);
for (var i=0;i<(_$id("Content").scrollHeight/_offset);i++)
{
if (i==_i)
_$id("soojs_"+(_i+1)).style.backgroundColor="#ff9900";
else
_$id("soojs_"+(i+1)).style.backgroundColor="";
}
}
function _$InitPages() {
var _s='';
_offset = _$id("Content").clientHeight;
var _top = _$id("Content").scrollTop;
for (var i=0;i<(_$id("Content").scrollHeight/_offset);i++) {
_s+=('<a href="javascript:void(0);" onclick="javascript:_$Pages('+i+');" onfocus="this.blur()" title="Page '+(i+1)+'" id="soojs_'+(i+1)+'">'+" "+(i+1)+" "+'</a>    ');
}
_$id("Pages").innerHTML=_s;
_$id("soojs_"+1).style.backgroundColor="#ff9900";
}
//-->
</script>
</head>
<body onload="_$InitPages();" >
<div id="Main_News">
<div id="Content">
<ul>
<li><span class="type">[图文]</span>科研处关于科研成果登记的通知</li>
<li><span class="type">[图文]</span>关于清除炒股聊天等软件的通知</li>
<li><span class="type">[图文]</span>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
<li>科研处关于科研成果登记的通知1</li>
<li>关于清除炒股聊天等软件的通知2</li>
<li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
<li>科研处关于科研成果登记的通知3</li>
<li>关于清除炒股聊天等软件的通知4</li>
<li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
<li>科研处关于科研成果登记的通知5</li>
<li>关于清除炒股聊天等软件的通知6</li>
<li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
<li>科研处关于科研成果登记的通知7</li>
<li>关于清除炒股聊天等软件的通知8</li>
<li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
<li>科研处关于科研成果登记的通知9</li>
<li>关于清除炒股聊天等软件的通知10</li>
<li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
<li>科研处关于科研成果登记的通知11</li>
<li>关于清除炒股聊天等软件的通知12</li>
<li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
<li>科研处关于科研成果登记的通知13</li>
<li>关于清除炒股聊天等软件的通知14</li>
<li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
<li>科研处关于科研成果登记的通知15</li>
<li>关于清除炒股聊天等软件的通知16</li>
<li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
<li>科研处关于科研成果登记的通知17</li>
<li>关于清除炒股聊天等软件的通知18</li>
<li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
<li>科研处关于科研成果登记的通知19</li>
<li>关于清除炒股聊天等软件的通知20</li>
<li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
<li>科研处关于科研成果登记的通知21</li>
<li>关于清除炒股聊天等软件的通知22</li>
<li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
<li>科研处关于科研成果登记的通知23</li>
<li>关于清除炒股聊天等软件的通知24</li>
<li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
<li>科研处关于科研成果登记的通知25</li>
<li>关于清除炒股聊天等软件的通知26</li>
<li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
<li>科研处关于科研成果登记的通知27</li>
<li>关于清除炒股聊天等软件的通知28</li>
<li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
<li>科研处关于科研成果登记的通知29</li>
<li>关于清除炒股聊天等软件的通知30</li>
<li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
</ul>
</div>
<div id="Pages"></div>
</div>
</body>
</html>

复制代码

让js把div里的文字（就是ss加载出来的数据）自动分页！

SSAY · 发表于 2007-6-26 22:43:27

现在官方使用的效果，类似：纯CSS内页选项卡

<!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">
<head>
<title>选项卡</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="Sheneyan" />
<style type="text/css">
a img{border:0}
.hidden{display:none}/*隐藏*/
/*日记的选项卡*/
div.tab ul{margin:0;padding:0;list-style:none}
div.tab ul li{float:left;padding:0 5px 2px 0;}
div.tab ul li.s{padding-bottom:0;}
div.tab a{text-align:center;width:40px;display:block;text-decoration:none;color:#658A16;background:#E2F3B8;padding:2px 5px;height:20px;line-height:20px;}
div.tab li.s a{background:#658A16;color:#E2F3B8;height:26px;padding-bottom:2px;font-weight:bold;cursor:default;}
div.tab a:hover{background:#658A16;color:#E2F3B8;text-decoration:underline;}
div.tab li.s a:hover{text-decoration:none;}
div.content{clear:both;border:solid 1px #658A16;border-width:5px 1px 1px;}
</style>
<script type="text/javascript">
//<![CDATA[
$=function(id){return document.getElementById(id);}
var oldSelectedTabId = null;//上次选中的选项卡
/*初始化日记的选项卡*/
initTab=function(t){
var tab = $(t);//取得选项卡标签对象
if (!tab)return;//没有这个东东就退出
var hs = tab.getElementsByTagName('a');//取得所有的超链接
var l = hs.length;//超链接长度
for (var i = 0;i < l ;i++ ){//遍历超链接
var a = hs[i];//取得一个超链接
a.onclick=function(ev){//设置超链接的onclick事件
this.blur();//先把超链接的焦点去了……
toggleTab(this);//单击选项卡标签时，切换选项卡,调用自定义函数toggleTab
}
if (hasClass(a.parentNode,"s"))//如果这个超链接的上一层（li）的class是s的话
toggleTab(a);//如果当前超链接是被选中的标签，切换选项卡
else
addClass(getTabObj(a.id,"content"),"hidden");//如果当前标签未被选中，隐藏当前标签显示内容
a.href="javascript:void(0)"//将当前超链接的href清除，避免url中出现#...
}
if (!oldSelectedTabId)//如果没设置默认选中标签，则认为第一个标签被选中
toggleTab(hs[0]);
}
//切换选项卡
toggleTab = function(a){
if (!a)return;//如果没有对象，退出（可能的情况，选项卡为空……）
if (oldSelectedTabId&&oldSelectedTabId==a.id)return;//如果还是选择当前选项卡，直接退出
else if (oldSelectedTabId){//如果之前选择过选项卡标签而且不是当前选项卡
removeClass(getTabObj(oldSelectedTabId,"href").parentNode,"s");//移除超链接上一层的被选中样式
addClass(getTabObj(oldSelectedTabId,"content"),"hidden");//设置之前被选中选项卡内容隐藏
}
addClass(a.parentNode, "s");//设置该超链接上一层为被选中
oldSelectedTabId = a.id;//设置之前被选中选项卡为当前选项卡
removeClass(getTabObj(a.id,"content"),"hidden");//将当前选项卡的内容设置为不隐藏
}
//取得对应id的对象
getTabObj=function(id,type){//用来将给定的id替换成正确的id
var TYPE = {content:"c_",href:"h_"}//类型:内容（content）和超链接(href)
var r = /(c_|h_)/g//用于替换的正则
return $(id.replace(r,TYPE[type]));//返回对应id的对象
}
//是否存在指定样式class
hasClass = function(obj,className){
if (!obj||!obj.className)return false;//如果对象或者对象class不存在就退出
return new RegExp("\\b"+className+"\\b","g").test(obj.className);//用正则判断对象是否有指定class
}
//增加样式class
addClass = function(obj,className){
if (!obj)return false;//如果对象不存在就退出
obj.className = obj.className + " " + className+" ";//给对象增加class
}
//删除指定样式class
removeClass = function(obj,className){
if (!obj||!obj.className)return false;//如果对象或者对象class不存在就退出
obj.className = obj.className.replace(new RegExp("\\b"+className+"\\b","g"),"").replace(/^\s*|\s$/g,"")//用正则替换掉原来的不要的class，并去除头尾多余的空格
}
//]]>
</script>
</head>
<body onload="initTab('tab')">
<div class="tab" id="tab">
<ul>
<li class="s"><a href="#href_study" id="h_study">学习</a></li>
<li ><a href="#href_book" id="h_book">读书</a></li>
<li ><a href="#href_tech" id="h_tech">技术</a></li>
</ul>
</div>
<div class="content">
<div id="c_study">
<h3 class="goback">日记>><a href="###" id="href_study" title="跳转到该类日记">学习</a></h3>
<ul class="diarylist">
<li><a href="###">第一学期考试过了:D(点击数:65)</a><span>2006-07-31 01:34 </span></li>
<li><a href="###">读书计划推迟(点击数:33)</a><span>2006-07-17 22:53 </span></li>
<li><a href="###">复习时间到~(点击数:51)</a><span>2006-07-17 12:20 </span></li>
<li><a href="###">第一次期末考试总结(点击数:40)</a><span>2006-07-07 23:00 </span></li>
</ul>
</div>
<div id="c_book">
<h3 class="goback">日记>><a href="###" id="href_book" title="跳转到该类日记">读书</a></h3>
<ul class="diarylist">
<li><a href="###">余华的《兄弟》(点击数:76)</a><span>2006-08-03 01:43 </span></li>
<li><a href="###">看完《鲸图腾》了(点击数:41)</a><span>2006-07-16 14:16 </span></li>
<li><a href="###">可可西里(点击数:26)</a><span>2004-12-11 13:37 </span></li>
<li><a href="###">看完《花妖》(点击数:29)</a><span>2004-09-24 16:38 </span></li>
<li><a href="###">《活着》(点击数:41)</a><span>2004-09-18 06:23 </span></li>
<li><a href="###">买了新碟(点击数:27)</a><span>2004-07-29 20:37 </span></li>
<li><a href="###">看完了《鸟的迁徙》(点击数:28)</a><span>2004-07-13 20:28 </span></li>
<li><a href="###">读书计划(点击数:47)</a><span>2004-07-12 20:06 </span></li>
<li><a href="###">终于看完了《我的死了的生活的回忆》(点击数:30)</a><span>2004-07-11 20:05 </span></li>
<li><a href="###">悟空传读书笔记(点击数:30)</a><span>2004-07-08 12:15 </span></li>
</ul>
</div>
<div id="c_tech">
<h3 class="goback">日记>><a href="###" id="href_tech" title="跳转到该类日记">技术</a></h3>
<ul class="diarylist">
<li><a href="###">QuiXplorer 2.3功能补强(点击数:14)</a><span>2006-08-22 01:11 </span></li>
<li><a href="###">许愿墙笔记(1):目录[草稿](点击数:27)</a><span>2006-08-21 14:48 </span></li>
<li><a href="###">许愿墙(点击数:68)</a><span>2006-08-19 03:00 </span></li>
<li><a href="###">我的pagerank查询接口(点击数:110)</a><span>2006-08-06 00:59 </span></li>
<li><a href="###">W3的幽默(点击数:91)</a><span>2006-08-02 23:28 </span></li>
</ul>
</div>
</div>
<p><a href="http://sheneyan.com" title='子乌的叶子' target='new'>子乌的叶子</a></p>
</body>
</html>

复制代码

SSAY · 发表于 2007-6-26 22:44:43

<html>
<head>
<title>新浪的图片新闻效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<p> </p>

  <p>
<script language=javascript>
//-------定义图片路径等参数-------------//
//定义大图的路径，
var bigPic0 ="http://image2.sina.com.cn/book/U1503P167T135D1F4549DT20060629223845.jpg";
var bigPic1 ="http://image2.sina.com.cn/book/U1503P167T135D1F4552DT20060629223845.jpg";
var bigPic2 ="http://image2.sina.com.cn/book/U1396P167T135D1F4555DT20060629141338.jpg";
var bigPic3 ="http://image2.sina.com.cn/book/U1396P167T135D1F4558DT20060628170108.jpg";
//小图路径
var smallPic0 ="http://image2.sina.com.cn/book/U1503P167T135D1F4548DT20060629223845.jpg";
var smallPic1 ="http://image2.sina.com.cn/book/U1503P167T135D1F4551DT20060629223845.jpg";
var smallPic2 ="http://image2.sina.com.cn/book/U1396P167T135D1F4554DT20060629141338.jpg";
var smallPic3 ="http://image2.sina.com.cn/book/U1396P167T135D1F4557DT20060628170108.jpg";
//大图的点击后的URL
var PicURL0 ="http://www.2ky.cn";
var PicURL1 ="http://www.2ky.cn";
var PicURL2 ="http://www.2ky.cn";
var PicURL3 ="http://www.2ky.cn";
//标题
var t0="搞笑节目《玩转世界杯》第9期：情陷解说门";
var t1="音频：黄健翔激情解说搞笑版大全";
var t2="Play Girl(网络宝贝)X计划";
var t3="《Memory》爱情是一个迷";
//描述
var describe0="小马派出密探零零发前往德国世界杯现场，调查“解说门”事件真相……";
var describe1="黄健翔是公认的中国足球评论员第一人；他，曾骄傲地宣称自己的解说就是行业标准……";
var describe2="你也能成为聚万千艳羡于一身的游戏MM，PlayGirl X计划，将你打造成游戏巅峰最耀眼的明星。";
var describe3="怎样的爱情可以真实地握在手中？这样的爱情是真实还是虚幻？";
//
var t=t0+"[|]"+t1+"[|]"+t2+"[|]"+t3;
var bigPicURL=bigPic0+"[|]"+bigPic1+"[|]"+bigPic2+"[|]"+bigPic3;
var smallPicURL=smallPic0+"[|]"+smallPic1+"[|]"+smallPic2+"[|]"+smallPic3;
var PicURL=PicURL0+"[|]"+PicURL1+"[|]"+PicURL2+"[|]"+PicURL3;
var describe = describe0+"[|]"+describe1+"[|]"+describe2+"[|]"+describe3;
//
document.write("\
<object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0' width='535' height='356' ID=FSCommand NAME='focus_one' align='middle'>\
<param name='allowScriptAccess' value='sameDomain' />\
<param name='movie' value='http://www.2ky.cn/js/jsneedpic/bnfocus.swf' />\
<param name='FlashVars' value='bigPicURL=" + bigPicURL + "&smallPicURL=" + smallPicURL + "&t="+t+"&PicURL="+PicURL+"&describe="+describe+"'/>\
<param name='quality' value='high' />\
<param name='bgcolor' value='#ffffff' />\
<embed src='http://yule521.com/tool/bnfocus.swf' FlashVars='bigPicURL=" + bigPicURL + "&smallPicURL=" + smallPicURL + "&t="+t+"&PicURL="+PicURL+"&describe="+describe+"' quality='high' bgcolor='#ffffff' width='535' height='356' name='focus' swLiveConnect='true' align='middle' allowScriptAccess='sameDomain' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' />\
</object>\
");
</script>
<br />

</body>
</html>

使用代码时记得要下载Flash文件 http://www.2ky.cn/js/jsneedpic/bnfocus.swf

SSAY · 发表于 2007-6-26 22:46:11

<!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" />
<META content="" name=keywords>
<title>栏目切换 </title>
<link rel="Shortcut Icon" href="designac.ico">
<link rel="Bookmark" href="designac.ico">
<style>
BODY {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; COLOR: #333; PADDING-TOP: 0px; FONT-FAMILY: "Verdana"; TEXT-ALIGN: center}
.indexNews {FLOAT: left; WIDTH: 464px}
.top {BACKGROUND:#dddddd; WIDTH: auto; HEIGHT: 24px}
a:link {color: #11559c;text-decoration: none;}
a:visited {color: #11559c;text-decoration: none;}
a:hover {color: #11559c;text-decoration: none;}
.option1 {BORDER-RIGHT: #539fea 1px solid; FONT-WEIGHT: bold; FLOAT: left; BACKGROUND:#eeeeee; BORDER-LEFT: #539fea 1px solid; WIDTH: 120px; CURSOR: pointer; COLOR: #11559c; LINE-HEIGHT: 24px}
.option2 {FLOAT: left; WIDTH: 114px; CURSOR: pointer; COLOR: #11559c; LINE-HEIGHT: 24px}
.newsBorder {BORDER-RIGHT: #539fea 1px solid; TABLE-LAYOUT: fixed; BORDER-LEFT: #539fea 1px solid; WIDTH: auto; BORDER-BOTTOM: #539fea 1px solid; HEIGHT: 286px}
.articleList {PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; TEXT-ALIGN: left}
.articleList UL {MARGIN: 0px; COLOR: #dedede; LIST-STYLE-TYPE: none}
.articleList LI {PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 12px; PADDING-BOTTOM: 0px; OVERFLOW: hidden; COLOR: #666; PADDING-TOP: 4px}
.articleList LI A {COLOR: #333; TEXT-DECORATION: none}
.articleList LI A:hover {COLOR: #bf0000; TEXT-DECORATION: underline}
</style>
</head>
<SCRIPT language=Javascript >
//新闻
var newsID = '';
function news(id){
var newsObj = document.getElementById('a' + newsID);
if(newsObj){
newsObj.style.display = 'none';
document.getElementById('b' + newsID).className = 'option2';
}
var obj = document.getElementById('a' + id);
document.getElementById('b' + id).className = 'option1';
obj.style.display = '';
newsID = id;
}
var news1ID = '';
function news1(id){
var news1Obj = document.getElementById('c' + news1ID);
if(news1Obj){
news1Obj.style.display = 'none';
document.getElementById('d' + news1ID).className = 'option2';
}
var obj = document.getElementById('c' + id);
document.getElementById('d' + id).className = 'option1';
obj.style.display = '';
news1ID = id;
}
</SCRIPT>
<body>
<div class="indexNews">
<div class="top">
<div class="option2" id="b1" onMouseOver="news(1)">体育新闻</div>
<div class="option2" id="b2" onMouseOver="news(2)"><a href="/news/Official-news/">娱乐新闻</a></div>
<div class="option2" id="b3" onMouseOver="news(3)"><a href="/news/IT-industry/">推荐新闻</a></div>
<div class="option2" id="b4" onMouseOver="news(4)"><a href="/news/IT-industry/">推荐新闻</a></div>
</div>
<div class="newsBorder">
<div id="a1" style="display:none;">
<div class=articleList>
<ul>
<li><A href="http://ent.163.com/special/00031RG4/superG.html">"超女台"播05十大金曲李宇春何洁跳舞</A></li>
<li><A href="http://ent.163.com/06/1214/08/329RK03900031H2L.html">赵薇要做乖学生坦言已不适应娱乐圈图</A></li>
</ul>
</div>
</div>
<div id="a2" style="display:none;">
<div class=articleList>
<ul>
<LI><A href="http://sports.163.com/06/1217/11/32HT982K00051CA1.html">NBA球星群殴竟危及观众10人被罚下</A></li>
<LI><A href="http://sports.163.com/06/1218/07/32JUVJ9G00051CA1.html">姚明32分10篮板火箭108-103快船</A></li>
</ul>
</div>
</div>
<div id="a3" style="display:none;">
<div class=articleList>
<ul>
<LI><A href="http://finance.163.com/06/1218/04/32JM9DOG00251OB6.html">138家民营油企联合成立"中商石油"组织</A></li>
</ul>
</div>
</div>
<div id="a4" style="display:none;">
<div class=articleList>
<ul>
<LI><A href="http://finance.163.com/06/1218/04/32JM9DOG00251OB6.html">138家民营油企联合成立"中商石油"组织</A></li>
</ul>
</div>
</div>
</div>
</div>
<script language=javascript>news(1)</script>
</body>
</html>

复制代码

SSAY · 发表于 2007-6-26 22:47:28

这个效果已经有好多人做了，但为了方便大家，我还是搞出来了！

<!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">
<head>
<title>标准布局应用：选项卡</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="PR" />
<script type="text/javascript">
</script>
<style type="text/css">
/* 选项卡关键属性 */
#tab { width:570px; height:260px; position:relative; } /*设置容器高宽等*/
html > body #tab { width:566px; }/*兼容IE6:IE6下宽度不够*/
#tab div { position:absolute; top:26px; left:0; width:564px; height:234px; border:solid #eee; border-width:0 1px 1px; }/*设置容器高宽等*/
#tab div { display:none; }/*设置容器默认隐藏:不用ID是因为下面将利用class来控制容器显示,而class优先级低于id选择器*/
#tab .block { display:block; }/*选中的容器*/
#tab h3 { float:left; width:114px; height:26px; line-height:26px; margin:0 -1px 0 0; font-size:14px; cursor:pointer; font-weight:normal; text-align:center; color:#00007F; background:#eee url([img]http://blog.pr1984.com/attachments/month_0612/720061212105226.gif[/img]) no-repeat; }/*默认标题样式*/
#tab .up { background:#fff url([img]http://blog.pr1984.com/attachments/month_0612/x20061212105231.gif[/img]) no-repeat; }/*选中的标题样式*/
/*修饰列表内容*/
#tab ul { margin:15px 0 0; list-style:none; padding:0; }
#tab li { float:left; width:50%; background:url([img]http://blog.pr1984.com/attachments/month_0612/a20061212105235.gif[/img]) no-repeat 25px 10px; }
#tab li a { display:block; width:84%; height:25px; line-height:25px; margin-left:8%; font-size:12px; text-decoration:none; color:#333; background:url([img]http://blog.pr1984.com/attachments/month_0612/g20061212105238.gif[/img]) repeat-x left bottom; text-indent:10px; }
#tab li a:hover { text-decoration:underline; color:#f00; }
</style>
</head>
<body>
<div id="tab">
<h3 class="up" onclick="go_to(1);">选择一</h3>
<div class="block">
<ul>
<li><a href="#">11111111111111 </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>
<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>
<li><a href="#">民警特权扣车,油变成 </a></li>
<li><a href="#">地下室及公摊面积不收 </a></li>
<li><a href="#">当前医疗广告存在的问 </a></li>
<li><a href="#">新医改要注意的几个问 </a></li>
</ul>
</div>
<h3 onclick="go_to(2);">选择二</h3>
<div>
<ul>
<li><a href="#">22222222222222222 </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>
<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>
<li><a href="#">民警特权扣车,油变成 </a></li>
<li><a href="#">地下室及公摊面积不收 </a></li>
<li><a href="#">当前医疗广告存在的问 </a></li>
<li><a href="#">新医改要注意的几个问 </a></li>
</ul>
</div>
<h3 onclick="go_to(3);">选择三</h3>
<div>
<ul>
<li><a href="#">333333333333333 </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>
<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>
<li><a href="#">民警特权扣车,油变成 </a></li>
<li><a href="#">地下室及公摊面积不收 </a></li>
<li><a href="#">当前医疗广告存在的问 </a></li>
<li><a href="#">新医改要注意的几个问 </a></li>
</ul>
</div>
<h3 onclick="go_to(4);">选择四</h3>
<div>
<ul>
<li><a href="#">444444444444444 </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>
<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>
<li><a href="#">民警特权扣车,油变成 </a></li>
<li><a href="#">地下室及公摊面积不收 </a></li>
<li><a href="#">当前医疗广告存在的问 </a></li>
<li><a href="#">新医改要注意的几个问 </a></li>
</ul>
</div>
<h3 onclick="go_to(5);">选择五</h3>
<div>
<ul>
<li><a href="#">5555555555555555 </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>
<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>
<li><a href="#">民警特权扣车,油变成 </a></li>
<li><a href="#">地下室及公摊面积不收 </a></li>
<li><a href="#">当前医疗广告存在的问 </a></li>
<li><a href="#">新医改要注意的几个问 </a></li>
</ul>
</div>
<script type="text/javascript">
<!--
var h=document.getElementById("tab").getElementsByTagName("h3");
var d=document.getElementById("tab").getElementsByTagName("div");
function go_to(ao){
for(var i=0;i<h.length;i++){
if(ao-1==i){
h[i].className+=" up";
d[i].className+=" block";
}
else {
h[i].className=" ";
d[i].className=" ";
}
}
}
//-->
</script>
</div>
</body>
</html>

复制代码

SSAY · 发表于 2007-6-26 22:51:15

很多浏览器都是打开页面是半个的，
这里我发一个能让打开页面全屏的代码

<script>
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
</script>

复制代码

		自动登录	找回密码
密码			立即注册

[分享] 送上教程......希望大家能编辑出更好的风格！

评分

现在最流行的ＤＩＶ拖动效果！

淘宝风格

让js帮你分页～～

新浪网的完美图片新闻切换效果

网易的风格相似的选项卡

仿163首页的鼠标单击选项卡效果