С тех пор, как я начал изучать фронт, я обычно вижу выдающиеся элементы управления в браузере, которые я хочу реализовать O (∩_∩) o самостоятельно. Интересно, есть ли у вас это чувство. Далее я поделюсь с вами одним. Первоначальный управление поступает из правого нижнего перевода Baidu. Вы можете найти его тщательно, как показано на рисунке:
Это кажется довольно интересным, не сложно реализовать и более подходит для практики. Хорошо, давайте не будем много говорить, просто загрузите код.
HTML -код:
Кода -копия выглядит следующим образом:
<! Doctype html>
<html>
<голова>
<meta charset = 'utf-8'/>
<title> Zoom </title>
<Link rel = "styleSheet" type = "text/css" href = "Zoom.css"/>
</head>
<body onload = "Zoom ()">
<div id = 'Zoom'>
<span title = "share ..."> </span>
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<script type = "text/javascript" src = "Zoom.js"> </script>
</body>
</html>
CSS -код:
Кода -копия выглядит следующим образом:
*{
поля: 0px;
Заполнение: 0px;
}
#zoom {
позиция: абсолютно;
Верх: 20px;
Справа: 200px;
Граница: 1PX твердый RGB (38,147 255);
Высота: 40px;
Ширина: 40px;
}
#zoom> span {
дисплей: встроенный блок;
позиция: абсолютно;
Верх: 0px;
Внизу: 0px;
слева: 0px;
Ширина: 40px;
Справочный Image: url (sprite.png);
Восновная переписка: без повторения;
Справочная позиция: -5px -7px;
непрозрачность: 0,8;
Фильтр: альфа (непрозрачность = 50);/*ie78*/
}
#zoom ul {
дисплей: нет;
позиция: абсолютно;
Верх: 0px;
Внизу: 0px;
Слева: 50px;
Список стиля: нет;
}
#zoom ul li {
дисплей: встроенный блок;
*дисплей: inline;/*ie7*/
*Zoom: 1;/*ie7*/
*Margin-Lefft: 5px;/*ie7*/
Ширина: 16px;
Высота: 16px;
маржинальная версия: 12px;
Справочный Image: url (sprite.png);
Восновная переписка: без повторения;
}
#zoom .li1 {
Справочная позиция: -57px -20px;
}
#zoom .li2 {
Справочная позиция: -77PX -20px;
}
#zoom .li3 {
Справочная позиция: -98PX -20px;
}
#zoom .li4 {
Фоно -позиция: -119px -20px;
}
#zoom .li5 {
Фоно -позиция: -140px -20px;
}
#zoom .li6 {
Справочная позиция: -161PX -20px;
}
#zoom .li7 {
Справочная позиция: -182px -20px;
}
#zoom .li8 {
Справочная позиция: -203px -20px;
}
#zoom li: Hover {
курсор: указатель;
непрозрачность: 0,8;
Фильтр: альфа (непрозрачность = 50);/*ie78*/
}
#zoom Span: Hover {
курсор: указатель;
непрозрачность: 1;
Фильтр: альфа (непрозрачность = 100);/*ie78*/
}
JS -код:
Кода -копия выглядит следующим образом:
var Zoom = (function () {
var Zoomdom = document.getElementById ('Zoom'),
state = {opend: false, onaction: false, длина: 0},
Showspan,
уль;
if (Zoomdom.firstelementchild) {
showspan = Zoomdom.firstelementchild;
ul = showspan.nextelementsibling;
} else { /*ie* /
showspan = Zoomdom.firstchild;
ul = showspan.nextibling;
}
/*Метод совместимого с IE78-совместимым регистрацией*/
var addEvent = function (el, eventtype, eventhandler) {
if (el.addeventlistener) {
El.AddeventListener (EventType, EventHandler, false);
} else if (el.attachevent) {
el.attachevent ('on' + eventtype, eventhandler);/*ie78*/
}
};
/*IE-совместимый метод блокирования событий по умолчанию*/
var stopdefault = function (e) {
if (e && e.preventdefault) {
e.preventdefault ();
} еще {
window.event.returnvalue = false;/*ie*/
}
};
/*Развернуть контроль*/
var onoPen = function () {
if (state.length> 250) {
ul.style.display = 'inline block';
state.onaction = false; state.opened = true;
}еще{
if (! state.onaction) {state.onaction = true;}
state.length += 10;
ZOOMDOM.Style.width = state.length + 'px';
SetTimeout (OnoPen, 0)
}
};
/*Закройте контроль*/
var oncollapse = function () {
if (state.length <41) {
state.onaction = false; state.opened = false;
}еще{
if (! state.onaction) {state.onaction = true;}
state.length -= 10;
ZOOMDOM.Style.width = state.length + 'px';
setTimeout (oncollapse, 0);
}
};
/*Нажмите на обратный вызов кнопки триггера*/
var onspanclick = function (e) {
Stopdefault (e);
if (! state.onaction) {
if (! state.opled) {
OnoPen ();
}еще{
ul.style.display = 'none';
oncollapse ();
}
}
};
return function () {
addEvent (showspan, 'click', onspanclick);
};
}) ();
Следующее изображение - изображение, используемое в CSS (Image ^ _ ^ непосредственно из перевода Baidu):
Все, просто измените имя и поместите его в корневой каталог или напрямую положите два места в CSS:
Кода -копия выглядит следующим образом:
Справочный Image: url (sprite.png);
Изменить на:
Кода -копия выглядит следующим образом:
Fanight-Image: URL (http://images.cnitblog.com/blog2015/680599/201503/110916459332808.png);
Также можно использовать ресурс изображения, который я загрузил напрямую (благодаря мощному Интернету^_^).
Далее следует эффект, который я достиг:
Давайте поговорим о моих основных технических моментах в процессе написания:
Контроль совместим с IE7, и нет IE6 под рукой, поэтому его нельзя проверить. Решенные проблемы основной совместимости помечены в коде.
При использовании технологии Sprites CSS вы должны были обнаружить ее ^_ ^, необходимо использовать хорошую технологию.
Примените закрытие в JS, чтобы избежать глобального загрязнения.
В теге сценария HTML я также замечу эту небольшую деталь (хотя все они являются местными ресурсами ()).
Ну, вот и все, но у этого небольшого контроля все еще есть место для дальнейшего улучшения. Например, вы можете использовать атрибут CSS3 для достижения динамического масштабирования DIV, вы можете компонентизировать это управление и использовать структуру JQ для его более удобного реализации (JQ Practice) и т. Д.
Вышеупомянутое - весь контент, разделенный этой статьей, я надеюсь, что вам понравится.