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 live( type, fn ) 委派事件实现
Oct 11 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
Mar 16 Javascript
前台js调用后台方法示例
Dec 02 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
Aug 18 Javascript
node.js中的path.sep方法使用说明
Dec 08 Javascript
javascript实现设置、获取和删除Cookie的方法
Jun 01 Javascript
整理Javascript数组学习笔记
Nov 29 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
Mar 07 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
Aug 17 Javascript
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
原生js实现随机点名功能
Nov 05 Javascript
JavaScript实现多文件下载方法解析
Aug 07 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使用数组实现队列
2012/02/05 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
详解PHP用substr函数截取字符串中的某部分
2016/12/03 PHP
PHP使Laravel为JSON REST API返回自定义错误的问题
2018/10/16 PHP
JavaScript之自定义类型
2012/05/04 Javascript
JS判断两个时间大小的示例代码
2014/01/28 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
浅析angularJS中的ui-router和ng-grid模块
2016/05/20 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
为什么要使用Vuex的介绍
2019/01/19 Javascript
vue 自定义右键样式的实例代码
2019/11/06 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
[42:36]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第二局
2016/02/26 DOTA
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
Python Web框架之Django框架cookie和session用法分析
2019/08/16 Python
python with语句的原理与用法详解
2020/03/30 Python
Django models文件模型变更错误解决
2020/05/11 Python
美国用餐电影院:Alamo Drafthouse Cinema
2020/01/23 全球购物
爱尔兰旅游网站:ebookers.ie
2020/01/24 全球购物
介绍一下grep命令的使用
2015/06/12 面试题
Java面向对象面试题
2016/12/26 面试题
先进个人事迹材料
2014/01/25 职场文书
群众路线教育实践活动方案
2014/02/02 职场文书
2014年协会工作总结
2014/11/22 职场文书
2014年勤工助学工作总结
2014/11/24 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
爱晚亭导游词
2015/02/09 职场文书
反邪教学习心得体会
2016/01/15 职场文书
oracle表分区的概念及操作
2021/04/24 Oracle
Java面试题冲刺第十八天--Spring框架3
2021/08/07 面试题