JS实现的适合做faq或menu滑动效果示例


Posted in Javascript onNovember 17, 2016

本文实例讲述了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://3water.com/">https://3water.com/</a></p>
  </div>
  </li>
  <li>
  <h2>三水点靠木 2</h2>
  <div <p>三水点靠木--专业IT综合性网站<br /><br /><a target="_blank" href="https://3water.com/">https://3water.com/</a></p>
  </div>
  </li>
  <li>
  <h2>三水点靠木 3</h2>
  <div <p>三水点靠木--专业IT综合性网站<br /><br /><a target="_blank" href="https://3water.com/">https://3water.com/</a></p>
  </div>
  </li>
  <li>
  <h2>三水点靠木 4</h2>
  <div <p>三水点靠木--专业IT综合性网站<br /><br /><a target="_blank" href="https://3water.com/">https://3water.com/</a></p>
  </div>
  </li>
  <li>
  <h2>三水点靠木 5</h2>
  <div <p>三水点靠木--专业IT综合性网站<br /><br /><a target="_blank" href="https://3water.com/">https://3water.com/</a></p>
  </div>
  </li>
  <li>
  <h2>三水点靠木 6</h2>
  <div <p>三水点靠木--专业IT综合性网站<br /><br /><a target="_blank" href="https://3water.com/">https://3water.com/</a></p>
  </div>
  </li>
</ul>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript css在IE和Firefox中区别分析
Feb 18 Javascript
$.ajax返回的JSON无法执行success的解决方法
Sep 09 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
Sep 15 Javascript
js获取url传值的方法
Dec 18 Javascript
jQueryUI Datepicker组件设置日期高亮
Oct 13 Javascript
利用canvas实现的加载动画效果实例代码
Jul 05 Javascript
JavaScript实现三级联动效果
Jul 15 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
Aug 01 Javascript
javascript字体颜色控件的开发 JS实现字体控制
Nov 27 Javascript
Vue对象赋值视图不更新问题及解决方法
Jun 03 Javascript
微信小程序一周时间表功能实现
Oct 17 Javascript
原生js实现无缝轮播图效果
Jan 28 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
Nov 17 #Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
Nov 17 #Javascript
leaflet的开发入门教程
Nov 17 #Javascript
JavaScript中关于iframe滚动条的去除和保留
Nov 17 #Javascript
JS实现倒计时(天数、时、分、秒)
Nov 16 #Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 #Javascript
jQuery 插件封装的方法
Nov 16 #Javascript
You might like
php异常处理使用示例
2014/02/25 PHP
zf框架的校验器InArray使用示例
2014/03/13 PHP
php实现的ping端口函数实例
2014/11/12 PHP
php实现用于删除整个目录的递归函数
2015/03/16 PHP
浅谈php7的重大新特性
2015/10/23 PHP
一个JavaScript继承的实现
2006/10/24 Javascript
用jscript实现新建word文档
2007/06/15 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
JavaScript生成的动态下雨背景效果实现方法
2015/02/25 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
深入理解JavaScript编程中的原型概念
2015/06/25 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
jQuery多个版本和其他js库冲突的解决方法
2016/08/11 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
在Python中操作时间之strptime()方法的使用
2020/12/30 Python
python简单判断序列是否为空的方法
2015/06/30 Python
使用Python判断质数(素数)的简单方法讲解
2016/05/05 Python
pycharm使用matplotlib.pyplot不显示图形的解决方法
2018/10/28 Python
详解Python文件修改的两种方式
2019/08/22 Python
浅谈python 中的 type(), dtype(), astype()的区别
2020/04/09 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
python3.5的包存放的具体路径
2020/08/16 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
大女孩胸罩:Big Girls Bras
2016/12/15 全球购物
PHP面试题及答案二
2015/05/23 面试题
测量实习生自我鉴定
2013/09/19 职场文书
毕业生就业推荐信范文
2013/12/01 职场文书
土木工程师职业规划范文
2014/03/07 职场文书
春节晚会主持词
2014/03/24 职场文书
初中生期末评语大全
2014/04/24 职场文书
2014年打非治违工作总结
2014/11/13 职场文书
一年级语文下册复习计划
2015/01/17 职场文书
解析python中的jsonpath 提取器
2022/01/18 Python
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python
MySql按时,天,周,月进行数据统计
2022/08/14 MySQL