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>

赞 (0)

相关推荐

  • 简单的jquery左侧导航栏和页面选中效果

    简单的jquery左侧导航栏和页面选中效果

    这里是要实现导航的左侧并选中的,此功能需引用jquery 左侧导航: <div class="box"> <ul class="menu"> <li class="level1"> <a href="#none" rel="external nofollow" rel="external nofollow" rel="external

  • 利用js编写响应式侧边栏

    为了练手,自己学敲网站时刚好碰到需要制作侧边栏,在网上也查了各种插件以及框架都可以实现这个功能,但是想自己学着用js原生学一个试试,于是就初略完成了侧边栏的实现,可以让初学者参考参考,代码能力有限. 其中主要设计的就是animate()函数,animate() 方法执行 CSS 属性集的自定义动画.该方法通过CSS样式将元素从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:30px").字符串值无法创建动画(比如

  • jQuery固定浮动侧边栏实现思路及代码

    这个功能现在应用的非常普遍,如果页面比较高,当滚动条拖到页面的下面的时候,侧边栏会出现一个固定跟随浏览器的DIV框,现思路是这样的:首先获取需要跟随的DIV距离页面顶部的距离,然后判断,当浏览器滚动的距离大于该DIV本身距离顶部距离的时候,则添加CSS属性fixed即可. 代码如下 HTML代码: <div id="header">header</div> <div id="sidebarWrap"> <div id=&qu

  • JavaScript中实现无缝滚动、分享到侧边栏实例代码

    废话不多说,直接给大家贴代码了,代码解决一起问题! 下面一段代码给大家介绍js无缝滚动实例代码: 代码如下所示: <!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&

  • 博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)

    当一个页面内容很长的时候,侧边栏栏目可能显得太短,当窗口滑动到靠下的位置,则侧边即失去了展示内容的机会.很多新闻资讯类网站如新浪.网易.CSDN等,会在边栏的右下角以固定的小弹窗形式,以提供更多的内容展示方式,但这并不适合博客和web2.0风格的网站. 现在很多的独立博客和网站如人人网等,都使用了让侧边栏模块随滚动条滑动而位置固定的效果.就是当一个页面很长的时候,设定侧栏内容会跟随滚动条,这种效果适用于评论较多.内容较长的网站.志文工作室调研了几种类似功能的实现方法,摘录之以供参考. 参考一.提

  • JS运动框架之分享侧边栏动画实例

    本文实例讲述了JS运动框架之分享侧边栏动画实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html>  <html>      <head>          <meta charset="utf-8">          <title></title>          <style type="text/css">         

  • jQuery插件PageSlide实现左右侧栏导航菜单

    jQuery左右侧栏导航菜单插件PageSlide,目前比较流行的导航菜单展现形式,特别是在手机端或者触屏页面,效果还是不错的,支持自定义展现的方向,菜单内容可自行定义,支持加载页面,或者模态的窗格中显示此页的隐藏的内容,推荐使用. 使用方法: 1.加载插件和jQuery <link rel="stylesheet" type="text/css" href="../jquery.pageslide.css" /> <scrip

  • jQuery侧边栏随窗口滚动实现方法

    复制代码 代码如下: $(function() {    var $sidebar   = $("#sidebar"),           $window    = $(window),           offset     = $sidebar.offset(),           topPadding = 15; $window.scroll(function() {           if ($window.scrollTop() > offset.top) { 

  • Jquery实现侧边栏跟随滚动条固定（兼容IE6）

    部分购物网站用这个功能放购物车或商品分类导航,使产品页面很长的时候,侧边栏能始终固定发挥它应有的作用,有的网站用这个功能来边栏的广告. jQuery代码: 复制代码 代码如下: var rollSet = $('#Roll');// 检查对象,#sidebar-tab是要随滚动条固定的ID,可根据需要更改var offset = rollSet.offset();$(window).scroll(function () { // 检查对象的顶部是否在游览器可见的范围内 var scrollTop

  • javascript实现动态侧边栏代码

    javascript实现动态侧边栏代码

    总的来说就是利用 鼠标悬停onmouseover   和  鼠标移除onmouseout 这两个时间来完成的. 首先是HTML 结构 复制代码 代码如下: <body><div id="div1"><span>侧边栏</span></div></body> 然后是css的样式: 复制代码 代码如下: #div1{    width:150px;    height:200px;    background:#999

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

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

    javascript 实现动态侧边栏 总的来说就是利用 鼠标悬停onmouseover   和  鼠标移除onmouseout 这两个时间来完成的. 首先是HTML 结构 <body> <div id="div1"> <span>侧边栏</span> </div> </body> 然后是css的样式: #div1{ width:150px; height:200px; background:#999999; pos

  • Javascript实现动态菜单添加的实例代码

    Javascript实现动态菜单添加的实例代码

    先来看看效果: Html源码: 复制代码 代码如下: <!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>  <

  • 原生JavaScript实现动态省市县三级联动下拉框菜单实例代码

    原生JavaScript实现动态省市县三级联动下拉框菜单实例代码

    像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能: 先给大家展示下测试结果: 未做任何选择时: 选择时: 代码如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>三级联动测试</titl

  • 基于JavaScript实现动态创建表格和增加表格行数

    在工作,项目需求中,有时候表格的行数不能够满足我们的需求,这时需要我们动态的增加表格的行数,下面小编通过一段代码实例给大家介绍js创建表格和增加表格的行数的方法,并且还实现了隔行变色功能.对此感兴趣的朋友可以参考一下代码: js代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态操作表格</title> </head>

  • 理解Javascript文件动态加载

    理解Javascript文件动态加载

    Javascript文件动态加载一直是比较困扰的一件事情,像网络上传的比较常见的做法: function loadjs(fileurl){ var sct = document.createElement("script"); sct.src = fileurl; document.head.appendChild(sct); } 然后我们来测试一下结果: <html> <head> <link rel="stylesheet" typ

  • 基于JavaScript实现动态添加删除表格的行

    又一个动态控制表格的效果,用JavaScript动态生成表格行.表格列,以及还可动态删除这些行列,行等,运行代码后,点击对应的功能按钮,即可实现对应的表格操作功能. 1.jsp <table id="viewTabs"> <thead> <tr> <th>产品名称</th> <th>编号</th> <th>数量</th> <th>重量</th> <t

  • javascript bind绑定函数代码

    具体结论可参见<javascript下动态this与动态绑定实例代码>.本文专注设计一个无侵入的绑定函数. window.name = "the window object" function scopeTest() { return this.name } // calling the function in global scope: scopeTest() // -> "the window object" var foo = { name:

  • javascript实现动态统计图开发实例

    javascript实现动态统计图开发实例

    本文实例讲述了javascript实现动态统计图的代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下 html代码: <div id="content"> <div class="legend"> <h1>汽车销量:</h1> <div class="skills"> <ul> <li class="jq">大众</

  • 如何用JavaScript实现动态修改CSS样式表

    看过我写的<用JavaScript动态建立或增加CSS样式表的实现方法>之后,你就很容易想明白如何修改CSS样式表了. 正好今天在论坛碰到一位朋友问这样的一个问题: <style> .ls{width=120px;} </style> <script> //在这里加一句来改变.ls中width的值,如何写 </script> 有的朋友回答:"如果使用.ls的对象很多的话,用JS确实不方便, jquery方便,$(".ls&qu

随机推荐