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 相关文章推荐
asp.net和asp下ACCESS的参数化查询
Jun 11 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
Sep 21 Javascript
jQuery学习之prop和attr的区别示例介绍
Nov 15 Javascript
javascript使用prototype完成单继承
Dec 24 Javascript
jquery中toggle函数交替使用问题
Jun 22 Javascript
原生js实现百叶窗效果及原理介绍
Apr 12 Javascript
AngularJS 支付倒计时功能实现思路
Jun 05 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
Nov 22 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
vue项目中微信登录的实现操作
Sep 08 Javascript
vue中div禁止点击事件的实现
Apr 02 Vue.js
玩转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
缅甸的咖啡简史
2021/03/04 咖啡文化
用PHP读取flv文件的播放时间长度
2009/09/03 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
PHP5.5.15+Apache2.4.10+MySQL5.6.20配置方法分享
2016/05/06 PHP
PHP利用DWZ.CN服务生成短网址
2019/08/11 PHP
Laravel 实现Controller向blade前台模板赋值的四种方式小结
2019/10/22 PHP
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
javascript学习笔记(九) js对象 设计模式
2012/06/19 Javascript
JS判断客户端是手机还是PC的2个代码
2014/04/12 Javascript
javascript将数字转换整数金额大写的方法
2015/01/27 Javascript
AngularJS监听路由的变化示例代码
2016/09/23 Javascript
vue 引入公共css文件的简单方法(推荐)
2018/01/20 Javascript
JavaScript引用类型Object常见用法实例分析
2018/08/08 Javascript
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
node.js制作一个简单的登录拦截器
2020/02/10 Javascript
js抽奖转盘实现方法分析
2020/05/16 Javascript
python创建和使用字典实例详解
2013/11/01 Python
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
Python 利用scrapy爬虫通过短短50行代码下载整站短视频
2018/10/29 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
Django restframework 框架认证、权限、限流用法示例
2019/12/21 Python
pytorch的batch normalize使用详解
2020/01/15 Python
pandas和spark dataframe互相转换实例详解
2020/02/18 Python
python GUI库图形界面开发之PyQt5打开保存对话框QFileDialog详细使用方法与实例
2020/02/27 Python
Python并发请求下限制QPS(每秒查询率)的实现代码
2020/06/05 Python
keras实现调用自己训练的模型,并去掉全连接层
2020/06/09 Python
canvas绘图按照contain或者cover方式适配并居中显示
2019/02/18 HTML / CSS
Backcountry旗下的户外商品闪购网站:steep&cheap
2016/09/22 全球购物
static全局变量与普通的全局变量有什么区别
2014/05/27 面试题
社区安全检查制度
2014/02/03 职场文书
运动会稿件100字
2014/02/21 职场文书
《月光启蒙》教学反思
2014/03/01 职场文书
劳动竞赛活动总结
2014/05/05 职场文书
2015军训通讯稿大全
2015/07/18 职场文书
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android