Today I will write a small example, using js and css to write a floating box that can be automatically hidden. CSS is definitely used to control styles, and js is used to control display and hiding. Displaying and hiding are usually implemented in two ways: 1. Use js to control its display attributes; 2. Use js to control its size.
What we are going to talk about today is to realize the display and hiding of elements by controlling their size. The principle is: register the event of mouse movement in and out. When the mouse moves out of the object range, set its width to 1. When the mouse moves into the object again, set its width to 1. Width restored. It’s very simple, let’s take a look!
Hidden state:
The narrow line on the left is the floating frame after hiding it.
Display status:
When the mouse slides over the floating box on the left, the floating box will be displayed again.
CSS style:
Copy the code code as follows:
<style>
* { font-size:12px; font-family:Verdana, 宋体; }
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:default; -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 the 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";
}
//For testing, randomly generate some content to facilitate testing effects.
for(var i=0; i<400; i++)document.write("<div class=/"line"+(i%2)+"/">"+(new Array(20)).join(( Math.random()*1000000).toString(36)+" ")+"<//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 the code code as follows:
<body>
<div id="mydiv" onmousemove="myshow()" onmouseout="myhide()">
<div>Student Information</div>
<div>
Student ID: <label>0123456789 </label><br><br>
Name: <label>Xiao Ming</label><br><br>
College: <label>Software College</label><br><br>
Major: <label>Software Engineering</label><br><br>
Class: <label>Class 1</label><br><br>
</div>
</div>
</body>
Use a floating box to display some information. When you need to see it, point to it and it will come out, which is very convenient; when you move the mouse away when it is no longer needed, it will silently leave on its own. Although it is very simple, it has a good user experience. Making things that make users comfortable is our constant pursuit.