Write a small example today, using JS and CSS to write a floating box can be automatically hidden. CSS is definitely used to control the style of JS used to display and hide the controller. Display and hide usually have two methods to achieve: 1, with JS control its display properties, 2, with JS control its size.
Today to say is to control its size to achieve the element of the explicit, principle: for its registered mouse to move in, move out of the event, when the mouse moved out of the object range, its width set to 1, when the mouse moved to the object again, the width of its restore. It's simple, let's have a look together!
Hidden state:
The narrow line on the left is the hidden future of the floating box.
Display Status:
When the mouse slides to the left of the suspension box, the suspension box is displayed again.
CSS style:
Copy Code code as follows:
<style>
* {font-size:12px; Font-family:verdana, XXFarEastFont-Arial;
HTML, body {margin:0px; padding:0px; overflow:hidden;}
. b {margin:0px; padding:0px; overflow:auto;}
. line0 {line-height:20px; background-color:lightyellow; padding:0px 15px;}
. line1 {line-height:18px; background-color:lightblue; padding:0px 10px;}
. w {position:absolute; lift:10px; top:10px; width:1px; height:300px; overflow:hidden; border:2px Groove #281; cursor:def Ault; -moz-user-select:none; }
. t {line-height:20px; height:20px; width:160px; overflow:hidden; Background-color: #27C; color:white; font-weight:bold ; border-bottom:1px outset blue; Text-align:center; }
. winbody {height:270px; width:160px; overflow-x:auto; overflow-y:auto; border-top:1px inset; blue; padding:10px; Background-color:white; }
</style>
JS Code:
Copy Code code as follows:
<script type= "Text/javascript" >
function Myshow () {
document.getElementById (' Mydiv '). Style.display = "None";
document.getElementById (' Mydiv '). Style.width = "160px";
}//block
function Myhide () {
document.getElementById (' Mydiv '). Style.display = "block";
document.getElementById (' Mydiv '). style.width= "1px";
}
Test, randomly generate some content, easy to test the effect.
for (var i=0 i<400; i++) document.write ("<div class=\" line + (i%2) + ">" + (New Array). Join ((Math.random () *1000000). ToString (+ "") + "<\/div>");
New function (W,b,c,d,o) {
D=document;b=d.body;o=b.childnodes;c= "ClassName";
B.appendchild (W=d.createelement ("div")) [c]= "B";
for (var i=0 i<o.length-1; i++) if (o[i][c]!= "W") W.appendchild (O[i)), i--;
(window.onresize = function () {
W.style.width = d.documentelement.clientwidth + "px";
W.style.height = d.documentelement.clientheight + "px";
})();
<span style= "White-space:pre" > </span>}
</script>
HTML code:
Copy Code code as follows:
<body >
<div class= "W" id= "mydiv" onmousemove= "Myshow ()" onmouseout= "Myhide ()" >
<div class= "T" > Student Information </div>
<div class= "Winbody" >
School Number: <label>0123456789 </label><br><br>
Name:<label> xiaoming </label><br><br>
College of:<label> Software Institute </label><br><br>
Professional:<label> Software Engineering </label><br><br>
Class:<label> Class A </label><br><br>
</div>
</div>
</body>
Use a floating box to display some information, when you need to see, point to it, it will obediently come out, very convenient, when not needed when the mouse to move away, it will be very gooseberry himself silently away. Although very simple, but there is a good user experience, to make users comfortable with the things, is our constant pursuit.
