<html>
<head>
<title>滑动门效果</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
*{font:12px "宋体";margin:0;padding:0;}
ul{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
.TabADS{width:160px;}
.TabADS ul{width:160px;height:24px;background:#fff;}
.TabADS li{width:40px;float:left;height:18px;padding:6px 0 0 0;background:url(http://dl.iteye.com/upload/picture/pic/63606/79be4821-1960-32d0-8f2f-72a0e9d4abb1.gif) no-repeat right #e4e4e4;text-align:center;color:#333;cursor:pointer;}
.TabADS .TasADSOn{background:url(http://ueaner.iteye.com/upload/picture/pic/63604/1177d8b9-cbf8-3fd2-9eda-0a9cf77958f7.gif) no-repeat right #ffe4a6;text-align:center;color:#333;font-weight:bold;cursor:pointer;}
.TabADSCon{background:#FFD77B;padding:5px;width:150px;}
.TabADSCon li{text-align:left;line-height:20px;}
</style>
<script language="javascript" type="text/javascript">
function Show_TabADSMenu(tabadid_num,tabadnum){
for(var i=0;i<4;i++){document.getElementById("tabadcontent_"+tabadid_num+i).style.display="none";}
for(var i=0;i<4;i++){document.getElementById("tabadmenu_"+tabadid_num+i).className="";}
document.getElementById("tabadmenu_"+tabadid_num+tabadnum).className="TasADSOn";
document.getElementById("tabadcontent_"+tabadid_num+tabadnum).style.display="block";
}
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div class="TabADS">
<ul>
<li id="tabadmenu_10" onmouseover="setTimeout('Show_TabADSMenu(1,0)',200);" class="TasADSOn">VB</li>
<li id="tabadmenu_11" onmouseover="setTimeout('Show_TabADSMenu(1,1)',200);">ASP</li>
<li id="tabadmenu_12" onmouseover="setTimeout('Show_TabADSMenu(1,2)',200);">PHP</li>
<li id="tabadmenu_13" onmouseover="setTimeout('Show_TabADSMenu(1,3)',200);">cgi</li>
</ul>
</div>
<div class="TabADSCon">
<ul id="tabadcontent_10">
<li><a href="#" target="_blank">基于VC的推箱子游戏</a></li>
</ul>
<ul id="tabadcontent_11" style="display:none;">
<li><a href="#" target="_blank">VB批量重命名程序</a></li>
</ul>
<ul id="tabadcontent_12" style="display:none;">
<li><a href="#" target="_blank">VC++五子棋游戏进阶版源码</a></li>
</ul>
<ul id="tabadcontent_13" style="display:none;">
<li><a href="#" target="_blank">精美多模式DELPHI闹钟程序</a></li>
</ul>
</div>
</body>
</html>
分享到：
相关推荐
js滑动门代码制作js滑动门导航鼠标滑过滑动门效果 js滑动门代码制作js滑动门导航鼠标滑过滑动门效果 js滑动门代码制作js滑动门导航鼠标滑过滑动门效果 js滑动门代码制作js滑动门导航鼠标滑过滑动门效果
最后，JavaScript的加入可以为滑动门效果提供更高级的功能，比如触摸设备的支持或者自定义动画行为。虽然在本案例中没有具体提及JavaScript，但我们可以利用它来监听用户的点击事件，或者根据需要调整动画的性能。 ...
**jQuery滑动门效果**是一种常见的前端交互设计，主要用于创建导航菜单或图片轮播效果。在网页设计中，滑动门效果能为用户提供流畅、直观的界面体验，增强网站的吸引力和可操作性。这个效果通常由jQuery库来实现，...
滑动门效果的基本原理是利用CSS（层叠样式表）或JavaScript来改变元素的尺寸、位置和透明度，模拟出门的开启和关闭。在视觉上，这通常表现为一个矩形区域的一侧或两侧逐渐滑动露出或隐藏内部的内容。这种效果可以...
在Web开发中，滑动门效果通常通过JavaScript、jQuery或者其他JavaScript库来实现，有时候也会结合CSS（层叠样式表）来完成样式控制。 首先，我们要理解滑动门效果的基本原理。它通常涉及到两个或多个元素，这些元素...
JavaScript是实现滑动门效果的核心部分，主要功能包括监听用户的点击事件并相应地展示或隐藏子菜单。 ```javascript function $_class(name) { var elements = document.getElementsByTagName("*"); for (var s =...
虽然仅用CSS可以实现基本的滑动门效果，但JavaScript可以提供更复杂的功能，比如动画效果的控制、触摸设备的支持等。使用JavaScript库如jQuery，可以更方便地实现这些功能。例如，以下jQuery代码可以实现平滑的滑动...
为了实现滑动门效果，我们需要设置元素的相对定位，并利用伪类`:hover`来定义鼠标悬停时的状态。例如，可以将顶部隐藏，底部显示，然后在`:hover`状态下改变这两个状态： ```css .sliding-door { position: ...
滑动门效果是一种常见的网页交互设计，主要利用JavaScript或者CSS3来实现页面元素的动态展示，通常用于导航菜单、广告轮播等场景。本案例中，我们探讨的是使用JavaScript实现的简单滑动门效果，其特点是操作简便且...
- `onmouseover` 和 `onmouseout`：这两个事件分别在鼠标进入和离开元素时触发，是实现滑动门效果的关键。通过JavaScript函数，我们可以更改元素的CSS属性，如`background-position`，来模拟滑动效果。 - `CSS类...
4. 框架和库：现代前端框架，如React、Vue.js或Angular，提供了丰富的组件库，其中包括预设的滑动门效果。开发者可以通过引入这些组件，快速便捷地在项目中实现伸缩滑动门效果，减少重复工作。 5. 动画库：例如GSAP...
HTML调用JS实现多项滑动门选项卡特效是一种常见的前端技术，用于创建交互式和动态的网页内容。这种效果常用于导航菜单、内容切换、图片展示等场景，为用户提供更直观的操作体验。以下是对这个技术的详细解释： 一、...
通过这样的方法，我们可以创建出具有专业滑动门效果的原生JavaScript鼠标悬停图标菜单。这种技术不仅适用于网站导航，也可以应用于其他需要动态展示内容的场景，如下拉选项、工具提示等。在实际开发中，还可以结合...
这些元素的布局和样式会根据滑动门效果的需求进行设置，例如，它们可能需要设置为绝对定位，以便在页面上正确地重叠和滑动。 接下来是CSS的部分。CSS用来定义元素的样式，包括位置、尺寸、颜色等。在滑动门效果中，...
"css+js滑动门小实用小实例"是一个集合，包含三个利用CSS和JavaScript技术构建的实用小示例，旨在展示如何创建美观且功能性的滑动门效果。滑动门效果通常用于导航菜单或者图像展示，它允许用户通过鼠标悬停或点击来...
接着，编写JavaScript代码来实现自动滑动门效果。这里通常会涉及到定时器（setInterval）来定期改变显示的图片，CSS样式操作来实现平滑过渡，以及可能的触发动画函数（animate）。 ```javascript $(document).ready...
JavaScript（Js）滑动门效果是一种常见的网页交互设计，它通常用于导航菜单或者索引列表，使得用户可以方便地浏览和选择内容。在本案例中，我们关注的是一个仿淘宝购物索引的效果，这种效果常见于电商网站的商品分类...
滑动门效果通常通过CSS（层叠样式表）和JavaScript（JS）实现。在CSS中，我们可以定义两个图像切片，一个用于元素的左侧部分，另一个用于右侧部分。当元素被鼠标悬停或触发其他交互时，这两个切片会根据需要进行平移...
通过以上知识点的应用，我们可以创建一个功能完善的JavaScript滑动门效果。在实际项目中，可能还需要结合其他前端框架或库，如jQuery、Vue.js或React.js等，以简化代码和提高开发效率。同时，对于复杂的滑动门需求，...