使用js实现推拉式菜单

最新推荐文章于 2021-06-08 10:51:43 发布
最新推荐文章于 2021-06-08 10:51:43 发布
阅读量1.3k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pqx1993/article/details/8293965
版权


<style>#Cai1 {
BACKGROUND-COLOR: #336699;
BORDER-BOTTOM: white 2px outset;
BORDER-LEFT: white 2px outset;
BORDER-RIGHT: white 2px outset;
BORDER-TOP: white 2px outset; LEFT: 0px;
POSITION: absolute; TOP: 70px; VISIBILITY: hidden;
WIDTH: 200px; layer-background-color: lightblue
}
</style>
<script language="javascript">
<!--
function menuIn() {                         // 菜单隐藏
clearTimeout(out_ID)                        // 清除定时器
if( menu.pixelLeft > menuW*-1+20 ) {
 menu.pixelLeft -= 2                 // 菜单位置递减
 in_ID = setTimeout("menuIn()", 1)   // 启动定时器
}
}

function menuOut() {                        // 菜单出现
clearTimeout(in_ID)                         // 清除定时器
if( menu.pixelLeft < 0) {
 menu.pixelLeft += 2                 // 菜单位置递增
 out_ID = setTimeout("menuOut()", 1) // 启动定时器
}
}


function cOver() {
clearTimeout(F_out)
F_over = setTimeout("menuOut()", 10)
}


function cOut() {
clearTimeout(F_over)
F_out = setTimeout("menuIn()", 10)
}


function init() {
menu = Cai1.style
menuW = Cai1.offsetWidth
Cai1.style.pixelLeft = menuW*-1+20             // 设置菜单初始位置
Cai1.onmouseover = cOver                       // 鼠标划过时调用cOver函数
Cai1.onmouseout = cOut                         // 鼠标离开时调用cOut函数
Cai1.style.visibility = "visible"              // 显示图层
}
F_over=F_out=in_ID=out_ID=null
//-->
</script>
</head>
<body οnlοad="init()">
<div id="Cai1">
<table border="0">
<tr>
 <td width=40>&nbsp;</td><td align="center"><font style="COLOR: #ffffff">菜单</font></td>
</tr>
<tr>
 <td width=40>&nbsp;</td><td><a href="http://www.sina.com.cn"><font color="#cccccc" size=2>新浪网</font></a></td>
</tr>
</tr>
 <td width=40>&nbsp;</td><td><a href="http://www.sohu.com"><font color="#cccccc" size=2>搜狐</font></a></td>
</tr>
<tr>
 <td width=40>&nbsp;</td><td><a href="http://www.163.com"><font color="#cccccc" size=2>网易</font></a></td>
</tr>
</table>
</div>

pqx1993
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript推拉门式菜单
05-07
使用javascript实现的推拉菜单 源码等实现方法在文档中已详细说明
js实现简洁的滑动门菜单(选项卡)效果代码
11-23
总的来说，这个实例展示了如何利用JavaScript和DOM操作实现交互式滑动门菜单（选项卡）效果。通过理解这个示例，开发者可以为自己的项目创建类似的交互组件，提高网页的用户体验。此外，这个实例还涉及到了CSS样式、...
推拉式菜单
shuangyvshenshi的专栏
09-22 475
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 无标题文档 #D1 { BACKGROUND-COLOR: lightblue; BORDER-BOTTOM: white 2px outset; BORDER-
推 拉 式 菜 单
谭洪星
02-17 915
这段程序放在与之间#D1 { BACKGROUND-COLOR: lightblue; BORDER-BOTTOM: white 2px outset;  BORDER-LEFT: white 2px outset;  BORDER-RIGHT: white 2px outset; BORDER-TOP: white 2px outset; LEFT: 0px; POSITION: absol
页面中推拉菜单的简易实现
jackie9305的博客
01-07 477
直接将下面这段代码复制到html中就可以看到效果啦！ &lt;html&gt;&lt;head&gt;&lt;style type="text/css"&gt;&lt;!--.link {color : #000000;text-decoration : none;}A.link:hover {color : red;}A.link:active {color : #000000;text-dec...
javascript 推拉式菜单
dnwln86202的专栏
01-18 112
这段程序放在<head>与</head>之间 <style>#D1 {BACKGROUND-COLOR: lightblue;BORDER-BOTTOM: white 2px outset; BORDER-LEFT: white 2px outset; BORDER-RIGHT: white 2px outset;BORDER-TOP: ...
推拉门式菜单-兼容ie，ff
05-08
总之，一个兼容IE和FF的推拉门式菜单需要考虑多方面的因素，包括HTML结构的合理性、CSS的跨浏览器编写和JavaScript的事件处理与动画实现。通过对这些方面进行精细调整和优化，我们可以创建出既美观又具有良好兼容性...
jQuery推拉式3D隐藏侧边栏菜单特效
12-11
【jQuery推拉式3D隐藏侧边栏菜单特效】是一种基于jQuery库的前端交互设计，旨在为网站提供一种独特而吸引人的导航体验。这个特效利用了现代浏览器的CSS3特性，实现了从页面左侧或顶部滑出的3D透视效果，为用户提供了...
jQuery和CSS3全屏推拉式滑动菜单特效
12-12
本篇将深入探讨如何利用jQuery和CSS3实现全屏推拉式滑动菜单特效，以及相关技术的核心知识点。 **jQuery库** jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互。jQuery的...
左右推拉 javascript
南极光经验分享
04-11 106
  1. jsp 页面中： &lt;tr&gt;          &lt;td colspan="2" class="td_tr1"&gt;                      &lt;select name="receivers" multiple="multiple"  size="10" id="receivers" style=&qu
Android 3D滑动菜单完全解析，实现推拉门式的立体特效Demo
09-29
此为示例代码，详解讲解请参考博文： http://blog.csdn.net/guolin_blog/article/details/10471245 如果对资源内容有疑问，可以到博客中留言。
JS实现移动端可折叠导航菜单（现代都市风）
10-15
主要介绍了JS如何实现移动端可折叠导航菜单，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下
翻转式用户登录注册界面设计
12-13
这是一款非常实用的翻转式用户登录注册界面设计效果。该用户登录注册界面使用纯CSS3来制作，在用户点击登录和注册两个按钮时，登录和注册界面可以以水平翻转的方式来回切换，效果非常的酷。
Jquery实现推拉式菜单，并实现图标的折叠和展开
08-08 2030
最近项目中为了使查看时视图更清晰明了，需要实现一个分组展示的功能，这里用Jquery做了一个，记录下来，以便下次使用，效果如图所示：   CSS代码： .sapdiv{ width:16px; height:17px; backgrou
html滑动全屏,jQuery和CSS3全屏推拉式滑动菜单特效
weixin_39875516的博客
06-08 327
这是一款效果非常炫酷的jQuery和CSS3全屏推拉式滑动菜单特效插件。这个插件的效果是当点击了主菜单按钮时，全屏菜单从屏幕左侧滑出，主菜单按钮动态旋转更换图标。当再次点击主菜单按钮时，全屏菜单又从右向左滑会去。下面是一张描述这个过程的动态gif图片：HTML结构该全屏滑动菜单的HTML结构分为三个部分：包含可见内容的元素，一个用于包含全屏导航菜单的div.cd-nav和一个用于触发事件的按钮.c...
原生JS实现 --推拉门效果图片
weixin_46409887的博客
04-15 369
效果图片如下: css代码: <style> *{ margin:0; padding:0; } #box{ width: 838px; position: relative; margin: 0 auto; } .img{ positio...
js如何让高度和宽度保持一致_推拉门轨道如何安装？需要注意什么？装修网教你清洁妙招...
weixin_33428129的博客
12-18 122
推拉门轨道是推拉门安装工程中比较重要的一部分，轨道若是没有安装好，推拉门就无法正常使用，你知道推拉门轨道如何安装吗?推拉门轨道安装需要注意什么呢?轨道是推拉门中比较容易积灰的地方，今天装修网就来教大家如何正确清洁推拉门轨道。推拉门轨道安装步骤1、推拉门轨道安装步骤，要确保推拉门上面的轨道盒尺寸在12cm，宽的话是9cm。跟窗帘差不多，在轨道盒内安装轨道，这样的话推拉门就可以悬挂在轨道上。如果高度低...
推拉门式样的菜单[根据提示修改][共2步]
weixin_30776863的博客
06-01 69
　 推拉门式样的菜单[根据提示修改][共2步]====1、将以下代码加入到HEML的<head></head>之间：<style type="text/css"><!--.link {color : #000000;text-decoration : none;}A.link:hover {color : red;}A....
jQuery--推拉窗自定义插件
xxb2008的专栏
07-02 1314
HTML
用 js 实现推拉式滚动效果
最新发布
05-22
实现推拉式滚动效果可以通过以下步骤： 1. 在 HTML 中创建一个包含内容的容器，设置其高度和宽度，并将 `overflow` 属性设置为 `hidden`，以隐藏超出容器大小的内容。 ```html <div class="container"> <p>第一页的内容</p> <p>第二页的内容</p> <p>第三页的内容</p> </div> ``` 2. 使用 JavaScript 获取容器和内容的高度，并计算每个页面的高度。 ```javascript const container = document.querySelector('.container'); const content = container.querySelector('p'); const contentHeight = content.offsetHeight; const containerHeight = container.offsetHeight; const pageCount = Math.ceil(contentHeight / containerHeight); const pageHeight = contentHeight / pageCount; ``` 3. 创建一个变量 `currentPage` 来跟踪当前页面的索引，初始值为 0。在容器中创建一个滑动条，用于控制页面的滚动。 ```javascript let currentPage = 0; const slider = document.createElement('div'); slider.className = 'slider'; container.appendChild(slider); ``` 4. 为滑动条添加事件监听器，在滑动条被拖动时更新页面的位置。 ```javascript slider.addEventListener('mousedown', startDragging); function startDragging(e) { const startY = e.clientY; const startScrollTop = container.scrollTop; document.addEventListener('mousemove', drag); document.addEventListener('mouseup', stopDragging); function drag(e) { const deltaY = e.clientY - startY; container.scrollTop = startScrollTop + deltaY; } function stopDragging() { document.removeEventListener('mousemove', drag); document.removeEventListener('mouseup', stopDragging); } } ``` 5. 在滑动容器时，根据当前滚动位置计算出当前页数，并将滑动条的位置设置为当前页数的百分比。 ```javascript container.addEventListener('scroll', () => { const scrollTop = container.scrollTop; const currentPage = Math.floor(scrollTop / pageHeight); const sliderPosition = (currentPage + 0.5) / pageCount * 100; slider.style.top = `${sliderPosition}%`; }); ``` 6. 当滑动条被拖动时，根据滑动条的位置计算出当前页数，并将容器滚动到当前页的位置。 ```javascript function drag(e) { const sliderY = e.clientY - container.getBoundingClientRect().top; const sliderPosition = Math.max(0, Math.min(sliderY / containerHeight, 1)); const currentPage = Math.floor(sliderPosition * pageCount); const scrollTop = currentPage * pageHeight; container.scrollTop = scrollTop; } ``` 完整代码如下： ```html <style> .container { height: 200px; width: 300px; overflow: hidden; position: relative; } .slider { position: absolute; top: 50%; left: calc(100% - 10px); transform: translate(-50%, -50%); width: 10px; height: 50px; background-color: gray; border-radius: 5px; cursor: pointer; transition: top 0.2s ease-in-out; } </style> <div class="container"> <p>第一页的内容</p> <p>第二页的内容</p> <p>第三页的内容</p> <div class="slider"></div> </div> <script> const container = document.querySelector('.container'); const content = container.querySelector('p'); const contentHeight = content.offsetHeight; const containerHeight = container.offsetHeight; const pageCount = Math.ceil(contentHeight / containerHeight); const pageHeight = contentHeight / pageCount; let currentPage = 0; const slider = document.createElement('div'); slider.className = 'slider'; container.appendChild(slider); slider.addEventListener('mousedown', startDragging); function startDragging(e) { const startY = e.clientY; const startScrollTop = container.scrollTop; document.addEventListener('mousemove', drag); document.addEventListener('mouseup', stopDragging); function drag(e) { const deltaY = e.clientY - startY; container.scrollTop = startScrollTop + deltaY; } function stopDragging() { document.removeEventListener('mousemove', drag); document.removeEventListener('mouseup', stopDragging); } } container.addEventListener('scroll', () => { const scrollTop = container.scrollTop; const currentPage = Math.floor(scrollTop / pageHeight); const sliderPosition = (currentPage + 0.5) / pageCount * 100; slider.style.top = `${sliderPosition}%`; }); function drag(e) { const sliderY = e.clientY - container.getBoundingClientRect().top; const sliderPosition = Math.max(0, Math.min(sliderY / containerHeight, 1)); const currentPage = Math.floor(sliderPosition * pageCount); const scrollTop = currentPage * pageHeight; container.scrollTop = scrollTop; } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值