Desde que comecei a aprender o front-end, geralmente vejo alguns controles excelentes no navegador que quero implementar o (∩_∩) o sozinho. Eu me pergunto se você tem esse sentimento. Em seguida, vou compartilhar com você um. O controle original vem do canto inferior direito da tradução do Baidu. Você pode encontrá -lo com cuidado, como mostrado na figura:
Parece bastante interessante, não complicado de implementar e é mais adequado para praticar. OK, não vamos falar muito, basta fazer o upload do código.
Código HTML:
A cópia do código é a seguinte:
<! Doctype html>
<html>
<head>
<meta charset = 'utf-8'/>
<title> zoom </title>
<link rel = "Stylesheet" type = "text/css" href = "zoom.css"/>
</head>
<corpo onload = "zoom ()">
<div id = 'zoom'>
<span title = "compartilhar ..."> </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>
Código CSS:
A cópia do código é a seguinte:
*{
margem: 0px;
preenchimento: 0px;
}
#Zoom {
Posição: Absoluto;
topo: 20px;
Direita: 200px;
borda: 1px RGB sólido (38.147.255);
Altura: 40px;
Largura: 40px;
}
#Zoom> span {
Exibição: bloco embutido;
Posição: Absoluto;
Top: 0px;
Inferior: 0px;
Esquerda: 0px;
Largura: 40px;
imagem de fundo: URL (sprite.png);
Repetição de fundo: sem repetição;
Posição de fundo: -5px -7px;
Opacidade: 0,8;
filtro: alfa (opacidade = 50);/*ie78*/
}
#Zoom ul {
Exibir: Nenhum;
Posição: Absoluto;
Top: 0px;
Inferior: 0px;
Esquerda: 50px;
estilo de lista: nenhum;
}
#Zoom ul li {
Exibição: bloco embutido;
*Exibição: inline;/*ie7*/
*zoom: 1;/*ie7*/
*margem-esquerda: 5px;/*ie7*/
Largura: 16px;
Altura: 16px;
Margin-top: 12px;
imagem de fundo: URL (sprite.png);
Repetição de fundo: sem repetição;
}
#Zoom .li1 {
Posição de fundo: -57px -20px;
}
#Zoom .li2 {
Posição de fundo: -77px -20px;
}
#Zoom .li3 {
Posição de fundo: -98px -20px;
}
#Zoom .li4 {
Posição de fundo: -119px -20px;
}
#Zoom .li5 {
Posição de fundo: -140px -20px;
}
#Zoom .li6 {
Posição de fundo: -161px -20px;
}
#Zoom .li7 {
Posição de fundo: -182px -20px;
}
#Zoom .li8 {
Posição de fundo: -203px -20px;
}
#Zoom Li: Hover {
Cursor: Ponteiro;
Opacidade: 0,8;
filtro: alfa (opacidade = 50);/*ie78*/
}
#Zoom Span: Hover {
Cursor: Ponteiro;
opacidade: 1;
filtro: alfa (opacidade = 100);/*ie78*/
}
Código JS:
A cópia do código é a seguinte:
var zoom = (function () {
var zoomdom = document.getElementById ('zoom'),
estado = {aberto: false, onaction: false, comprimento: 0},
showspan,
ul;
if (zoomdom.firstElementChild) {
showspan = zoomdom.firstElementChild;
ul = showspan.nextElementsibling;
} else { /*ie* /
showspan = zoomdom.firstchild;
ul = showspan.nextsibling;
}
/*IE78 Método de evento de registro compatível com
var addEvent = function (el, EventType, EventHandler) {
if (el.addeventListener) {
El.AddeventListener (EventType, EventHandler, false);
} else if (el.attachevent) {
El.attachevent ('on' + EventType, EventHandler);/*ie78*/
}
};
/*Isto é, método de bloqueio de eventos padrão compatível com
var stopDefault = function (e) {
if (e && e.preventDefault) {
E.PreventDefault ();
} outro {
window.event.returnValue = false;/*ie*/
}
};
/*Expanda o controle*/
var onoopen = function () {
if (state.length> 250) {
ul.style.display = 'inline-block';
state.onaction = false; state.opened = true;
}outro{
if (! state.onaction) {state.onaction = true;}
state.Length += 10;
zoom.style.width = state.length + 'px';
setTimeout (Onopen, 0)
}
};
/*Feche o controle*/
var oncollapse = function () {
if (state.length <41) {
state.onaction = false; state.opened = false;
}outro{
if (! state.onaction) {state.onaction = true;}
state.length -= 10;
zoom.style.width = state.length + 'px';
setTimeout (oncollapse, 0);
}
};
/*Clique no retorno de chamada do botão de gatilho*/
var onSpanclick = function (e) {
StopDefault (e);
if (! state.onaction) {
if (! state.opened) {
ONOPEN ();
}outro{
ul.style.display = 'nenhum';
OnCollapse ();
}
}
};
Return function () {
addEvent (showspan, 'click', onspanclick);
};
}) ();
A figura a seguir é a imagem usada no CSS (imagem ^ _ ^ diretamente da tradução do Baidu):
Todos, basta mudar o nome e colocá -lo no diretório raiz, ou colocar diretamente dois lugares no CSS:
A cópia do código é a seguinte:
imagem de fundo: URL (sprite.png);
Mudar para:
A cópia do código é a seguinte:
Antecedentes-Imagem: URL (http://images.cnitblog.com/blog2015/680599/201503/110916459332808.png);
Também não há problema em usar o recurso de imagem que carreguei diretamente (graças à poderosa Internet^_^).
Em seguida, é o efeito que consegui:
Vamos falar sobre meus principais pontos técnicos durante o processo de escrita:
O controle é compatível com o IE7 e não há IE6 em mãos, por isso não pode ser testado. Os principais problemas de compatibilidade resolvidos estão marcados no código.
Com o uso da tecnologia CSS Sprites, você deve ter descoberto ^_ ^, uma boa tecnologia precisa ser usada.
Aplique fechamentos no JS para evitar a poluição global.
Na etiqueta de script HTML, também notarei esses pequenos detalhes (embora sejam todos recursos locais ()).
Bem, é isso, mas esse pouco controle ainda tem espaço para melhorias adicionais. Por exemplo, você pode usar o atributo CSS3 para obter escala dinâmica do DIV, você pode componente esse controle e usar a estrutura JQ para implementá -lo de maneira mais conveniente (JQ Practice), etc.
O exposto acima é todo o conteúdo compartilhado por este artigo, espero que gostem.