微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

javascript实现动态侧边栏代码_javascript技巧

php中文网
发布： 2016-05-16 16:59:19
原创
1971人浏览过

总的来说就是利用 鼠标悬停onmouseover   和  鼠标移除onmouseout 这两个时间来完成的。

首先是HTML 结构

复制代码 代码如下:



侧边栏


然后是css的样式：

复制代码 代码如下:

#div1{
    width:150px;
    height:200px;
    background:#999999;
    position:absolute;
    left:-150px;}
span{
    width:20px;
    height:70px;
    line-height:23px;
    background:#09C;
    position:absolute;
    right:-20px;
    top:70px;}

默认的样式 侧边栏是隐藏起来的如图：

javascript实现动态侧边栏代码_javascript技巧

OpenBMB
OpenBMB

OpenBMB 让大模型飞入千家万户

OpenBMB 198
查看详情 OpenBMB

当鼠标移入以后如图：

javascript实现动态侧边栏代码_javascript技巧

下面是完整代码：

复制代码 代码如下:





无标题文档

<script><BR>window.onload=function(){<BR> var odiv=document.getElementById('div1');<BR> odiv.onmouseover=function ()<BR> {<br><br> startmove(0,10);//第一个参数为div left属性的目标值 第二个为 每次移动多少像素<br><br> }<BR> odiv.onmouseout=function ()<BR> {<BR> startmove(-150,-10);<BR> }<BR> }<br><br> var timer=null;<BR>function startmove(target,speed)<BR>{<br><br> var odiv=document.getElementById('div1');<BR>clearInterval(timer);<BR> timer=setInterval(function (){<br><br> if(odiv.offsetLeft==target)<BR> {<BR> clearInterval(timer);<BR> }<BR> else<BR> { <BR> odiv.style.left=odiv.offsetLeft+speed+'px';<BR> }<br><br> },30)<br><br> }<br><br></script>



侧边栏



相关标签：
javascript

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：javascript动态向网页中添加表格实现代码_javascript技巧 下一篇：javascript异步编程的4种方法_基础知识
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
JavaScript解构赋值技巧_javascript变量声明 解构赋值可简洁提取对象或数组数据，提升代码可读性。①对象解构按属性名提取，支持重命名与默认值；②数组解构按位置提取，可跳过元素或用扩展符捕获剩余项；③函数参数中直接解构传参；④嵌套结构需保持层级一致，建议结合默认值防错。合理使用能精简逻辑，尤其适用于处理复杂数据结构。
2025-12-03 20:15:07
229
JavaScript事件委托机制_javascript事件处理 事件委托利用事件冒泡机制，在父元素绑定监听器来处理子元素事件。通过在父级监听事件并检查event.target，可识别实际触发元素并执行对应操作，避免为每个子元素重复绑定。例如为ul绑定点击事件，判断e.target是否为li来统一处理列表项点击，即使后续动态添加的li也能生效。该技术减少内存占用、提升性能，适用于列表、菜单等大量或动态子元素场景。需注意并非所有事件都冒泡（可用focusin/focusout替代），应精准判断目标元素，并在必要时调用e.stopPropagation()阻止冒泡
2025-12-03 20:14:56
326
JavaScript测试驱动开发_javascript质量保证 测试驱动开发（TDD）是一种先写测试用例再实现功能的开发方法，核心流程为“红-绿-重构”：首先编写一个失败的测试（红），然后编写最简代码使其通过（绿），最后优化代码结构并保持测试通过（重构）。在JavaScript项目中，TDD通过Jest、Mocha+Chai、Vitest或Cypress等工具实现，广泛应用于函数、组件和模块的单元测试与集成测试。例如，在实现折扣计算或表单验证功能前，先编写测试验证输入输出行为，确保代码正确性。结合持续集成（CI）、代码审查和高可读性测试描述，TDD提升代码可
2025-12-03 20:11:32
1066
掌握JavaScript模块化_javascript工程实践 JavaScript模块化通过拆分代码为独立单元提升可维护性与复用性，解决全局污染与依赖混乱问题；采用ES6模块语法实现作用域隔离、明确依赖，并支持懒加载；结合Webpack、Vite等工具处理不同环境下的模块解析与优化，需避免循环依赖并合理组织功能驱动的项目结构，持续演进以构建清晰可控的代码体系。
2025-12-03 20:10:03
865
JavaScript面向对象编程_javascript核心技术 JavaScript面向对象编程基于构造函数和原型，ES6引入class语法糖使写法更直观。1.构造函数用于初始化实例，prototype存储共享方法；2.class中的constructor初始化属性，其他方法挂载到原型；3.使用extends实现继承，super调用父类构造函数；4.static定义静态方法，#前缀声明私有字段；5.实例访问自身属性及原型链上的方法，私有字段仅类内可访问。
2025-12-03 20:10:02
746
JavaScriptSessionStorage_JavaScript客户端存储 SessionStorage是JavaScript提供的临时存储机制，用于在单个浏览器标签页会话期间保存数据，关闭标签页后自动清除。它遵循同源策略，存储容量为5-10MB，仅以字符串形式保存键值对，需用JSON转换复杂数据类型。主要操作包括setItem、getItem、removeItem和clear，适用于表单缓存、会话内偏好设置及页面间临时传值，但不支持跨标签页共享，隐私模式下可能受限，且不应存储敏感信息以防XSS攻击。合理使用可提升用户体验并减少服务器请求。
2025-12-03 20:09:41
473
JavaScript算法实现_JavaScript编程能力训练 掌握JavaScript算法需从基础题入手，理解逻辑并动手实践。重点包括字符串操作、数组遍历、回文判断、斐波那契数列；进阶掌握栈、队列、哈希表及递归应用；通过LeetCode、Codewars等平台每日练习，结合调试优化，提升效率与思维能力。
2025-12-03 20:09:08
415
JavaScript函数式编程_JavaScript现代开发模式 函数式编程通过纯函数、不可变数据和函数组合提升代码可读性与可维护性。1.纯函数确保输入输出一致且无副作用，便于测试；2.使用高阶函数如map、filter、reduce实现逻辑复用，结合compose进行函数组合；3.采用展开运算符、concat等方法保持数据不可变；4.在React中利用Hook封装状态与副作用，配合useMemo、useCallback优化性能；5.Redux的reducer遵循纯函数规范。函数式思想为现代JavaScript开发提供更清晰的组织方式。
2025-12-03 20:08:02
834
JavaScript模板引擎_javascript动态渲染 JavaScript模板引擎是将数据与HTML分离并动态生成页面内容的工具，支持变量、条件和循环，适用于列表渲染、组件构建等场景；常见库包括Handlebars、Mustache、Underscore/Lodash模板和EJS，各自适用于复杂逻辑或轻量项目；可通过正则实现简易原生模板替换，但复杂结构建议用成熟引擎；使用时需注意XSS防护、性能优化、模板可读性、浏览器兼容性及数据容错处理。
2025-12-03 20:07:02
304
JavaScript缓冲区_javascript内存操作 JavaScript通过ArrayBuffer实现二进制数据操作，需配合TypedArray或DataView使用；TypedArray提供带类型视图（如Uint8Array），支持高效读写；DataView支持字节序控制，适用于网络协议解析；广泛用于文件处理、WebSocket、Canvas、WebGL及加密等场景。
2025-12-03 20:03:25
976
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部