Efeito:
Ideia:
Use o quadro de movimento flutuante multifuncional para obter o efeito Weibo. Primeiro, adicione os atributos na área de texto ao li recém-criado, depois adicione o li ao ul e, em seguida, use o quadro de movimento flutuante para exibir os dados dinamicamente.
Código:
Copie o código do código da seguinte forma:
<head runat="servidor">
<título></título>
<style type="texto/css">
*
{
margem: 0;
preenchimento: 0;
}
#ul1
{
largura: 300px;
altura: 300px;
borda: 1px preto sólido;
margem: 10px automático;
estouro: oculto;
}
#ul1li
{
estilo de lista: nenhum;
preenchimento: 4px;
borda inferior: 1px #999 tracejado;
estouro: oculto;
opacidade: 0;
}
</estilo>
<script type="texto/javascript">
janela.onload=função(){
var btn = document.getElementById('btn');
var txt = document.getElementById('t1');
var oUl = document.getElementById('ul1');
btn.onclick=função(){
var cLi = document.createElement('li');
cLi.innerHTML = txt.value; //Adicionar dados ao li
txt.valor = '';
if (oUl.children.length > 0) { //Determina se já existe li, se sim, insira-o, se não, crie um novo
oUl.insertBefore(cLi, oUl.children[0]);
} outro {
oUl.appendChild(cLi);
}
var iHeight = cLi.offsetHeight; //Obter a altura de li
cLi.style.height = '0';
move(cLi, { height: iHeight }, function () { //Em seguida, use o movimento flutuante para exibir os dados
mover(cLi, { opacidade: 100 });
});
}
}
//------------------------------------------------ ----------------------------------
//Obtém o estilo não interline
function getEstilo(ojb, nome) {
if (ojb.currentStyle) {
retornar ojb.currentStyle[nome];
}
outro {
return getComputedStyle(ojb, false)[nome];
}
}
//Aplicação de buffer de movimento json
//json{attr,finsh}
//json{largura:200,altura:200}
function move(obj, json, fnName) { //obj é o objeto, Json é o atributo do objeto, fnName é a função
clearInterval(obj.timer); //Fecha o temporizador anterior
obj.timer=setInterval(função(){
var timeStop = true; //Registra se todos os atributos foram executados
for (var attr in json) { //Percorre os dados em json
var oGetStyle = 0;
if (attr == 'opacity') { //Julgar transparência
oGetStyle = Math.round(parseFloat(getStyle(obj, attr)) * 100); //A transparência é arredondada e atribuída após a conversão);
}
outro {
oGetStyle = parseInt(getStyle(obj, attr));
}
var velocidade = (json[attr] - oGetStyle) / 5; //Encontrar velocidade
velocidade = velocidade > 0 ? Math.ceil(velocidade) : Math.floor(velocidade);
if (oGetStyle! = json[attr])
timeStop = falso;
if (attr == 'opacidade') { //Transparência
obj.style.filter = 'alpha(opacity:' + (oGetStyle + speed) + ')' //Atribuir um valor à transparência
obj.style.opacity = (oGetStyle + velocidade) / 100;
}
outro {
obj.style[attr] = oGetStyle + velocidade + 'px';
}
}
if (timeStop) { //Se todas as propriedades foram executadas, feche o cronômetro
clearInterval(obj.timer);
if (fnName) { //Função a ser executada quando o timer for desligado
fnNome();
}
}
}, 30)
}
//------------------------------------------------ ----------------------------------
</script>
</head>
<corpo>
<textarea id="t1"></textarea>
<input type="button" id="btn" value="Publicar" />
<ulid="ul1">
<li style="display: nenhum;"></li>
</ul>
</body>