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

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

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

以下是代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>www.jb51.net 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>jb51</li>
</ul>
</div>
<div class="show">
<span>分享到</span>
</div>
</div>
</body>
</html>

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

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript事件相关操作与技巧大全》、《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

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

赞 (0)

相关推荐

  • JavaScript函数、闭包、原型、面向对象学习笔记

    断言 单元测试框架的核心是断言方法,通常叫assert(). 该方法通常接收一个值--需要断言的值,以及一个表示该断言目的的描述. 如果该值执行的结果为true,断言就会通过: 否则,断言就会被认为是失败的. 通常用一个相应的通过(pass)/ 失败(fail)标记记录相关的信息: function assert(value, desc) { let li = document.createElement('li'); li.className = value ? 'pass' : 'fail'

  • Reactnative-iOS回调Javascript的方法

    Reactnative可以调用原生模块,原生模块也可以给JavaScript发送事件通知.最好的方法是继承RCTEventEmitter.自定义继承自PushEventEmitter的子类RCTEventEmitter. #import <Foundation/Foundation.h> #import <React/RCTBridgeModule.h> #import <React/RCTEventEmitter.h> @interface PushEventEmit

  • Javascript 之封装（Package）

    一. 构造函数(Constructor)模式的封装 为了解决从原型对象生成实例的问题,Javascript提供了一个构造函数(Constructor)模式. 所谓"构造函数",其实就是一个普通函数,但是内部使用了this变量.对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例对象上. 举个例子,下面生成的是狗的原型对象: function Dog(name,color,species){ this.name = name; this.color = color; t

  • Package.js 现代化的JavaScript项目make工具

    Package.js项目地址:http://code.google.com/p/package-js/ Package.js是一个很方便的JavaScript包依赖管理及Make工具.它的设计目标是使浏览器端的JavaScript Component/App 开发更加模块化.如果您只是在开发一个小型的网站,只会混杂在HTML中写几行JS代码用于改善一下用户体验,那么Package.js也许并不适合您.如果您正在开发一个中到大型的WebApp,有几十甚至几百几千个JS文件和CSS文件.HTML模板

  • package.json文件配置详解

    package.json 是npm init命令初始化后,在项目的根目录下自动生成的配置文件,它定义了这个项目的配置信息以及所需要的各种模块,npm install根据这个命令,自动下载所需的模块.package.json就是一个json文件,json本身只是一种数据格式,它本身并不支持注释,此处的注释只是为了更加方便的理解package.json的各个字段 { //项目名称 "name": "demo", //version是版本(遵守"大版本.次要版本

  • 详解vue-cli 脚手架项目-package.json

    使用vue-cli脚手架新建的项目中,含有package.json. package.json是npm的配置文件,里面设定了脚本以及项目依赖的库. npm run dev 这样的命令就写在package.json里. { "name": "vue-manage", // 项目名称 "version": "1.0.0", // 版本 "description": "Reimbursement Man

  • JavaScript读写二进制数据的方法详解

    JavaScript读写二进制数据的方法详解

    前言 二进制是计算技术中广泛采用的一种数制.二进制数据是用0和1两个数码来表示的数,如果想要在前端中处理音频和视频.那你必须要对二进制数据有很好地掌握和操作能力.下面话不多说了,来一起看看详细介绍的吧 类型化数组的出现 类型化数组是 HTML5 中引入的API,它能够让开发者使用 JavaScript 直接操作二进制数据.在类型化数组出现之前,我们是无法直接通过 JavaScript 操作二进制数据,通常都是操作 JavaScript 中的数据类型,由运行时转化成二进制.这就多了一个转化的过程,

  • JavaScript使用indexOf()实现数组去重的方法分析

    JavaScript使用indexOf()实现数组去重的方法分析

    本文实例讲述了JavaScript使用indexOf()实现数组去重的方法.分享给大家供大家参考,具体如下: 数组去重方法有多中,这里列举出自己认为比较容易理解的方法. 思路: 1. 创建一个新的空数组,用来存放去重后的新数组. 2. 利用for循环循环遍历需要去重的数组. 3. 利用indexOf()方法查询遍历出的数组在新数组中是否出现,如果出现:则继续遍历数组,如未出现:则利用push方法添加到新数组中. 4. 原数组循环遍历完成后,组建一个已经去除重复的新数组. <script> va

  • nodejs npm package.json中文文档

    简介 本文档有所有package.json中必要的配置.它必须是真正的json,而不是js对象. 本文档中描述的很多行为都受npm-config(7)的影响. 默认值 npm会根据包内容设置一些默认值. 复制代码 代码如下: "scripts": {"start": "node server.js"} 如果包的根目录有server.js文件,npm会默认将start命令设置为node server.js. "scripts":

  • JavaScript日期工具类DateUtils定义与用法示例

    JavaScript日期工具类DateUtils定义与用法示例

    本文实例讲述了JavaScript日期工具类DateUtils定义与用法.分享给大家供大家参考,具体如下: DateUtils = { patterns: { PATTERN_ERA: 'G', //Era 标志符 Era strings. For example: "AD" and "BC" PATTERN_YEAR: 'y', //年 PATTERN_MONTH: 'M', //月份 PATTERN_DAY_OF_MONTH: 'd', //月份的天数 PATT

  • 详解Nodejs之npm&package.json

    一直以来,作为前端开发,在公司都是先写好页面,然后再跟后端合作,将数据填入前端页面中,但是偶尔自己闲来无事,也会看一些框架什么的,然后利用框架做个单页面应用啊,app什么的,这时候页面的数据总是一些假数据,而关于数据请求的部分就没办法做(因为没有后台嘛).所以我感觉是时候学习一下node了,这对于我以后要学的webpack,前端工程化等也有一定帮助. 作为前端,因为经常用到gulp,webpack等工具,所以我们最常见到的是npm和package.json,所以先总结一下它们俩. npm 初始化

  • JavaScript实现JSON合并操作示例【递归深度合并】

    本文实例讲述了JavaScript实现JSON合并操作.分享给大家供大家参考,具体如下: 为什么我会想到写这几行代码 在实际工作中,我们会使用许多或自主开发或第三方的工具,有些工具的配置文件相当细节,使用频率低倒也罢了,使用频率高的话必然造成很多代码冗余.所以我都会对这些工具做二次封装,把不经常改动的配置给予默认值.如果需要改动,传入新的配置覆盖原来的配置即可. 起初我以为这是一项很简单的需求 var json1 = { // 固定的配置 a: 1, b: 2, c: 3, } var json

随机推荐