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页面不刷新时全选择,全删除(GridView)
Apr 14 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
Jan 01 Javascript
JQuery AJAX提交中文乱码的解决方案
Jul 02 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
May 23 Javascript
jQuery基础框架浅入剖析
Dec 27 Javascript
javascript数组排序汇总
Jul 07 Javascript
基于javascript实现按圆形排列DIV元素(二)
Dec 02 Javascript
JS滚动到指定位置导航栏固定顶部
Jul 03 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
Nov 21 Javascript
详解微信小程序开发之formId使用(模板消息)
Aug 27 Javascript
JavaScript的一些小技巧分享
Jan 06 Javascript
JavaScript this关键字的深入详解
Jan 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 特殊字符处理函数
2008/09/05 PHP
PHP array_push 数组函数
2009/12/26 PHP
使用PHP破解防盗链图片的一个简单方法
2014/06/07 PHP
ThinkPHP模版引擎之变量输出详解
2014/12/05 PHP
使用URL传输SESSION信息
2015/07/14 PHP
php经典算法集锦
2015/11/14 PHP
JQuery+JS实现仿百度搜索结果中关键字变色效果
2011/08/02 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
2014/09/28 Javascript
js点击选择文本的方法
2015/02/09 Javascript
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
2016/05/25 Javascript
js获取客户端操作系统类型的方法【测试可用】
2016/05/27 Javascript
jquery radio的取值_radio的选中_radio的重置方法
2016/09/20 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
2017/12/25 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
2019/11/13 Javascript
详解JavaScript 的执行机制
2020/09/18 Javascript
详解React路由传参方法汇总记录
2020/11/29 Javascript
vue中defineProperty和Proxy的区别详解
2020/11/30 Vue.js
[04:44]DOTA2英雄梦之声_第12期_矮人直升机
2014/06/21 DOTA
[01:46]TI4西雅图DOTA2前线报道 中国选手抱团调时差
2014/07/08 DOTA
详解Python中for循环的使用
2015/04/14 Python
详解Python 解压缩文件
2019/04/09 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
Python循环实现n的全排列功能
2019/09/16 Python
浅谈selenium如何应对网页内容需要鼠标滚动加载的问题
2020/03/14 Python
Python打印特殊符号及对应编码解析
2020/05/07 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
马来西亚最大的在线隐形眼镜商店:MrLens
2019/03/27 全球购物
几个Shell Script面试题
2014/04/18 面试题
软件测试工程师笔试题带答案
2015/03/27 面试题
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?
2014/07/27 面试题
高中毕业生生活的自我评价
2013/12/08 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
2019优秀干部竞聘演讲稿范文!
2019/07/02 职场文书
用React Native制作一个简单的游戏引擎
2021/05/27 Javascript