一个简单的滑动门效果

最新推荐文章于 2019-11-12 12:46:17 发布
最新推荐文章于 2019-11-12 12:46:17 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： vs.net 2003 文章标签： class border table xhtml javascript float
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tuzi_xz/article/details/1964451
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV+CSS滑动门技术AJAX</title>
<style type="text/css">
<!--
A.mecl {
 COLOR: #ffffff;TEXT-DECORATION: none
}
A.mecl:visited {
 COLOR: #ffffff; TEXT-DECORATION: none; TOP: 1px
}
A.mecl:hover {
 COLOR: #cccccc;
 POSITION: relative;
 TEXT-DECORATION: none;
 TOP: 1px;
 
}
A.ssd {
 COLOR: #000000;TEXT-DECORATION: none
}
A.ssd:visited {
 COLOR: #000000; TEXT-DECORATION: none;
}
A.ssd:hover {
 COLOR:#006600;
 POSITION: relative;
 TEXT-DECORATION: none;

}

#header {
 height: 200px;
 width: 275px;
 margin: auto;
 padding: 0px;
 font-family: "宋体";
 font-size: 12px;
 float: left;
 clear: left;
 border-top-width: 0px;
 border-right-width: 0px;
 border-bottom-width: 0px;
 border-left-width: 0px;
 border-top-style: none;
 border-right-style: none;
 border-bottom-style: none;
 border-left-style: none;
}
#menu {
 margin: 0px;
 padding: 0px;
 list-style-type: none;
}
#menu li {
 display: block;
 width: 68px;
 text-align: center;
 float: left;
 margin: 0px;
 padding-top: 0.2em;
 padding-right: 0px;
 padding-bottom: 0.2em;
 padding-left: 0px;
 cursor: hand;
}
.sec1 { color:#FFFFFF}
.sec2 { color:#00FF00}
.block {
 display: block;
 list-style-type: none;
 text-align: left;
}
.unblock {
 display: none;
 list-style-type: none;
}
.yuanjie {
 margin-left: 5px;
}

-->
</style>
</head>
<body leftmargin="0" topmargin="0" >

<table width="275" height="200" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="275" height="200"><script language=javascript>
function secBoard(n)
{
 for(i=0;i<menu.childNodes.length;i++)
 menu.childNodes[i].className="sec1";
 menu.childNodes[n].className="sec2";
 
 for(i=0;i<main.childNodes.length;i++)
 main.childNodes[i].style.display="none";
 main.childNodes[n].style.display="block";
 
}
</script>

<div id="header">

<table width="275" height="19" border="0" cellspacing="0" cellpadding="0" background="image/cajy-shxw.gif">
  <tr>
    <td> <ul id="menu">
    <li onMouseOver="secBoard(0)" class="sec1"><a href="" target="_blank" class="mecl">社会新闻</a></li>
    <li onMouseOver="secBoard(1)" class="sec1"><a href="" target="_blank" class="mecl">慈善新闻</a></li>
    <li onMouseOver="secBoard(2)" class="sec1"><a href="" target="_blank" class="mecl">慈善事迹</a></li>
    <li onMouseOver="secBoard(3)" class="sec1"><a href="" target="_blank" class="mecl">活动纪实</a></li>
  </ul></td>
  </tr>
</table>


  <!--内容显示区域-->
  <br />
  <table width="288" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="282" align="left"><ul id="main" class="yuanjie">
    <li class="block"> 
   uuuuuuuuuuuu11111111111111111111
   111111
   1111111111111111111
   11111111111111111
   11111111111111
    </li>
 <li class="unblock">
 2222222222222
 2222222222222222
 22222222222222
 22222222222222
 uuuuuuuuu
 </li>
    <li class="unblock">
 33333333333333333
 333333333333333
 333333333333333
 33333333333333333
 hhhhhhhh
    </li>
    <li class="unblock">
 44444444444444444444
 444444444444444
 4444444444444444
 4444444444444444
 444444444444fffffffffffffff
    </li>
  </ul></td>
  </tr>
</table>
  <!--内容显示区域-->
</div></td>
  </tr>
</table>
</body>
</html> 

 

运行一下,看看效果,还不错,呵呵.............

tuzi_xz
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
滑动门效果
fatansitic的博客
07-24 996
滑动门特效和手风琴效果有些相似，来实现一下这个效果吧，先介绍一下这个效果中涉及的需要了解的知识点。 1堆叠 方法：滑动门效果中，有堆叠效果布局，一说到堆叠布局，脑中马上蹦出来的两个方法，一个是z-index,另一个就是定位。 实现：z-indx通过改变数值的大小，进行堆叠布局。     定位主要用到相对定位和绝对定位，所有的子元素相对于父元素进行定位，通过js或者css控制子元素的位置。
CSS滑动门效果
u010234868的专栏
03-31 437
类似日常生活中的滑动门，根据a链接不同的文字宽度，自动撑开相应的背景宽度。 HTML代码如下： <div> <ul> <li> <a href="#"> <span>首页</span> </a> </li> <li> <a href="#"> <span>开放平台</span> </a> &l.
滑动门一系列效果
九亿宅男的梦的博客
01-04 376
滑动门切换： $(function(){ $(&amp;amp;quot;.top_txt&amp;amp;quot;).click(function(){ var index = $(this).index(&amp;amp;quot;.top_txt&amp;amp;quot;); $('.txt').hide(); $('.txt:eq('+in
利用angularjs1.4制作的简易滑动门效果
10-20
在本文中，我们将深入探讨如何使用AngularJS 1.4版本创建一个简易的滑动门效果。这个效果通常用于导航菜单或卡片切换，使得用户能够通过点击不同的选项来展示相应的内容。滑动门效果通过控制元素的显示和隐藏，营造...
JS实现滑动门效果的方法详解
11-28
JavaScript（JS）实现滑动门效果是一种常见的网页交互设计，常用于...总的来说，JS实现滑动门效果主要涉及DOM操作、事件监听以及简单的动画原理。理解这些核心概念，开发者可以创建出更丰富、更具有交互性的网页效果。
基于HTML+CSS实现网页滑动门效果
09-27
4. **滑动门实例**：你可以根据上述代码创建一个简单的滑动门效果。为了实现不同的滑动效果，可以为不同的`<div>`设置不同的背景色和宽高，如`.div2`和`.div3`。此外，还可以通过调整`left`属性值来改变内容滑出的...
JS仿淘宝实现的简单滑动门效果代码
01-21
这是一个简单的仿淘宝滑动门效果代码，个人感觉真的挺不错，以前有过一款和这个差不多。在滑动门里你可以再次布局你的网页，可以做成一个功能超强大的导航，原示例是一个拼音索引程序，改成菜单也是可以的。 运行...
JS+CSS实现简易实用的滑动门菜单效果
11-22
当鼠标悬停在某个菜单项上时，显示对应的子菜单，移除其他子菜单的显示，从而实现滑动门效果。 这个滑动门菜单的实现关键在于JavaScript的事件处理和CSS的隐藏与显示。通过JavaScript，我们可以动态地改变元素的CSS...
jquery滑动门效果
10-10
jquery滑动门效果,代码简单，容易修改
jquery 滑动门效果
04-17
一个很好的jquery 滑动门效果，可以做导航，或者图片切换，很简单，很实用！
左右可伸缩滑动门漂亮效果(js 源码)
01-25
左右可伸缩滑动门漂亮效果(js 源码) JQuery,div+css,网页特效,广告设计
几个经典的滑动门效果
03-18
几个经典的滑动门效果几个经典的滑动门效果几个经典的滑动门效果
JS实现滑动门效果
weixin_30522095的博客
11-19 264
html部分 <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/reset.css"/> <link rel="stylesheet"...
滑动门效果的实现
sinat_41660714的博客
11-12 674
滑动门 滑动门常常是用在导航栏中的一种效果，就例如聊天工具中的聊天框，会随着文字的增加而拉长，但是两侧的效果比如尖角并不会变形。 下面介绍两种实现思路 1，三盒子法 思路，将滑动门分成三块，左边放一个背景，右边放一个背景，中间的块用背景水平平铺 如下： <div class="box"> <div class="left"></div> <...
jQuery实现滑动门效果
赵弋_icon
10-28 2033
课堂练习jQ代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;滑动门效果&lt;/title&gt; &lt;style type="text/css"&gt
常用的滑动门效果，简洁明了，方便使用，前端必用!
acongshijia的专栏
03-11 1682
常用的滑动门，简洁明了方便使用 * { padding:0; margin:0;} body { font-size:12px; padding:100px;} ul { list-style-type:none;} .box ul { height:30px; line-height:30px;} .box ul li { float:left; padding:0 10px; backgro
js实现滑动门效果
遇见更好的自己
03-16 3337
滑动门效果： 原理：一共四道门，初始情况下，第一道门打开，其他三道门关闭，如第一个图所示。 假设图片的宽度是120px，其他三道门露出的宽度是80px， 初始状态下， 第二道门左边的距离是120px, 第三道门左边的距离是200px, 第四道门左边的距离是280px。 当第二道门打开时， 第二道门左边的距离是80px，为（120-40）px 第三道和第四道门左边的距离不变。
js实现多项滑动门选项卡特效
最新发布
05-29
好的，以下是一个简单的实现多项滑动门选项卡特效的示例代码： HTML结构： ``` <div class="tab-container"> <div class="tabs"> <span class="tab active">Tab 1</span> <span class="tab">Tab 2</span> <span class="tab">Tab 3</span> </div> <div class="tab-contents"> <div class="tab-content active"> <p>Tab 1 content</p> </div> <div class="tab-content"> <p>Tab 2 content</p> </div> <div class="tab-content"> <p>Tab 3 content</p> </div> </div> </div> ``` CSS样式： ``` .tab-container { width: 100%; } .tabs { display: flex; justify-content: space-between; margin-bottom: 10px; } .tab { cursor: pointer; padding: 10px; background-color: #eee; } .tab.active { background-color: #fff; border-bottom: 2px solid #000; } .tab-contents { width: 100%; } .tab-content { display: none; padding: 10px; } .tab-content.active { display: block; } ``` JavaScript代码： ``` const tabs = document.querySelectorAll('.tab'); const tabContents = document.querySelectorAll('.tab-content'); tabs.forEach((tab, index) => { tab.addEventListener('click', () => { // 切换选项卡的 active 类 tabs.forEach(tab => tab.classList.remove('active')); tab.classList.add('active'); // 切换选项卡内容的 active 类 tabContents.forEach(tabContent => tabContent.classList.remove('active')); tabContents[index].classList.add('active'); }); }); ``` 以上代码实现了一个基础的多项滑动门选项卡特效，具体效果可以根据实际需求进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值