JavaScript实现简单的隐藏式侧边栏功能示例


Posted in Javascript onAugust 31, 2018

本文实例讲述了JavaScript实现简单的隐藏式侧边栏功能。分享给大家供大家参考,具体如下:

常见的隐藏式侧边栏,如分享、联系客服等。通过设置速度来实现滑入滑出的动态效果

以下是代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>3water.com js侧边栏</title>
<style type="text/css">
*{margin: 0;padding: 0;}
#div1{width: 160px; height: 320px; background: #fff; /*border: 1px solid red;*/position: relative;left:-140px;top:100px;}
#div1 .hide{width: 140px; height: 320px; background: cyan; float: left;position: absolute;left: 0;top: 0;}
#div1 .show{width: 17px; height: auto;background: skyblue;border: 1px solid #000;float: right; position: absolute; top: 39%;right: 0;}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('div1');
var timer;
oDiv.onmouseover=function(){
//startMove(10,0);speed,end
startMove(0);
//这里稍作优化,原来传入两个参数改为一个参数
};
oDiv.onmouseout=function(){
//startMove(-10,-140);
startMove(-140);
}
function startMove(end){
/*var oDiv=document.getElementById('div1');*/
clearInterval(timer);
timer=setInterval(function(){
var speed=0;
//从-140到0,速度为正,从0到-140,速度为负
if(oDiv.offsetLeft>end){
speed=-10;
}else{
speed=10;
}
if(oDiv.offsetLeft==end){
clearInterval(timer);
}else{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},30);
}
}
</script>
</head>
<body>
<div id="div1">
<div class="hide">
<ul>
<li>qq</li>
<li>weibo</li>
<li>3water</li>
</ul>
</div>
<div class="show">
<span>分享到</span>
</div>
</div>
</body>
</html>

这里使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试效果如下:

JavaScript实现简单的隐藏式侧边栏功能示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript 从if else 到 switch case 再到抽象
Jul 17 Javascript
flexigrid 参数说明
Nov 23 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
Dec 08 Javascript
jquery 设置style:display的方法
Jan 29 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
Dec 08 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
Nov 02 Javascript
JavaScript数据结构之二叉树的查找算法示例
Apr 13 Javascript
Angular实现的简单定时器功能示例
Dec 28 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
Mar 28 Javascript
修改npm全局安装模式的路径方法
May 15 Javascript
JS实现的自定义map方法示例
May 17 Javascript
Vue加载组件、动态加载组件的几种方式
Aug 31 #Javascript
Bootstrap模态对话框用法简单示例
Aug 31 #Javascript
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 #Javascript
angular 实时监听input框value值的变化触发函数方法
Aug 31 #Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 #Javascript
JS实现字符串翻转的方法分析
Aug 31 #Javascript
angular实现input输入监听的示例
Aug 31 #Javascript
You might like
PHP 基本语法格式
2009/12/15 PHP
php实现将wav文件转换成图像文件并在页面中显示的方法
2015/04/21 PHP
比较完整的微信开发php代码
2016/08/02 PHP
图片上传判断及预览脚本的效果实例
2013/08/07 Javascript
javascript控制在光标位置插入文字适合表情的插入
2014/06/09 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
JS中如何比较两个Json对象是否相等实例代码
2016/07/13 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
2016/08/27 Javascript
巧用canvas
2017/01/21 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
2017/07/05 Javascript
使用JSON格式提交数据到服务端的实例代码
2018/04/01 Javascript
webpack分离css单独打包的方法
2018/06/12 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
Vuejs开发环境搭建及热更新【推荐】
2018/09/07 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
2019/04/17 Javascript
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
JavaScript中的ES6 Proxy的具体使用
2019/06/16 Javascript
Python的Twisted框架中使用Deferred对象来管理回调函数
2016/05/25 Python
Python的爬虫框架scrapy用21行代码写一个爬虫
2017/04/24 Python
Python中几种导入模块的方式总结
2017/04/27 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
三步实现Django Paginator分页的方法
2019/06/11 Python
Python适配器模式代码实现解析
2019/08/02 Python
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
ansible-playbook实现自动部署KVM及安装python3的详细教程
2020/05/11 Python
如何在VSCode下使用Jupyter的教程详解
2020/07/13 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
安全生产投入制度
2014/01/29 职场文书
万年牢教学反思
2014/02/15 职场文书
对教师的评语
2014/04/28 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
家长会感言
2015/08/01 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书
Vue全家桶入门基础教程
2021/05/14 Vue.js