html文本框

Html

Css

html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input， img {
	margin:0;
	padding:0;
}
fieldset,img {
	border:0;
}
#input {
	width:300px;
	height:100px;
}
.xs {
	width:400px;
	height:400px;
	border:1px solid #5F5F5F;
	margin:0px auto;
	overflow:hidden;
}
.xs ul {
	list-style:none;
}
.xs ul li {
	width:390px;
	height:35px;
	line-height:35px;
	border-bottom:1px dashed #ADADAD;
	padding:0px 0px 0px 10px;
	display:inline-block;
	opacity:0;
}

window.onload = function() {
    var oA = document.getElementById('box');
    var oB = document.getElementById('tijiao');
    var oC = document.getElementById('ul1');

oB.onclick = function() {
        var oLi = document.createElement('li'); //createElement是HTML中应用W3C DOM对像模型建立子节点也就是子元素的概念！
        oLi.innerHTML = oA.value;
        var aLi = document.getElementsByTagName('li');
        if (aLi.length > 0) {
            oC.insertBefore(oLi, aLi[0]); //iE不兼容，因为找不到aLi[0],所以不知道往谁前面加
        } else {
            oC.appendChild(oLi);
        }
        //运动
        var iHeight = oLi.offsetHeight - 2;
        oLi.style.height = '0';

startMove(oLi, {
            height: iHeight
        }, function() {
            startMove(oLi, {
                opacity: 100
            })
        })
    }

}

function getStyle(obj, name) {
    if (obj.currentStyle) {
        return obj.currentStyle[name];
    } else {
        return getComputedStyle(obj, false)[name];
    }
}

//startMove(oDiv, {width: 400, height: 400})

function startMove(obj, json, fnEnd) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        var bStop = true; //假设：所有值都已经到了

for (var attr in json) {
            var cur = 0;

if (attr == 'opacity') {
                cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
            } else {
                cur = parseInt(getStyle(obj, attr));
            }

var speed = (json[attr] - cur) / 2;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

if (cur != json[attr]) {
                bStop = false;
            }

if (attr == 'opacity') {
                obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
                obj.style.opacity = (cur + speed) / 100;
            } else {
                obj.style[attr] = cur + speed + 'px';
            }
        }

if (bStop) {
            clearInterval(obj.timer);

if (fnEnd) {
                fnEnd();
            }
        }
    }, 30);
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.1

立即下载

html文本框



代码描述：html文本追加

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

qzuser

相关代码

html文本框

最新