javascript 实现动态侧边栏实例详解
更新时间：2016年11月11日 14:10:50 投稿：lqh
这篇文章主要介绍了javascript 实现动态侧边栏实例详解的相关资料,并附实例代码，帮助大家学习理解，需要的朋友可以参考下
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;}
默认的样式 侧边栏是隐藏起来的如图：
当鼠标移入以后如图：
下面是完整代码：
<!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>
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
相关文章
这篇文章主要为大家详细介绍了js实现简单的放大镜效果，可随意更改，放大区域的大小、比例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了js随机抽奖代码效果，大家参考使用2013-12-12
前面已经讲解了 引用，函数重载，作用域和上下文，接下来，讲解JavaScript中另一个重要的知识——闭包。2009-09-09
这篇文章主要介绍了JS在浏览器中解析Base64编码图像的相关资料,需要的朋友可以参考下2017-02-02
想象一个场景，就是如何根据一张图片大概提取出它的主色调呢？获取主色调后，可能会用来设置某些背景颜色，这里，利用 JS 简单获取本地图片主色调，希望对大家有所帮助2023-03-03
这篇文章主要介绍了如何在 JavaScript 数组中插入元素,在本文中,我们学习了使用 splice() 方法将元素添加到数组的开始、末尾或任何位置的各种方法,需要的朋友可以参考下2023-09-09
下面小编就为大家分享一篇JS实现的ajax和同源策略的实例讲解，具有很好的参考价值，希望对大家有所帮助2017-12-12
这篇文章主要介绍了JS实现从对象获取对象中单个键值的方法,涉及javascript数组对象遍历、事件监听、处理等相关操作技巧,需要的朋友可以参考下2019-06-06
这篇文章主要为大家详细介绍了基于javascript实现样式清新图片轮播特效，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-03-03
下面小编就为大家带来一篇原生js封装运动框架的示例讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
最新评论