大家可以试试看,效果应该完全一致,并且已经在opera,IE,chrome,FF上测试通过
另外在制作过程中的注意点
1.scrollTop属性比较特殊,必须要在内部的div大于外部div的时候才有效果
2.换行要用word-wrap,否则会在FF和opera上失效
3.设置浮动上,IE和其他浏览器存在差异。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<style type="text/css">
body {
font-size:14px;
}
#container {
overflow:hidden;
margin: 0 auto;
width: 400px;
height: 400px;
border-style:solid;
border-width:1px;
}
span {
border-style:solid;
border-width:1px;
}
</style>
<script type="text/javascript">
window.onload = function() {
}
var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
function addMessage(userName, content, button) {
var container = document.getElementById("container");
var messageDiv = createElement("div", {
width:"398px",
height:"auto",
cssFloat:"left"
});
var leftDiv = createElement("div", {
width:"60px",
cssFloat:"left"
});
var rightDiv = createElement("div", {
width:"338px",
cssFloat:"left"
});
var pictureDiv = createElement("div", {
cssFloat:"left",
borderColor:"#BCD",
width:"40px",
marginLeft:"4px",
marginTop:"4px",
height:"40px",
lineHeight:"40px",
textAlign:"center",
borderStyle:"solid",
borderWidth:"1px"
});
pictureDiv.innerHTML = "头像";
leftDiv.appendChild(pictureDiv);
var userDiv = createElement("div", {
wordBreak:"break-all",
wordWrap:"break-word",
marginTop:"4px",
marginBottom:"4px",
fontSize: "12px"
});
userDiv.innerHTML = userName;
var contentDiv = createElement("div", {
wordBreak:"break-all",
wordWrap:"break-word",
marginTop:"4px",
marginBottom:"4px",
fontSize: "14px"
});
contentDiv.innerHTML = content;
var timerDiv = createElement("div", {
height:"10px",
fontSize:"12px",
marginBottom: "10px"
});
timerDiv.innerHTML = "30秒前";
rightDiv.appendChild(userDiv);
rightDiv.appendChild(contentDiv);
rightDiv.appendChild(timerDiv);
messageDiv.appendChild(leftDiv);
messageDiv.appendChild(rightDiv);
var rate = 0;
setOpacity(messageDiv, rate);
if (container.firstChild) {
container.insertBefore(messageDiv, container.firstChild);
container.scrollTop = messageDiv.offsetHeight;
} else {
container.appendChild(messageDiv);
}
var moveTimer = setInterval(function() {
container.scrollTop -= 1;
if (container.scrollTop <= 0) {
container.scrollTop = 0;
clearInterval(moveTimer);
var opacityTimer = setInterval(function() {
rate += .05;
if (rate >= 1) {
rate = 1;
clearInterval(opacityTimer);
button.disabled = false;
}
setOpacity(messageDiv, rate);
}, 40);
}
}, 20);
return container.scrollTop;
}
function createElement(tagName, styles, props) {
var tag = document.createElement(tagName);
if (styles) {
for (var prop in styles) {
if (prop == "cssFloat" && isIE) {
tag.style.styleFloat = styles[prop];
continue;
}
tag.style[prop] = styles[prop];
}
}
if (props) {
for (var prop in props) {
tag.style[prop] = props[prop];
}
}
return tag;
}
function setOpacity(target, rate) {
if (isIE) {
target.style.filter = "alpha(opacity=" + (rate * 100) + ")";
} else {
target.style.opacity = rate;
}
}
function showMessage(button) {
button.disabled = true;
var user = document.getElementById("userName");
var content = document.getElementById("content");
addMessage(user.value, content.value, button);
}
</script>
</head>
<body>
<div>UserName:<input type="text" id="userName" style="width:216px;"/></div>
<div>Message: <textarea id="content" style="resize:none;" rows="3" cols="29"></textarea></div>
<div><input type="button" value="Post Message" οnclick="showMessage(this);"/></div>
<div id="container">
<div style="height:500px;"></div>
</div>
</body>
</html>