This article mainly introduces javascript code for implementing the dynamic sidebar. For more information, see the following. Generally, you can use the time to hover the mouse over onmouseover and remove onmouseout.
First, the HTML Structure
The Code is as follows:
Sidebar
Then the css style:
The Code is as follows:
# P1 {
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.
After the mouse is moved in
The complete code is as follows:
The Code is as follows:
Untitled document
Script
Window. onload = function (){
Var op = document. getElementById ('p1 ');
Op. onmouseover = function ()
{
Startmove (); // The first parameter is the target value of the p left attribute, and the second parameter is the number of pixels moved each time.
}
Op. onmouseout = function ()
{
Startmove (-150,-10 );
}
}
Var timer = null;
Function startmove (target, speed)
{
Var op = document. getElementById ('p1 ');
ClearInterval (timer );
Timer = setInterval (function (){
If (op. offsetLeft = target)
{
ClearInterval (timer );
}
Else
{
Op. style. left = op. offsetLeft + speed + 'px ';
}
}, 30)
}
Script
Sidebar