search

Home >Web Front-end >JS Tutorial >Detailed explanation of javascript implementation of dynamic sidebar examples

Detailed explanation of javascript implementation of dynamic sidebar examples

高洛峰
高洛峰Original
2016-12-07 10:20:281716browse

javascript implements dynamic sidebar

In general, it is completed by using onmouseover and onmouseout.

First is the HTML structure

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

Then the css style: 

#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;}

The default style sidebar is hidden as shown in the picture:

Detailed explanation of javascript implementation of dynamic sidebar examples

When the mouse is moved in, as shown in the picture ：

Detailed explanation of javascript implementation of dynamic sidebar examples

The following is the complete code: 





无标题文档

<script>
window.onload=function(){
  var odiv=document.getElementById(&#39;div1&#39;);
  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(&#39;div1&#39;);
clearInterval(timer);
   timer=setInterval(function (){
     
    if(odiv.offsetLeft==target)
    {
      clearInterval(timer);
      }
      else
      { 
    odiv.style.left=odiv.offsetLeft+speed+&#39;px&#39;;
      }
     
    },30)
   
  }
   
</script>

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


Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed tutorial to get started quickly with MongoDB in NodeJSNext article：Detailed tutorial to get started quickly with MongoDB in NodeJS

Related articles

See more