js实现侧边栏信息展示效果
2024-04-25 13:12:46
目前的网页都右侧边栏，有的是在左侧，类似于导航栏，如一些购物商城，还有一些是在网页的右下角，一般是提示客服信息和微信/QQ等服务。
这里都涉及到一个动画效果的展示，即点击侧边栏时会在侧边栏的右侧或者左侧出现相应的信息。如下图慕课网右下角的侧边栏，把鼠标放在最后一个微信图标上，会弹出慕课网的二维码。
实现动画效果的方式有两种，一种是JavaScript setInterval函数，即设置定时器，实现简单，但是效果不佳。动画效果不够平滑，而且实现的效果有限，不能实现旋转和3D变换。用户体验有待提高。另一种是使用CSS3来实现动画效果。
css属性
描述动画的运行属性（运行时间、次数等）
transition （过渡）
animations（ 动画）
描述动画的执行属性（参与动画的属性，效果等）
transform （变形）——translate
代码实现：
sidebar.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>sideBar demo</title><link rel="stylesheet" href="css/style.css"><link rel="stylesheet" href="bootstrap/dist/css/bootstrap.css"><link rel="stylesheet" href="bootstrap/dist/css/bootstrap-theme.css"> </head> <body><div id = "sidebar"><ul><li id="prof" class="item"><span class="glyphicon glyphicon-user"></span><div>我</div></li><li id="asset" class="item"><span class="glyphicon glyphicon-user"></span><div>资产</div></li><li id="brand" class="item"><span class="glyphicon glyphicon-user"></span><div>商品</div></li><li id="foot" class="item"><span class="glyphicon glyphicon-user"></span><div>足迹</div></li><li id="calender" class="item"><span class="glyphicon glyphicon-user"></span><div>日历</div></li></ul><div id="closeBar"><span class="glyphicon glyphicon-remove"></span></div></div><div class="nav-content" id="prof-content"><div class="nav-con-close"><span class="glyphicon glyphicon-chevron-left"></span></div><div>我</div></div><div class="nav-content" id="asset-content"><div class="nav-con-close"><span class="glyphicon glyphicon-chevron-left"></span></div><div>资产</div></div><div class="nav-content" id="brand-content"><div class="nav-con-close"><span class="glyphicon glyphicon-chevron-left"></span></div><div>商标</div></div><div class="nav-content" id="foot-content"><div class="nav-con-close"><span class="glyphicon glyphicon-chevron-left"></span></div><div>足迹</div></div><div class="nav-content" id="calender-content"><div class="nav-con-close"><span class="glyphicon glyphicon-chevron-left"></span></div><div>日历</div></div><script src="sideBar.js"></script> </body> </html>
注：
<!--页面加载顺序是单线程的，加载页面时是从上到下加载，如果在上面遇到script标签或者css时，页面的渲染就会停止，服务器就回去下载.js和.css文件代码，下载后运行，我们会看到页面停顿，这是种非常不好的体验所以目前的做法都是把<script>标签放在</body>上面--><!--完好体验的页面顺序安排1、先下载css样式2、渲染HTML文档结构3、再下载JavaScript代码-->style.css
ul{list-style: none;padding-left: 0;
}
#sidebar{width: 35px;background-color: #e1e1e1;padding-top: 200px;/*设置高度100%都是相对父元素的100%，fixed使该元素脱离流，相对屏幕的100%，即全屏*/position: fixed;min-height:100%;z-index: 100;
}.item{font-size: 12px;font-family: 'Microsoft New Tai Lue';text-align: center;margin-top: 5px;
}#closeBar{position: absolute;bottom: 30px;width: 35px;text-align: center;/*提示别人是个按钮 手的样式*/cursor: pointer;
}.nav-content{width: 200px;position: fixed;min-height: 100%;background-color: #e1e1e1;/*调试代码时经常使用border，帮我们定位到div的一个区域*/border: 1px solid black;z-index: 99;/*使用透明度为0来隐藏元素*/opacity: 0;
}.nav-con-close{position: absolute;top: 5px;right: 5px;cursor: pointer;
}
.sidebar-move-left{-webkit-animation:sml;-o-animation:sml;animation:sml;/*持续时间*/-webkit-animation-duration: 1s;-moz-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;-webkit-animation-iteration-count: 1;-moz-animation-iteration-count: 1;-o-animation-iteration-count: 1;animation-iteration-count: 1;/*执行方向，动画执行结束时保持在它结束时的状态*/animation-fill-mode: forwards;-moz-animation-fill-mode: forwards;-o-animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;}@keyframes sml {from{}to{transform: translateX(-120px);}
}
.closebar-move-right{-webkit-animation:cmr;-o-animation:cmr;animation:cmr;/*持续时间*/-webkit-animation-duration: 1s;-moz-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;-webkit-animation-iteration-count: 1;-moz-animation-iteration-count: 1;-o-animation-iteration-count: 1;animation-iteration-count: 1;/*执行方向，动画执行结束时保持在它结束时的状态*/animation-fill-mode: forwards;-moz-animation-fill-mode: forwards;-o-animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;
}@keyframes cmr {from{}to{transform: translateX(160px) rotate(405deg) scale(1.5);}
}.sidebar-move-right{-webkit-animation:smr;-o-animation:smr;animation:smr;/*持续时间*/-webkit-animation-duration: 1s;-moz-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;-webkit-animation-iteration-count: 1;-moz-animation-iteration-count: 1;-o-animation-iteration-count: 1;animation-iteration-count: 1;/*执行方向，动画执行结束时保持在它结束时的状态*/animation-fill-mode: forwards;-moz-animation-fill-mode: forwards;-o-animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;
}@keyframes smr {from{}to{transform: translateX(120px);}
}
.closebar-move-left{-webkit-animation:cml;-moz-animation-name: cml;-o-animation:cml;animation:cml;/*持续时间*/-webkit-animation-duration: 1s;-moz-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;-webkit-animation-iteration-count: 1;-moz-animation-iteration-count: 1;-o-animation-iteration-count: 1;animation-iteration-count: 1;/*执行方向，动画执行结束时保持在它结束时的状态*/animation-fill-mode: forwards;-moz-animation-fill-mode: forwards;-o-animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;
}@keyframes cml {from{transform: scale(1.5);}to{transform:translateX(-160px) rotate(-405deg) scale(1);}
}.menuContent-move-right{-webkit-animation:mmr;-moz-animation-name: mmr;-o-animation:mmr;animation:mmr;/*持续时间*/-webkit-animation-duration: .5s;-moz-animation-duration: .5s;-o-animation-duration: .5s;animation-duration: .5s;-webkit-animation-iteration-count: 1;-moz-animation-iteration-count: 1;-o-animation-iteration-count: 1;animation-iteration-count: 1;/*执行方向，动画执行结束时保持在它结束时的状态*/animation-fill-mode: forwards;-moz-animation-fill-mode: forwards;-o-animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;
}@keyframes mmr {from{opacity: 0;}to{opacity: 1;transform:translateX(120px);}}.menuContent-move-left{-webkit-animation:mml;-moz-animation-name: mml;-o-animation:mml;animation:mml;/*持续时间*/-webkit-animation-duration: 1s;-moz-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;-webkit-animation-iteration-count: 1;-moz-animation-iteration-count: 1;-o-animation-iteration-count: 1;animation-iteration-count: 1;/*执行方向，动画执行结束时保持在它结束时的状态*/animation-fill-mode: forwards;-moz-animation-fill-mode: forwards;-o-animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;
}@keyframes mml {from{opacity: 1;}to{opacity: 0;transform:translateX(-120px);}}.menuContent-move-up{-webkit-animation:mmu;-moz-animation-name: mmu;-o-animation:mmu;animation:mmu;/*持续时间*/-webkit-animation-duration: 1s;-moz-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;-webkit-animation-iteration-count: 1;-moz-animation-iteration-count: 1;-o-animation-iteration-count: 1;animation-iteration-count: 1;/*执行方向，动画执行结束时保持在它结束时的状态*/animation-fill-mode: forwards;-moz-animation-fill-mode: forwards;-o-animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;
}@keyframes mmu {from{opacity: 0;}to{opacity: 1;transform:translateY(-250px);}}sidebar.js
/*
var sideBar = {} 会造成全局污染，sideBar赋给Windows，作为windows的一个属性*/
/*目前常用模块模式的方法，避免全局污染*//*立即执行函数*/
(function () {var MenuBar = function () {this.el = document.querySelector('#sidebar ul');this.state = 'allClosed';/*禁止向上传播，不然点击sidebar中的ul也会触发和点击关闭按钮一样的事件*/this.el.addEventListener('click',function (e) {e.stopPropagation();});var self = this;this.menulist = document.querySelectorAll('#sidebar ul > li');this.currentOpenMenuContent = null;for(var i = 0;i<this.menulist.length;i++){this.menulist[i].addEventListener('click',function (e) {var menuContentEl = document.getElementById(e.currentTarget.id +'-content');if(self.state === 'allClosed'){console.log('open'+menuContentEl.id);menuContentEl.style.top = '0';menuContentEl.style.left = '-85px';menuContentEl.className = 'nav-content';menuContentEl.classList.add('menuContent-move-right');self.state='hasOpened';self.currentOpenMenuContent = menuContentEl;}else{console.log('closed'+self.currentOpenMenuContent.id);console.log('open'+menuContentEl.id);self.currentOpenMenuContent.className = 'nav-content';self.currentOpenMenuContent.style.top = '0';self.currentOpenMenuContent.style.left = '35px';self.currentOpenMenuContent.classList.add('menuContent-move-left');menuContentEl.className='nav-content';menuContentEl.style.top = '250px';menuContentEl.style.left = '35px';menuContentEl.classList.add('menuContent-move-up');self.state='hasOpened';self.currentOpenMenuContent = menuContentEl;}});}this.menuContentList = document.querySelectorAll('.nav-content > div.nav-con-close');for(var i=0;i<this.menuContentList.length;i++){this.menuContentList[i].addEventListener('click',function (e) {var menuContent = e.currentTarget.parentNode;menuContent.className = 'nav-content';menuContent.style.top = '0';menuContent.style.left ='35px';menuContent.classList.add('menuContent-move-left');this.state='allClosed';});}};/*Sidebar第一个字母大写，构造函数的基本规范 */var Sidebar = function (eId,closeBarId) {this.state = 'opened';this.el = document.getElementById(eId || 'sidebar');this.closeBarEl = document.getElementById(closeBarId || 'closeBar');/*默认向上冒泡,第三个参数可以不写*/var self = this;this.menubar = new MenuBar();this.el.addEventListener('click',function (event) {if(event.target !== self.el){//console.log(this);
self.triggerSwich();}});}Sidebar.prototype.close = function () {console.log('关闭sidebar');this.el.className = 'sidebar-move-left';this.closeBarEl.className = 'closebar-move-right';this.state = 'closed';};Sidebar.prototype.open = function () {console.log('打开sidebar');this.el.style.left = '-120px';this.el.className = 'sidebar-move-right';this.closeBarEl.style.left = '160px';this.closeBarEl.className = 'closebar-move-left';this.state = 'opened';};Sidebar.prototype.triggerSwich = function () {if(this.state === 'opened'){this.close();}else{this.open();}};var sidebar = new Sidebar();})();转载于:https://www.cnblogs.com/sMKing/p/6099669.html
js实现侧边栏信息展示效果相关推荐
- js 点击侧边栏展示内容_【DEMO】JS实现侧边栏信息展示效果
/*使用块模式--立即执行的匿名函数*/(function(){//所有声明的变量在构造函数内部,不会向windows添加任何属性 /*构造函数的基本规范: 1.构造函数的第一个字母是大写的,与其他函 ...
- BBS（仿博客园系统）项目03（主页搭建、个人站点搭建（侧边栏分类展示、标签展示、日期归档）、文章详情页相关功能实现）...
摘要: 主页面的搭建(导航条下面的区域) 个人站点 侧边栏分类展示 侧边栏标签展示 侧边栏日期归档 文章详情页 文章内容 文章点赞点踩 文章评论 一.主页面home.html的搭建(进一步完善) ho ...
- css和js实现3d图片,JavaScript_纯JS实现旋转图片3D展示效果，CSS:style type=text/cssgt - phpStudy...
纯JS实现旋转图片3D展示效果 CSS: #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute; ...
- 做出的一个图片的自动展示效果(JS版本)
在国外的网站看到一个很不错的图片自动展示效果,于是就自己做了起来,在查看代码时发现是一个JavaScript爱好者自己写了一个库文件来调用,确实看的不太懂,但效果是做出来了,页面的调用代码只需引用固定 ...
- JS特效代码大全（十一）超炫的js图片展示效果（三）
在看过上一篇JS特效代码大全(十)超炫的js图片展示效果(二)文章后,相信很多人都想试试把这种效果用到自己的项目中去了.在用的过程当中个性化的需求就来了,比如,想把小图导航放上边去,或者放左边放右边等 ...
- fullPage.js给网站加上全屏幻灯片的展示效果
Table of Contents 前言 作者是何许人也? fullPage.js 的诞生过程 fullPage.js 的增长过程 fullPage.js 如何开展商业化运作? 未来计划 给独立开发者 ...
- html正方形对话框素材,10种展示效果的弹出层对话框插件method.js
一款10种展示效果的弹出层对话框插件method.js,可以点击演示页面的10个按钮分别查看不同的弹窗效果,基本上该有的弹窗特效都有了,喜欢的童鞋请收下吧. 查看演示 下载资源: 68 次 下载资源 ...
- js定时触发-----新订单提醒展示效果并提示音效
展示效果 <!--CSS代码--> <style>.add_blank{position:absolute;left:14%;width:34%;font-size:32px; ...
- CSS+JS自动循环滚动的多图片幻灯切换展示效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
最新文章
- queue：queue清空的方法?
- java分布式api网管关,分布式04-Spring Cloud Zuul Api网关 一
- [Sensor]--BMI160-加速度计、陀螺仪传感器
- Tips_一级菜单栏实现
- LeetCode 1229. 安排会议日程（双指针）
- 从零开始学前端：字体图标的引入 --- 今天你学习了吗？（CSS：Day18）
- 《Web Load Testing For Dummie》读书笔记
- 大学c语言循环教材,大一C语言教材《C语言程序设计》第5章 循环程序设计.ppt教案.ppt...
- 深圳免费旅游景点大全｜深圳旅游攻略（下）
- Warning: Procedure created with compilation errors.
- win10“网络属性”选项卡空白怎么办
- mybatis中的事务------我的笔记M11
- cocos creator(12)
- 【17 提高 1】 给
- 数据分析： kaggle比赛 - 销量预测
- 云知声持续发挥企业优势，赋能AIoT 落地，让未来生活更进一步
- 技术干货｜昇思MindSpore 1.5版本中的亲和算法库——MindSpore Boost
- python怎么读取excel文件-Python读写Excel文件方法介绍
- 9-29微信功能思维导图
- jquery控制页面只刷新一次