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笔试题目附答案@20081025_jb51.net
Oct 26 Javascript
基于Jquery的标签智能验证实现代码
Dec 27 Javascript
极力推荐10个短小实用的JavaScript代码段
Aug 03 Javascript
Bootstrap CSS组件之导航(nav)
Dec 17 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
Aug 06 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
Nov 17 Javascript
在vue项目中使用sass的配置方法
Mar 20 Javascript
详解vue-cli官方脚手架配置
Jul 20 Javascript
详解JQuery基础动画操作
Apr 12 jQuery
react+redux仿微信聊天界面
Jun 21 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 Javascript
Echarts实现单条折线可拖拽效果
Dec 19 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
mysql 查询指定日期时间内sql语句实现原理与代码
2012/12/16 PHP
PHP实现函数内修改外部变量值的方法示例
2018/12/28 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
Javascript实例教程(19) 使用HoTMetal(6)
2006/12/23 Javascript
利用JQuery为搜索栏增加tag提示
2009/06/22 Javascript
ExtJS TabPanel beforeremove beforeclose使用说明
2010/03/31 Javascript
javascript日期转换 时间戳转日期格式
2011/11/05 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
node.js中的buffer.length方法使用说明
2014/12/14 Javascript
javascript实现简单的分页特效
2015/08/12 Javascript
JavaScript获取浏览器信息的方法
2015/11/20 Javascript
JS正则表达式修饰符global(/g)用法分析
2016/12/27 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
2018/01/13 Javascript
微信小程序纯文本实现@功能
2020/04/08 Javascript
0基础学习前端开发的一些建议
2020/07/14 Javascript
javascript实现点击小图显示大图
2020/11/29 Javascript
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
Python判断值是否在list或set中的性能对比分析
2016/04/16 Python
快速了解Python相对导入
2018/01/12 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
Django框架创建mysql连接与使用示例
2019/07/29 Python
Apache部署Django项目图文详解
2019/07/30 Python
Xadmin+rules实现多选行权限方式(级联效果)
2020/04/07 Python
5款实用的python 工具推荐
2020/10/13 Python
Can a struct inherit from another class? (结构体能继承类吗)
2014/07/22 面试题
自我评价范文
2013/12/22 职场文书
迎新晚会策划方案
2014/06/13 职场文书
汽车转让协议书范本
2014/12/07 职场文书
Python批量将csv文件转化成xml文件的实例
2021/05/10 Python
Go语言实现Snowflake雪花算法
2021/06/08 Golang