模拟新浪围脖的间歇性向上滚动显示信息窗口 _Web前端

模拟新浪围脖的间歇性向下滚动显示信息窗口

?大家可以试试看，效果应该完全一致，并且已经在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" onclick="showMessage(this);"/></div>
	
	<div id="container">
		<div style="height:500px;"></div>
	</div>
	
</body>
</html>

1 楼 askjsp 2011-01-24

呵呵，效果好炫，保存了，真的不错哦。。。推荐

2 楼 toeo 2011-01-27

全部用原始的 js 写代码。

不过如果要是要求兼容不同浏览器是否用 jquery 比较好呢。

用 append 或 after 方法将尾部拼接html代码

维护应该简单些吧。

3 楼 rainsilence 2011-01-27

本代码全浏览器兼容。。。

另外,你看过jquery源码吗？你知道他的不足吗？jquery只是玩具,ok?

为什么要做google的奴隶呢？少人云亦云了。用jq的99%都不是高手，却有90%是伸手党。

toeo 写道

全部用原始的 js 写代码。

不过如果要是要求兼容不同浏览器是否用 jquery 比较好呢。

用 append 或 after 方法将尾部拼接html代码

维护应该简单些吧。

另另外，你的评论我只能笑而不语

4 楼 mu0001 2011-05-18

toeo 写道

全部用原始的 js 写代码。

不过如果要是要求兼容不同浏览器是否用 jquery 比较好呢。

用 append 或 after 方法将尾部拼接html代码

维护应该简单些吧。

算了吧，当你会用ＪＳ写的时候，你也不会用ＪＱ写的。

5 楼 xrzs1986 2012-02-07

不错~ 赞一个~