位置：首页>> 网络编程>> JavaScript>> CSS制作滑动折叠的文字效果

CSS制作滑动折叠的文字效果

　　发布时间：2008-12-01 13:10:00　

标签：折叠,滑动,文字,效果

CSS制作滑动折叠的文字效果，可以用于二级导航菜单的制作，不错的下拉菜单。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"><html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS制作滑动折叠的文字效果 by okajax.com</title></head><style type="text/css"></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 = "#FFF"}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>asp之家</h2><div class="content"><p>域名:<a href="http://www.aspxhome.com" target="_blank">http://www.okajax.com</a><br /><br />ajax技术论坛<a href="http://bbs.okajax.com" target="_blank">http://bbs.okajax.com</a><br />ajax家园<a href="http://blog.okajax.com" target="_blank">http://blog.okajax.com</a><br />Ajax在线演示<br />Ajax因创意而精彩</p></div></li><li><h2>帝王槌</h2><div class="content"><p>立剑赏月意惆怅,袖饰刀,衣披霜,傲视雾丸,徒手战扶桑.<br />问津终寻帝王陵,黑影没,尸满岗,惟见逆鲮露寒光.　 <br />须发苍,气轩昂,三尺银狼,破风动八方.　 <br />依身紧握噬魂枪,饮虎血,豪万丈.惟有千年我故乡!</p></div></li><li><h2>玉女枪法</h2><div class="content"><p>曾经有个梦想：驰骋江湖，快意恩仇。<br />曾经有份愿望：千里追凶，十步溅血。<br />曾经有腔豪情：奇功盖世，名冠武林。<br />曾经有种期盼：烛影摇红，衣袖添香。</p></div></li><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><li><h2>雾水掌</h2><div class="content"><p>蹄影善奔,如幻如魔,其皮传世,绝学再现,<br />又有谁在这残阳道中追逐它的身影... </p></div></li></ul></body></html>

投稿

CSS制作滑动折叠的文字效果

猜你喜欢