javascript 实现动态侧边栏实例详解


Posted in Javascript onNovember 11, 2016

javascript 实现动态侧边栏

总的来说就是利用 鼠标悬停onmouseover   和  鼠标移除onmouseout 这两个时间来完成的。

首先是HTML 结构

<body>
<div id="div1">
<span>侧边栏</span>
</div>
</body>

然后是css的样式:

#div1{
  width:150px;
  height:200px;
  background:#999999;
  position:absolute;
  left:-150px;}
span{
  width:20px;
  height:70px;
  line-height:23px;
  background:#09C;
  position:absolute;
  right:-20px;
  top:70px;}

默认的样式 侧边栏是隐藏起来的如图:

 javascript 实现动态侧边栏实例详解

当鼠标移入以后如图:

javascript 实现动态侧边栏实例详解

 下面是完整代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1{
  width:150px;
  height:200px;
  background:#999999;
  position:absolute;
  left:-150px;}
span{
  width:20px;
  height:70px;
  line-height:23px;
  background:#09C;
  position:absolute;
  right:-20px;
  top:70px;}
</style>
<script>
window.onload=function(){
  var odiv=document.getElementById('div1');
  odiv.onmouseover=function ()
  {
    
    startmove(0,10);//第一个参数为div  left属性的目标值  第二个为 每次移动多少像素
    
    }
 odiv.onmouseout=function ()
 {
   startmove(-150,-10);
   }
  }
  
  var timer=null;
function startmove(target,speed)
{
   
  var odiv=document.getElementById('div1');
clearInterval(timer);
   timer=setInterval(function (){
    
    if(odiv.offsetLeft==target)
    {
      clearInterval(timer);
      }
      else
      {  
    odiv.style.left=odiv.offsetLeft+speed+'px';
      }
    
    },30)
  
  }
  
</script>
</head>

<body>
<div id="div1">
<span>侧边栏</span>
</div>
</body>
</html>

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
Jan 30 Javascript
JavaScript prototype 使用介绍
Aug 29 Javascript
用js实现in_array的方法
Nov 05 Javascript
JQuery右键菜单插件ContextMenu使用指南
Dec 19 Javascript
jQuery下拉框的简单应用
Jun 24 Javascript
javascript 定时器工作原理分析
Dec 03 Javascript
js实现PC端和移动端刮卡效果
Mar 27 Javascript
原生js实现trigger方法示例代码
May 22 Javascript
关于layui toolbar和template的结合使用方法
Sep 19 Javascript
使用webpack搭建pixi.js开发环境
Feb 12 Javascript
Vant 中的Toast设置全局的延迟时间操作
Nov 04 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
Nov 11 #Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
Nov 11 #Javascript
JSON与XML的区别对比及案例应用
Nov 11 #Javascript
浅谈AngularJS中ng-class的使用方法
Nov 11 #Javascript
JS中数组重排序方法
Nov 11 #Javascript
js编写的treeview使用方法
Nov 11 #Javascript
Vue.js教程之计算属性
Nov 11 #Javascript
You might like
PHP中的正规表达式(一)
2006/10/09 PHP
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
PHP实现GIF图片验证码
2015/11/04 PHP
php获取远程图片并下载保存到本地的方法分析
2016/10/08 PHP
用JQuery调用Session的实现代码
2010/10/29 Javascript
给artDialog 5.02 增加ajax get功能详细介绍
2012/11/13 Javascript
js自动下载文件到本地的实现代码
2013/04/28 Javascript
javascript实现dom元素可拖动
2016/03/21 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
2016/06/09 Javascript
bootstrapfileinput实现文件自动上传
2016/11/08 Javascript
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
详解element-ui中el-select的默认选择项问题
2019/08/02 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
vue过滤器实现日期格式化的案例分析
2020/07/02 Javascript
Python中使用md5sum检查目录中相同文件代码分享
2015/02/02 Python
对python3 Serial 串口助手的接收读取数据方法详解
2019/06/12 Python
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
python暴力解压rar加密文件过程详解
2019/07/05 Python
使用python对多个txt文件中的数据进行筛选的方法
2019/07/10 Python
Python3+PyInstall+Sciter解决报错缺少dll、html等文件问题
2019/07/15 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
TensorFlow dataset.shuffle、batch、repeat的使用详解
2020/01/21 Python
python实现音乐播放器 python实现花框音乐盒子
2020/02/25 Python
Python就将所有的英文单词首字母变成大写
2021/02/12 Python
英国最大的宠物商店:Pets at Home
2019/04/17 全球购物
Everlast官网:拳击、综合格斗和健身相关的体育用品
2020/08/03 全球购物
网吧最新创业计划书范文
2014/03/27 职场文书
岗位聘任书范文
2014/03/29 职场文书
施工质量承诺书范文
2014/05/30 职场文书
2014年学生会个人工作总结
2014/11/07 职场文书
2014年村委会工作总结
2014/11/24 职场文书
网吧管理制度范本
2015/08/05 职场文书
HTML通过表单实现酒店筛选功能
2021/05/18 HTML / CSS
数据库之SQL技巧整理案例
2021/07/07 SQL Server
php实现自动生成验证码的实例讲解
2021/11/17 PHP