转载http://bbs.blueidea.com/thread-2993636-1-1.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>SlideView 滑动展示效果</title>
</head>
<body>
<style type="text/css">
.sv3 dl, .sv3 dt, .sv3 dd{ padding:0; margin:0; }
.sv3 {
width:240px;
border:1px solid #BFC7D9;
}
.sv3 dl {
width:240px;
height:380px;
background:#EDF5FF;
overflow:hidden;
}
.sv3 dt {
padding:5px 10px;
height:13px;
font-size:13px;
color:#000;
background:#E5ECF9;
border-top:1px solid #fff;
border-bottom:1px solid #BFC7D9;
}
.sv3 dl.on dt {
background:#3366CC;
color:#FFF;
font-weight:bold;
}
.sv3 dd {
padding:10px;
color:#333;
font-size:12px;
line-height:1.5em;
}
.sv3 dd a:link,
.sv3 dd a:visited,
.sv3 dd a:hover,
.sv3 dd a:active { color:#333; display:block; text-align:right;}
</style>
<div id="idSlideView3" class="sv3">
<dl>
<dt> 栏目一 </dt>
<dd> 内容一 </dd>
</dl>
<dl>
<dt> 栏目二 </dt>
<dd> 内容二 </dd>
</dl>
<dl>
<dt> 栏目三 </dt>
<dd> 内容三 </dd>
</dl>
<dl>
<dt> 栏目四 </dt>
<dd> 内容四</dd>
</dl>
<dl>
<dt> 栏目五 </dt>
<dd> 内容五 </dd>
</dl>
</div>
<script>
function SlideView(e,a){
for(var i=0,o=document.getElementById(e).getElementsByTagName('DL'),d;d=o[i++];)(function(e,c,m,s,t,k,h){
(s=e.style).height=(h=23)+"px";
e.onmouseover=function (){ t=setTimeout(e.open,200); }
e.onmouseout=function (){ clearTimeout(t);}
e.open=function(){
if (a==e)return;
c(k); a&&a.close();
(a=e).className="on";
k=m(function(){ if(h>379)c(k); else s.height=(h=Math.min(h+30, 380))+"px"; }, 10);
}
e.close = function(){
c(k); e.className="";
k=m(function(){ if(h<24)c(k); else s.height = (h=Math.max(h-30, 23))+"px"; }, 10);
}
})(d,clearInterval,setInterval);
o[0].open();
}
new SlideView( "idSlideView3");
</script>
</body>
</html>
分享到：
相关推荐
总之，这个“右对齐向左伸出的Js滑动菜单”是一个利用JavaScript和CSS实现的动态导航菜单，通过鼠标悬停触发动画效果，为用户带来独特的交互体验。开发者可以学习和借鉴其实现原理，以便在自己的网页设计中加入此类...
幻影菜单，js滑动菜单，支持两级子菜单项，鼠标快速划过菜单主项，会看到二级菜单滑出效果。横排和竖排的菜单，菜单从这里开始, 注意要把class设置成和css里相同的, 还要为它设一个id，在上面这个table结束的地方...
原生JS效果平滑的滑动菜单，红色背景滑动的导航菜单，当鼠标移上菜单的时候，对应菜单项的背景会滑过来，而且带有动画缓冲的效果，本代码基于JavaScript，无使用jquery等插件，效果确实够流畅，而且兼容性超棒。
在JavaScript（JS）开发中，创建一个多级滑动菜单是一项常见的任务，特别是在构建交互式网站时。这样的菜单能够提供良好的用户体验，使用户能够方便地浏览和访问网站的深层内容。以下是一些关于如何使用JS开发多级...
2. **JavaScript实现**：描述中提到的“适用于手机端js显示滑动菜单”，表明滑动菜单的显示与JavaScript有关。JavaScript可以监听用户的触摸事件，如滑动、点击等，动态地显示或隐藏菜单。例如，可以使用`...
"CSS动态滑动菜单"是一个常见的交互式设计元素，利用JavaScript（JS）和层叠样式表（CSS）技术来实现。这个压缩包"CSS动态滑动菜单.rar"很可能包含了实现这种效果所需的所有文件，如HTML、CSS和JavaScript文件。 ...
"基于Vue的可滑动菜单栏"是一个专为移动端设计的组件，利用Vue.js框架的强大功能，实现了一个高效、流畅且易于定制的滑动菜单栏。Vue.js是一个轻量级的前端JavaScript框架，以其组件化、易学习和高可维护性受到...
JavaScript滑动菜单特效 JavaScript滑动菜单特效 JavaScript滑动菜单特效 JavaScript滑动菜单特效 JavaScript滑动菜单特效
总之，SuperSlide.js 是一款强大的JavaScript滑动菜单库，尤其适用于PWA开发。它通过GPU加速技术，实现了高性能的滑动效果，同时提供了丰富的自定义选项，使开发者能够构建出既美观又高效的导航系统。
以下是一个简单的JavaScript滑动菜单实现示例： ```javascript document.getElementById('parentMenuItem').addEventListener('click', function() { var submenu = document.getElementById('submenu'); if ...
在本项目"手机移动端左侧滑动菜单.zip"中，开发人员利用了jQuery和Slideout.js这两个JavaScript库来实现这一功能。 首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax交互等任务...
在JavaScript的世界里，创建动态和交互式的用户界面是常见的需求，而“js菜单 鼠标经过折叠/滑动菜单”就是这样的一个功能。这种菜单设计可以极大地提升网站的用户体验，因为它允许用户通过简单地将鼠标悬停在菜单项...
在本文中，我们将深入探讨如何在QT框架下，利用QML技术实现一个功能完善的侧边滑动菜单。QML（Qt Meta Language）是QT库的一部分，它提供了一种声明式编程方式，使得UI设计和交互逻辑变得更加直观和高效。通过QML，...
这种滑动菜单的实现涉及HTML布局、CSS样式控制以及JavaScript的交互逻辑，对于前端开发者来说，这是一个学习和参考的优秀实例。在实际应用中，这样的设计可以提高用户体验，使网站更具吸引力和功能性。
在QmlSlidingMenu项目中，开发者可能使用了JavaScript表达式和方法来处理用户的滑动事件，监听手指的触摸动作，判断是否触发滑动菜单的显示或隐藏。同时，通过QML的动画系统，可能实现了平滑的滑入滑出效果，增强...
在网页设计中，jQuery滑动菜单是一种常见的交互元素，它能提供用户友好的导航体验，尤其是在内容丰富的网站中。jQuery库以其简洁的API和强大的功能，使得创建动态、响应式的滑动菜单变得轻而易举。本文将深入探讨...
指甲滑动菜单 js效果 指甲滑动菜单 js效果 指甲滑动菜单 js效果 指甲滑动菜单 js效果
"jQuery移动端导航栏滑动菜单"就是一个专为触摸设备设计的交互组件，它利用了jQuery库的强大功能，实现了在小屏幕设备上优雅的菜单切换效果。 jQuery是一个轻量级的JavaScript库，以其简洁的API和高效的性能深受...
在这个滑动菜单案例中，JavaScript与jQuery一起工作，处理用户交互，比如检测滑动手势，更新DOM（文档对象模型）以显示或隐藏菜单，以及可能的异步数据加载。 综上所述，这个压缩包提供的滑动菜单方案是一个结合了...
在实现左右两侧滑动菜单的过程中，主要涉及到以下几个关键步骤： 1. **布局设计**：菜单通常被设置为相对于屏幕或者容器元素的绝对定位，初始状态时隐藏或者占据很小的空间。例如，可以将菜单的宽度设置为屏幕宽度...