效果圖示,點開後會自動開啟內容(圖片或是文字)



製作方法:


步驟一、


在</head> 底下將下面的CSS語法加入


<style type="text/css">

<!--

body,div,ul,li,p,h1,h2{ margin:0; padding:0; border:0; background:#FAFAFA; font-family:Arial, Helvetica, sans-serif,"宋体"}

body{ text-align:center; font-size:12px}

li{ list-style:none}

.rolinList{ width:402px; height:auto; margin:20px auto 0 auto; text-align:left}

.rolinList li{margin-bottom:1px;border:1px solid #DADADA}

.rolinList li h2{ width:223px; height:40px; background:#ffffcc; font-size:14px; line-height:40px; padding-left:20px; color:#333; cursor:pointer}

.content{ height:150px;width:223px; background:#fff; background:#FAFAFA}

.content p{ margin:12px}

-->

</style>


<script type="text/javascript">

//<![CDATA[

window.onload = function() {

rolinTab("rolin")

}

function rolinTab(obj) {

var list = $(obj).getElementsByTagName("LI");

var state = {show:false,hidden:false,showObj:false};

for (var i=0; i<list.length; i++) {

var tmp = new rolinItem(list[i],state);

if (i == 0) tmp.pShow();

}

}

function rolinItem(obj,state) {

var speed = 0.0666;

var range = 1;

var interval;

var tarH;

var tar = this;

var head = getFirstChild(obj);

var content = getNextChild(head);

var isOpen = false;

this.pHidden = function() {

if (isOpen) hidden();

}

this.pShow = show;

var baseH = content.offsetHeight;

content.style.display = "none";

var isOpen = false;

head.onmouseover = function() {

this.style.background = "#EFEFEF";

}

head.onmouseout = mouseout;

head.onclick = function() {

this.style.background = "#EFEFEF";

if (!state.show && !state.hidden) {

if (!isOpen) {

head.onmouseout = null;

show();

} else {

hidden();

}

}

}

function mouseout() {

this.style.background = "#FFFfcc"

}

function show() {

head.style.borderBottom = "1px solid #DADADA";

state.show = true;

if (state.openObj && state.openObj != tar ) {

state.openObj.pHidden();

}

content.style.height = "0px";

content.style.display = "block";

content.style.overflow = "hidden";

state.openObj = tar;

tarH = baseH;

interval = setInterval(move,10);

}

function showS() {

isOpen = true;

state.show = false;

}

function hidden() {

state.hidden = true;

tarH = 0;

interval = setInterval(move,10);

}

function hiddenS() {

head.style.borderBottom = "none";

head.onmouseout = mouseout;

head.onmouseout();

content.style.display = "none";

isOpen = false;

state.hidden = false;

}

function move() {

var dist = (tarH - content.style.height.pxToNum())*speed;

if (Math.abs(dist) < 1) dist = dist > 0 ? 1: -1;

content.style.height = (content.style.height.pxToNum() + dist) + "px";

if (Math.abs(content.style.height.pxToNum() - tarH) <= range ) {

clearInterval(interval);

content.style.height = tarH + "px";

if (tarH != 0) {

showS()

} else {

hiddenS();

}

}

}

}

var $ = function($) {return document.getElementById($)};

String.prototype.pxToNum = function() {return Number(this.replace("px",""))}

function getFirstChild(obj) {

var result = obj.firstChild;

while (!result.tagName) {

result = result.nextSibling;

}

return result;

}

function getNextChild(obj) {

var result = obj.nextSibling;

while (!result.tagName) {

result = result.nextSibling;

}

return result;

}

//]]>

</script>


步驟二、


在<body>後面加上下面的語法




<ul class="rolinList" id="rolin">

<li>

<h2>花郎徒结</h2>

<div class="content"><p>当时明月在,曾照彩云归<br /><br />

倦了红颜,憔悴为千年,几多情深夜语,一点听风悠然。<br />

村忆梦回,飘逸如烟,友别怜影单。<br />

而今沙漠风闲,雪原清冷,东海云淡,石谷谁惜缘。<br />

累了心间,问也还烦,都道风沙淘尽,何日再慰别缘! </p></div>

</li>

<li>

<h2>帝王槌</h2>

<div class="content"><p>立剑赏月意惆怅,袖饰刀,衣披霜,傲视雾丸,徒手战扶桑.<br />

问津终寻帝王陵,黑影没,尸满岗,惟见逆鲮露寒光.  <br />

须发苍,气轩昂,三尺银狼,破风动八方.  <br />

依身紧握噬魂枪,饮虎血,豪万丈.惟有千年我故乡!</p></div>

</li>


</div>

</li>

</ul>


完成!!


 




id8051 發表在 痞客邦 PIXNET 留言(0) 人氣()