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 相关文章推荐
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
Aug 28 Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
Dec 18 Javascript
多浏览器支持的右下角浮动窗口
Apr 01 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
Aug 24 Javascript
jQuery实现高亮显示的方法
Mar 10 Javascript
javascript数据结构与算法之检索算法
Apr 04 Javascript
JQuery显示、隐藏div的几种方法简明总结
Apr 16 Javascript
JavaScrpt的面向对象全面解析
May 09 Javascript
理解Koa2中的async&amp;await的用法
Feb 05 Javascript
微信小程序实现弹出层效果
May 26 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
玩转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中cookies使用指南
2007/03/16 PHP
在普通HTTP上安全地传输密码
2007/07/21 PHP
Android AsyncTack 异步任务实例详解
2016/11/02 PHP
Js实现网页键盘控制翻页的方法
2014/10/30 Javascript
javascript将url中的参数加密解密代码
2014/11/17 Javascript
js实现滚动条滚动到页面底部继续加载
2015/12/19 Javascript
简单的分页代码js实现
2016/05/17 Javascript
AngularJS中如何使用echart插件示例详解
2016/10/26 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
vue-scroller记录滚动位置的示例代码
2018/01/17 Javascript
微信小程序input框中加入小图标的实现方法
2018/06/19 Javascript
js自定义input文件上传样式
2018/10/26 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
2019/08/27 jQuery
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
python封装对象实现时间效果
2020/04/23 Python
简单的编程0基础下Python入门指引
2015/04/01 Python
介绍Python的Django框架中的静态资源管理器django-pipeline
2015/04/25 Python
Python爬虫DOTA排行榜爬取实例(分享)
2017/06/13 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
简单了解python PEP的一些知识
2019/07/13 Python
pytorch加载自定义网络权重的实现
2020/01/07 Python
matplotlib.pyplot.matshow 矩阵可视化实例
2020/06/16 Python
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
应届生妇产科护士求职信
2013/10/27 职场文书
英语自荐信常用语句
2013/12/13 职场文书
高中毕业生的个人自我评价
2014/02/21 职场文书
餐饮投资计划书
2014/04/25 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
工程技术员岗位职责
2015/04/11 职场文书
矛盾论读书笔记
2015/06/29 职场文书
我爱我班主题班会
2015/08/13 职场文书
2016三八妇女节校园广播稿
2015/12/17 职场文书
社会心理学学习心得体会
2016/01/22 职场文书
数学复习课教学反思
2016/02/18 职场文书
Java由浅入深通关抽象类与接口(上篇)
2022/04/26 Java/Android