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 相关文章推荐
html+css+js实现xp window界面及有关功能
Mar 26 Javascript
怎么清空javascript数组
May 11 Javascript
iframe窗口高度自适应的实现方法
Jan 08 Javascript
Jquery 实现checkbox全选方法
Jan 28 Javascript
理解javascript中的MVC模式
Jan 28 Javascript
Sort()函数的多种用法
Mar 20 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
Feb 01 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
Sep 04 Javascript
vue.js iview打包上线后字体图标不显示解决办法
Jan 20 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
May 28 Javascript
微信小程序弹窗禁止页面滚动的实现代码
Dec 30 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
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
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
PHP使用preg_split和explode分割textarea存放内容的方法分析
2017/07/03 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
JavaScript URL参数读取改进版
2009/01/16 Javascript
jquery的ajax请求全面了解
2013/03/20 Javascript
字段太多jquey快速清空表单内容方法
2014/08/21 Javascript
Jquery解析json字符串及json数组的方法
2015/05/29 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
Javascript动画效果(1)
2016/10/11 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
基于bootstrap写的一点localStorage本地储存
2017/11/21 Javascript
JavaScript中的高级函数
2018/01/04 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
2018/08/28 Javascript
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
Vue.js计算机属性computed和methods方法详解
2019/10/12 Javascript
JS实现关闭小广告特效
2021/01/29 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
JavaScript实现猜数字游戏
2020/05/20 Javascript
深入了解Vue.js 混入(mixins)
2020/07/23 Javascript
jQuery实现放大镜案例
2020/10/19 jQuery
[04:03]DOTA2英雄梦之声_第02期_风暴之灵
2014/06/30 DOTA
python中stdout输出不缓存的设置方法
2014/05/29 Python
用Python给文本创立向量空间模型的教程
2015/04/23 Python
Django中的“惰性翻译”方法的相关使用
2015/07/27 Python
Pandas统计重复的列里面的值方法
2019/01/30 Python
pytorch中交叉熵损失(nn.CrossEntropyLoss())的计算过程详解
2020/01/02 Python
keras 多任务多loss实例
2020/06/22 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
如何写一份好的自荐信
2014/01/02 职场文书
年度献血先进个人事迹材料
2014/02/14 职场文书
入党宣誓大会后的感想
2015/08/10 职场文书
2016社区平安家庭事迹材料
2016/02/26 职场文书
2019年特色火锅店的创业计划书模板
2019/08/28 职场文书
深入理解pytorch库的dockerfile
2022/06/10 Python