zoukankan      html  css  js  c++  java
  • javascript实现动态侧边栏

    总的来说就是利用 鼠标悬停onmouseover   和  鼠标移除onmouseout 这两个时间来完成的。

    首先是HTML 结构

    <body>
    <div id="div1">
    <span>侧边栏</span>
    </div>
    </body>

    然后是css的样式:

    #div1{
        150px;
        height:200px;
        background:#999999;
        position:absolute;
        left:-150px;}
    span{
        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>

    大家如果有什么建议可以提出来!!谢谢!!

  • 相关阅读:
    安装scrapy解决Microsoft Visual C++ 14.0 is required...
    django一对多模型以及如何在前端实现
    django实现分页功能
    django实现搜索功能
    pycharm里生成requirements.txt
    ubuntu中pwntools安装
    获取一个图片的颜色html代码
    对class文件进行反编译
    Django项目将debug模式设置为false时,静态文件出错
    Django中在xadmin中集成DjangoUeditor
  • 原文地址:https://www.cnblogs.com/phpshen/p/3555026.html
Copyright © 2011-2022 走看看