JS实现的适合做faq或menu滑动效果示例
本文实例讲述了JS实现的适合做faq或menu滑动效果。分享给大家供大家参考,具体如下:
<!CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <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:380px; height:40px; background:#fff; font-size:14px; line-height:40px; padding-left:20px; color:#333; cursor:pointer} .content{ height:150px;width:400px; 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 = "#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> <ul id="rolin"> <li> <h2>脚本之家 1</h2> <div <p>脚本之家--专业IT综合性网站<br /><br /><a target="_blank" href="https://www.jb51.net/">https://www.jb51.net/</a></p> </div> </li> <li> <h2>脚本之家 2</h2> <div <p>脚本之家--专业IT综合性网站<br /><br /><a target="_blank" href="https://www.jb51.net/">https://www.jb51.net/</a></p> </div> </li> <li> <h2>脚本之家 3</h2> <div <p>脚本之家--专业IT综合性网站<br /><br /><a target="_blank" href="https://www.jb51.net/">https://www.jb51.net/</a></p> </div> </li> <li> <h2>脚本之家 4</h2> <div <p>脚本之家--专业IT综合性网站<br /><br /><a target="_blank" href="https://www.jb51.net/">https://www.jb51.net/</a></p> </div> </li> <li> <h2>脚本之家 5</h2> <div <p>脚本之家--专业IT综合性网站<br /><br /><a target="_blank" href="https://www.jb51.net/">https://www.jb51.net/</a></p> </div> </li> <li> <h2>脚本之家 6</h2> <div <p>脚本之家--专业IT综合性网站<br /><br /><a target="_blank" href="https://www.jb51.net/">https://www.jb51.net/</a></p> </div> </li> </ul>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
这篇文章主要介绍了PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法,造成这个问题的原因是PHP上传大小限制为2MB,修改PHP.ini配置即可解决这问题,需要的朋友可以参考下2015-03-03也说JavaScript中String类的replace函数
最近读了sharpxiajun的博文《javascript笔记--String类replace函数的一些事》,感觉写的很好,很有帮助。2011-09-09利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
在通过Javascript实现客户端和服务端的交互时,有时候需要对操作系统进行判断,以便实现不同操作系统下的兼容性;从而实现网站在跨平台浏览时候保持良好的用户体验,感兴趣的朋友可以了解下啊,或许对你有所帮助2013-01-01javascript转换字符串为dom对象(字符串动态创建dom)
那么今天的目的就是教大家怎么去实现一个这样的方法用来把字符串直接转换为标准的dom对象2010-05-05
最新评论