Сегодня я напишу небольшой пример, используя js и css для написания плавающего поля, которое можно автоматически скрывать. CSS определенно используется для управления стилями, а js — для управления отображением и скрытием. Отображение и скрытие обычно реализуются двумя способами: 1. Используйте js для управления атрибутами отображения. 2. Используйте js для управления его размером.
Сегодня мы поговорим о реализации отображения и скрытия элементов, управляя их размером. Принцип таков: регистрируйте событие движения мыши внутрь и наружу. Когда мышь выходит за пределы диапазона объекта, установите ее ширину. 1. Когда мышь снова войдет в объект, установите его ширину на 1. Ширина восстановлена. Это очень просто, давайте посмотрим!
Скрытое состояние:
Узкая линия слева — это плавающая рамка после ее скрытия.
Статус отображения:
Когда указатель мыши наводит курсор на плавающее поле слева, оно снова отображается.
CSS-стиль:
Скопируйте код кода следующим образом:
<стиль>
* {размер шрифта:12 пикселей; семейство шрифтов:Вердана, 宋体;
HTML, тело {маржа: 0 пикселей; дополнение: 0 пикселей;
.b {маржа: 0 пикселей; заполнение: 0 пикселей; переполнение: авто;
.line0 {высота строки: 20 пикселей; цвет фона: светло-желтый; отступ: 0 пикселей 15 пикселей;
.line1 { высота строки: 18 пикселей; цвет фона: светло-синий; отступ: 0 пикселей 10 пикселей;
.w {позиция: абсолютный; верх: 10 пикселей; высота: 300 пикселей; граница: 2 пикселя курсор: по умолчанию; -moz-user-select: none }
.t { высота строки: 20 пикселей; ширина: 160 пикселей; цвет фона: # 27C; цвет шрифта: жирный; граница: 1 пиксель, выравнивание текста: центр }
.winBody { высота: 270 пикселей; ширина: 160 пикселей; переполнение-y: авто; граница-топ: 1 пиксель, вставка синего цвета: 10 пикселей;
</стиль>
JS-код:
Скопируйте код кода следующим образом:
<тип сценария="текст/javascript">
функция myshow(){
//document.getElementById('mydiv').style.display = "none";
document.getElementById('mydiv').style.width = "160px";
} //блокировать
функция myhide(){
//document.getElementById('mydiv').style.display = "block";
document.getElementById('mydiv').style.width="1px";
}
//Для тестирования случайным образом сгенерируйте некоторый контент, чтобы облегчить тестирование.
for(var i=0; i<400; i++)document.write("<div class=/"line"+(i%2)+"/">"+(new Array(20)).join(( Math.random()*1000000).toString(36)+" ")+"<//div>");
новая функция(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 = функция(){
w.style.width = d.documentElement.clientWidth + «px»;
w.style.height = d.documentElement.clientHeight + «px»;
})();
<span style="white-space:pre"> </span>}
</скрипт>
HTML-код:
Скопируйте код кода следующим образом:
<тело>
<div id="mydiv" onmousemove="myshow()" onmouseout="myhide()">
<div>Информация об студентах</div>
<дел>
Идентификатор учащегося: <label>0123456789 </label><br><br>
Имя: <label>Сяо Мин</label><br><br>
Колледж: <label>Колледж программного обеспечения</label><br><br>
Специальность: <label>Разработка программного обеспечения</label><br><br>
Класс: <label>Класс 1</label><br><br>
</div>
</div>
</тело>
Используйте плавающее поле для отображения некоторой информации. Когда вам нужно его увидеть, наведите на него курсор, и оно выйдет, что очень удобно, когда вы уберете мышь, когда оно больше не нужно, оно автоматически уйдет; . Несмотря на то, что он очень простой, он обеспечивает хороший пользовательский опыт. Мы постоянно стремимся создавать вещи, которые делают пользователей удобными.