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关于select的相关操作说明
Jan 13 Javascript
浅谈javascript 迭代方法
Jan 21 Javascript
javascript异步编程代码书写规范Promise学习笔记
Feb 11 Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 Javascript
JavaScript仿百度图片浏览效果
Nov 23 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
Feb 24 Javascript
Javascript 之封装(Package)
Sep 14 Javascript
微信小程序的mpvue框架快速上手指南
May 15 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
Jul 04 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 Javascript
JS实现躲避粒子小游戏
Jun 18 Javascript
原生JS封装vue Tab切换效果
Apr 28 Vue.js
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
建立动态的WML站点(三)
2006/10/09 PHP
php数组函数序列之array_intersect() 返回两个或多个数组的交集数组
2011/11/10 PHP
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
PHP连接access数据库
2015/03/27 PHP
详解cookie验证的php应用的一种SSO解决办法
2017/10/20 PHP
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
javascript 树控件 比较好用
2009/06/11 Javascript
Web开发之JavaScript
2012/03/29 Javascript
jQuery实现流动虚线框的方法
2015/01/29 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
2016/01/22 Javascript
详解Angularjs中的依赖注入
2016/03/11 Javascript
Bootstrap按钮组件详解
2016/04/26 Javascript
AngularJS中的表单简单入门
2016/07/28 Javascript
JS使用tofixed与round处理数据四舍五入的区别
2017/10/25 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
2017/11/22 Javascript
深入浅析Vue中的Prop
2018/06/10 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
vue文件运行的方法教学
2019/02/12 Javascript
vue实现瀑布流组件滑动加载更多
2020/03/10 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
2020/06/12 Javascript
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
详解Python网络框架Django和Scrapy安装指南
2019/04/01 Python
Python中的正则表达式与JSON数据交换格式
2019/07/03 Python
python实现的自动发送消息功能详解
2019/08/15 Python
浅谈Pycharm的项目文件名是红色的原因及解决方式
2020/06/01 Python
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
英国地毯卖家:The Rug Seller
2019/07/18 全球购物
工程材料采购方案
2014/05/18 职场文书
企业文化演讲稿
2014/05/20 职场文书
工程催款通知书
2015/04/17 职场文书
疾病证明书
2015/06/19 职场文书
整脏治乱工作简报
2015/07/21 职场文书
初中语文教学研修日志
2015/11/13 职场文书
Python使用protobuf序列化和反序列化的实现
2021/05/19 Python
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python