HTML代码片段
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#container {
width: 300px;
height: 200px;
overflow: hidden;
}
#text {
background-color: #4169E1;
width: 300px;
/*height: 200px;*//* 注意不可以设置高度,否则文字显示不全*/
overflow: hidden;
}
</style>
</head>
<body>
<div id="container">
<div id="text">
<p>我是xxx</p>
<p>我要好好学习</p>
<p>今年26岁</p>
<p>没有对象</p>
<p>没有钱</p>
<p>没有房</p>
</div>
</div>
<input type="button" value="bt" onclick="move1()" />
<input type="text" id="in" value="" />
</body>
</html>
- JavaScript代码片段
<script type="text/javascript">
var h = 0;
var t;
function move1() {
//原理 让元素的marginTop 偏移 超过’元素自身‘高度后 ,从0开始
h -= 1;
var elem = document.getElementById("text");
//offsetHeight 是指元素内容高度
document.getElementById("in").value = elem.offsetHeight;
if(h < -elem.offsetHeight) {
h = 0;
}
elem.style.marginTop = h + "px";
t = setTimeout(move1, 10);
}
function init() {
var cloneEle = document.getElementById("text").cloneNode(true);
document.getElementById("container").appendChild(cloneEle);
}
onload = init;
</script>