Efecto:
Idea:
Utilice el marco de movimiento flotante multifuncional para lograr el efecto Weibo. Primero, agregue los atributos en el área de texto al li recién creado, luego agregue el li al ul y luego use el marco de movimiento flotante para mostrar los datos dinámicamente.
Código:
Copie el código de código de la siguiente manera:
<head runat="servidor">
<título></título>
<tipo de estilo="texto/css">
*
{
margen: 0;
relleno: 0;
}
#ul1
{
ancho: 300px;
altura: 300 píxeles;
borde: 1px negro sólido;
margen: 10px automático;
desbordamiento: oculto;
}
#ul1li
{
estilo de lista: ninguno;
relleno: 4px;
borde inferior: 1px #999 discontinuo;
desbordamiento: oculto;
opacidad: 0;
}
</estilo>
<tipo de script="texto/javascript">
ventana.onload = función () {
var btn = document.getElementById('btn');
var txt = document.getElementById('t1');
var oUl = document.getElementById('ul1');
btn.onclick = función () {
var cLi = document.createElement('li');
cLi.innerHTML = txt.value; //Agregar datos a li
txt.valor = '';
if (oUl.children.length > 0) { //Determina si ya existe li, si es así, insértalo, si no, crea uno nuevo
oUl.insertBefore(cLi, oUl.niños[0]);
} demás {
oUl.appendChild(cLi);
}
var iHeight = cLi.offsetHeight //Obtener la altura de li
cLi.estilo.altura = '0';
move(cLi, { height: iHeight }, function () { // Luego usa el movimiento flotante para mostrar los datos
mover(cLi, {opacidad: 100});
});
}
}
//------------------------------------------------ ----------------------------------
//Obtener el estilo sin interlínea
función getStyle(ojb, nombre) {
si (ojb.currentStyle) {
devolver ojb.currentStyle[nombre];
}
demás {
return getComputedStyle(ojb, false)[nombre];
}
}
//Aplicación de buffering motion json
//json{atributo,finsh}
//json{ancho:200,alto:200}
function move(obj, json, fnName) { //obj es el objeto, Json es el atributo del objeto, fnName es la función
clearInterval(obj.timer); //Cerrar el temporizador anterior
obj.timer = setInterval(función () {
var timeStop = true; //Registra si se han ejecutado todos los atributos
for (var attr in json) { //Recorre los datos en json
var oGetStyle = 0;
if (attr == 'opacidad') { //Juzgar la transparencia
oGetStyle = Math.round(parseFloat(getStyle(obj, attr)) * 100 // La transparencia se redondea y luego se asigna después de la conversión);
}
demás {
oGetStyle = parseInt(getStyle(obj, attr));
}
var velocidad = (json[attr] - oGetStyle) / 5; //Buscar velocidad
velocidad = velocidad > 0? Math.ceil(velocidad): Math.floor(velocidad); // Llevar redondeo;
si (oGetStyle! = json[attr])
tiempoParada = falso;
if (attr == 'opacidad') { //Transparencia
obj.style.filter = 'alpha(opacity:' + (oGetStyle + speed) + ')' //Asignar un valor a la transparencia
obj.style.opacity = (oGetStyle + velocidad) / 100;
}
demás {
obj.style[attr] = oGetStyle + velocidad + 'px' //Mover div
}
}
if (timeStop) { //Si se han ejecutado todas las propiedades, cierre el temporizador
clearInterval(obj.temporizador);
if (fnName) { //Función que se ejecutará cuando se apague el temporizador
fnNombre();
}
}
}, 30)
}
//------------------------------------------------ ----------------------------------
</script>
</cabeza>
<cuerpo>
<textarea id="t1"></textarea>
<tipo de entrada="botón" id="btn" valor="Publicar" />
<ul id="ul1">
<li estilo="display: none;"></li>
</ul>
</cuerpo>