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 相关文章推荐
checkbox选中与未选中判断示例
Aug 04 Javascript
JavaScript将字符串转换为整数的方法
Apr 14 Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 Javascript
js基础之DOM中document对象的常用属性方法详解
Oct 28 Javascript
ES6中Array.find()和findIndex()函数的用法详解
Sep 16 Javascript
在React 组件中使用Echarts的示例代码
Nov 08 Javascript
vuex操作state对象的实例代码
Apr 25 Javascript
React 使用recharts实现散点地图的示例代码
Dec 07 Javascript
Vue学习笔记之计算属性与侦听器用法
Dec 07 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
Jul 27 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
Sep 08 Javascript
原生JavaScript实现进度条
Feb 19 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
封装一个PDO数据库操作类代码
2009/09/09 PHP
php下将多个数组合并成一个数组的方法与实例代码
2011/02/03 PHP
PHP爆绝对路径方法收集整理
2012/09/17 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
PHP静态延迟绑定和普通静态效率的对比
2017/10/20 PHP
Laravel框架自定义公共函数的引入操作示例
2019/04/16 PHP
JavaScript中的apply()方法和call()方法使用介绍
2012/07/25 Javascript
JS在IE下缺少标识符的错误
2014/07/23 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
2014/08/19 Javascript
使用jquery操作session方法分享
2015/01/22 Javascript
jQuery插件uploadify实现ajax效果的图片上传
2016/06/18 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
2016/11/20 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
2017/04/01 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
2017/04/04 Javascript
angular $watch 一个变量的变化(实例讲解)
2017/08/02 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
python如何读写json数据
2018/03/21 Python
详解Python数据分析--Pandas知识点
2019/03/23 Python
Python一行代码实现快速排序的方法
2019/04/30 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
pycharm远程连接服务器并配置python interpreter的方法
2020/12/23 Python
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
2014/04/14 HTML / CSS
爱尔兰家电数码商城:Currys PC World爱尔兰
2016/07/23 全球购物
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
美国高档帽子网上商店:Hats.com
2018/08/09 全球购物
什么是静态路由?什么是动态路由?各自的特点是什么?
2015/09/16 面试题
小学作文评语大全
2014/04/21 职场文书
三万活动总结
2014/04/28 职场文书
双拥工作宣传标语
2014/06/26 职场文书
写给妈妈的感谢信
2015/01/22 职场文书
就业意向书范本
2015/05/11 职场文书
立春观后感
2015/06/18 职场文书
小学生安全教育主题班会
2015/08/12 职场文书
《秋思》教学反思
2016/02/23 职场文书
Android开发EditText禁止输入监听及InputFilter字符过滤
2022/06/10 Java/Android