版权声明
·
网站留言
·
联系我们
·
加入收藏
热门关键词:
焦点图
png图标
背景
按钮
首页
PNG图标
广告代码
网页模板
字体下载
JS代码
CSS样式
技术文档
网站常用
gif图片
JPG图片
JavaScript用户手册
flash动画
jsp编程
.net编程
网站配色
网站优化
Oracle教程
JS技术
数据库编程
网络维护
html基础
安全相关
测试相关
知识扩展
CSS技术
DIV+CSS实例
DIV+CSS教程
鼠标特效
网站常用
文字特效
时间日期
图片特效
表格图层
导航菜单
网页特效
详细内容
首页
>>
JS
>>
导航菜单
>> 正文
[
关闭窗口
]
滑动效果,适合做faq或menu
发布日期:2010-03-16
点击:9307
<!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>滑动效果,适合做faq或menu--站点基地[zdbase.com]</title> </head> <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> <body> <ul class="rolinList" id="rolin"> <li> <h2>站点基地 1</h2> <div class="content"> <p>站点基地,网站素材,用心建好站!<br /> <br /> <a href="http://www.zdbase.com/" target="_blank">http://www.zdbase.com/</a></p> </div> </li> <li> <h2>站点基地 2</h2> <div class="content"> <p>站点基地,网站素材,用心建好站!<br /> <br /> <a href="http://www.zdbase.com/" target="_blank">http://www.zdbase.com/</a></p> </div> </li> <li> <h2>站点基地 3</h2> <div class="content"> <p>站点基地,网站素材,用心建好站!<br /> <br /> <a href="http://www.zdbase.com/" target="_blank">http://www.zdbase.com/</a></p> </div> </li> <li> <h2>站点基地 4</h2> <div class="content"> <p>站点基地,网站素材,用心建好站!<br /> <br /> <a href="http://www.zdbase.com/" target="_blank">http://www.zdbase.com/</a></p> </div> </li> <li> <h2>站点基地 5</h2> <div class="content"> <p>站点基地,网站素材,用心建好站!<br /> <br /> <a href="http://www.zdbase.com/" target="_blank">http://www.zdbase.com/</a></p> </div> </li> <li> <h2>站点基地 6</h2> <div class="content"> <p>站点基地,网站素材,用心建好站!<br /> <br /> <a href="http://www.zdbase.com/" target="_blank">http://www.zdbase.com/</a></p> </div> </li> </ul> </body> </html>
提示:您可以先修改部分代码再运行,复制代码和保存代码功能在Firefox下无效。
相关文章
Maven项目连接虚拟机里的Kafka失...
postgresql时间相差8小时
docker中配置mysql主从复制
postgresql设置用户期限及修改密...
创建索引的语法
重启postgresql数据库
linux查询占用空间大的文件夹
postgresql创建访问其他数据库的...
安装docker注意点
nodejs导出excel
idea彻底卸载的方法
postgreSQL序列nextval生...
echarts开发概要
java启动项目记录日志
postgreSQL更新表的所有者
postgreSQL还原数据库后示rel...
linux查看端口被哪个进程占用的方法
screen部署项目常用命令
Swagger2添加Authorizat...
linux系统Ubuntu安装nginx...
linux系统Ubuntu安装Nodej...
zip压缩及解压文件命令
关于我们
-
版权声明
-
联系我们
-
网站留言
-
网站地图
Copyright © 2010 zdbase.com All Rights Reserved.
苏ICP备15039389号
可人软件设计