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 相关文章推荐
js实现的map方法示例代码
Jan 13 Javascript
JS判断客户端是手机还是PC的2个代码
Apr 12 Javascript
jQuery中index()的用法分析
Sep 05 Javascript
基于Css3和JQuery实现打字机效果
Aug 11 Javascript
基于javascript实现动态显示当前系统时间
Jan 28 Javascript
浅谈Vue.nextTick 的实现方法
Oct 25 Javascript
vue-router的使用方法及含参数的配置方法
Nov 13 Javascript
Element input树型下拉框的实现代码
Dec 21 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
Oct 30 Javascript
聊聊Vue中provide/inject的应用详解
Nov 10 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
May 15 Javascript
JS前端宏任务微任务及Event Loop使用详解
Jul 23 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
基于文本的访客签到簿
2006/10/09 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
php探针不显示内存解决方法
2019/09/17 PHP
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
2010/03/18 Javascript
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
jquery中change()用法实例分析
2015/02/06 Javascript
JS+CSS实现Li列表隔行换色效果的方法
2015/02/16 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
jQuery定义插件的方法
2015/12/18 Javascript
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
Express URL跳转(重定向)的实现方法
2017/04/07 Javascript
解决JavaScript layui 下拉框不显示的问题
2018/08/14 Javascript
微信小程序实现文字跑马灯
2020/05/26 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
element ui分页多选,翻页记忆的实例
2019/09/03 Javascript
Vue登录主页动态背景短视频制作
2019/09/21 Javascript
解决$store.getters调用不执行的问题
2019/11/08 Javascript
vue 实现一个简单的全局调用弹窗案例
2020/09/10 Javascript
深入浅析Python字符编码
2015/11/12 Python
Python读取MRI并显示为灰度图像实例代码
2018/01/03 Python
Python一个简单的通信程序(客户端 服务器)
2019/03/06 Python
利用python和百度地图API实现数据地图标注的方法
2019/05/13 Python
django 数据库连接模块解析及简单长连接改造方法
2019/08/29 Python
Django 创建后台,配置sqlite3教程
2019/11/18 Python
python实现视频读取和转化图片
2019/12/10 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
英国名牌服装购物网站:OD’s Designer
2019/09/02 全球购物
诺思信科技(南京)有限公司.NET笔试题答案
2013/07/06 面试题
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
求职信需要的五点内容
2014/02/01 职场文书
环保倡议书怎么写
2014/05/16 职场文书
节约能源标语
2014/06/17 职场文书
上课说话检讨书
2015/01/27 职场文书
Java 数组内置函数toArray详解
2021/06/28 Java/Android
MySQL 计算连续登录天数
2022/05/11 MySQL