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 相关文章推荐
一个js写的日历(代码部分网摘)
Sep 20 Javascript
jQuery入门第一课 jQuery选择符
Mar 14 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
Sep 12 Javascript
JS图片自动轮换效果实现思路附截图
Apr 30 Javascript
JavaScript的作用域和块级作用域概念理解
Sep 21 Javascript
JavaScript中的各种操作符使用总结
May 26 Javascript
如何使用Bootstrap 按钮实例详解
Mar 29 Javascript
Vue.js更改调试地址端口号的实例
Sep 19 Javascript
Vuejs+vue-router打包+Nginx配置的实例
Sep 20 Javascript
详解JS实现系统登录页的登录和验证
Apr 29 Javascript
Vue全局loading及错误提示的思路与实现
Aug 09 Javascript
vue 返回上一页,页面样式错乱的解决
Nov 14 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制作图型计数器的例子
2006/10/09 PHP
使用adodb lite解决问题
2006/12/31 PHP
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
yiic命令时提示“php.exe”不是内部或外部命令的解决方法
2014/12/18 PHP
Laravel下生成验证码的类
2017/11/15 PHP
提高Laravel应用性能方法详解
2019/06/24 PHP
JavaScript的document对象和window对象详解
2010/12/30 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
2011/11/30 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
2012/08/10 Javascript
JQueryEasyUI Layout布局框架的使用
2013/04/08 Javascript
javascript实现的图片切割多块效果实例
2015/05/07 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
2016/08/06 Javascript
JS实现的几个常用算法
2016/11/12 Javascript
JS正则表达式修饰符global(/g)用法分析
2016/12/27 Javascript
关于js中的鼠标事件总结
2017/07/11 Javascript
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
JS+WCF实现进度条实时监测数据加载量的方法详解
2017/12/19 Javascript
vue中的计算属性实例详解
2018/09/19 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
解决vue init webpack 下载依赖卡住不动的问题
2020/11/09 Javascript
零基础写python爬虫之HTTP异常处理
2014/11/05 Python
python实现端口转发器的方法
2015/03/13 Python
Python中for循环和while循环的基本使用方法
2015/08/21 Python
常见的python正则用法实例讲解
2016/06/21 Python
python制作抖音代码舞
2019/04/07 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
python 五子棋如何获得鼠标点击坐标
2019/11/04 Python
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
Gap工厂店:Gap Factory
2017/11/02 全球购物
幼教毕业生自我鉴定
2014/01/12 职场文书
上级检查欢迎词
2014/01/18 职场文书
群众路线教育实践活动的心得体会
2014/09/03 职场文书
自查自纠整改报告
2014/11/06 职场文书
入党个人总结范文
2015/03/02 职场文书
导游词之新疆尼雅遗址
2019/10/16 职场文书
Java数据结构之堆(优先队列)
2022/05/20 Java/Android