javascript学习笔记（1）缓动效果显示隐藏div

taro

浏览: 136765 次
性别:
来自: 东京

最近访客更多访客>>

dddlstudio

m635674608

jimlaren

katty

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Javascript

缓动效果显示隐藏div tween javascript

学习javascript，实现两个功能：

显示隐藏div；
通过Tween算法实现div显示和隐藏的缓动效果。

参考链接：缓动效果参考文章：JavaScript html js Tween类型

html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/hidden.css" media="all" />
		<script src="js/hidden.js" type="text/javascript" ></script>
	</head>
	<body>
		<div id="wrapper">
			<div class="contents">
				<div class="content">
					<h1>Structuring our XHTML</h1>
					<p>There are plenty of reasons why you might feel the urge to wax verbose on your website's front page: to prevent your users from having to click through to a new page to find your information, to avoid having to reload the page, or even to improve your front page's SEO. But just because your front page is text-heavy doesn't mean it all needs to be visible at once.Today's tutorial will show you how to hide away extra bits of content using CSS and JavaScript, to be revealed at the click of a button. This is a great technique, because displaying the additional content doesn't require a refresh or navigation to a new page and all your content is still visible to search engine bots that don't pay any attention to CSS or JavaScript.</p>
					<p>We'll start with structuring our XHTML appropriately:</p>
					<div class="show">show more.</div>
					<div class="hidden" style="display:none">
						<p>There are three things of importance here: the "show" anchor, the "hide" anchor, and our "hidden" div. Each has been given an ID and a class. The IDs are used by our JavaScript to locate and style the items appropriately. I'm then using the classes to set our "default" CSS. Technically you could just use the IDs the set that CSS as well, but if you wanted more than one hidden section on your page, that could get messy.</p>
						<p>You'll notice in the code above that all of our IDs are fairly similar. This is a trick I'm using to simplify our JavaScript, as you'll see later on down the road, so I suggest doing something similar. The class names have no relationship to the JavaScript whatsoever, and could really be whatever you wanted them to be.</p>
					</div>
				</div>
				<div class="content">
					<h1>Structuring our XHTML</h1>
					<p>There are plenty of reasons why you might feel the urge to wax verbose on your website's front page: to prevent your users from having to click through to a new page to find your information, to avoid having to reload the page, or even to improve your front page's SEO. But just because your front page is text-heavy doesn't mean it all needs to be visible at once.Today's tutorial will show you how to hide away extra bits of content using CSS and JavaScript, to be revealed at the click of a button. This is a great technique, because displaying the additional content doesn't require a refresh or navigation to a new page and all your content is still visible to search engine bots that don't pay any attention to CSS or JavaScript.</p>
					<p>We'll start with structuring our XHTML appropriately:</p>
					<div class="show">show more.</div>
					<div class="hidden" style="display:none">
						<p>There are three things of importance here: the "show" anchor, the "hide" anchor, and our "hidden" div. Each has been given an ID and a class. The IDs are used by our JavaScript to locate and style the items appropriately. I'm then using the classes to set our "default" CSS. Technically you could just use the IDs the set that CSS as well, but if you wanted more than one hidden section on your page, that could get messy.</p>
						<p>You'll notice in the code above that all of our IDs are fairly similar. This is a trick I'm using to simplify our JavaScript, as you'll see later on down the road, so I suggest doing something similar. The class names have no relationship to the JavaScript whatsoever, and could really be whatever you wanted them to be.</p>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

javascript代码

document.onclick = click;
function click(ev) {
	ev = ev || window.event;
	var target = ev.target || ev.srcElement;
	if(target.className=="show") {
		/* 找到兄弟元素 div.show and div.hidden are brothers, their parent is div.content*/
		var hid = target.nextSibling;
		/* 清除空格回车元素 Clear the space between two div tags. Why could this happen? 
		* Because we type a space between two div tags for looking indently.*/
		if(hid.nodeName=="#text" && /\s/.test(hid.nodeValue)){
			hid = hid.nextSibling; /* Get the div#hidtext  */
		}
		if(hid.style.display=='none') {
			hid.style.display = "block";
			swithcer("block", target);
			open(hid);
		}
		else if(hid.style.display == 'block') {
			close(hid);
			swithcer("none", target);
		}
	}
}
var Tween = {
	Quad: {
		easeOut: function(t,b,c,d) {
			return -c*(t/=d)*(t-2) + b;
		}
	},
	Back: {
		easeOut: function(t,b,c,d,s){
			if (s == undefined) s = 1.70158;
			return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
		}
	}
}
function open(hid) {
	var t=0, b=0, c=150, d=75;
	function run() {
		hid.style.height = Math.ceil(Tween.Back.easeOut(t,b,c,d)) + "px";
		if(t<d) {
			t++;
			setTimeout(run, 10);
		}
	}
	run();
}
function close(hid) {
	var t=0, b=0, c=150, d=75, invald=10;
	function run() {
		hid.style.height = Math.ceil(Math.abs(150 - Tween.Quad.easeOut(t,b,c,d))) + "px";
		if(t<d) {
			t++;
			setTimeout(run, invald);
		}
	}
	run();
	function none() {
		hid.style.display = "none";
	}
	setTimeout(none, invald*(d+30));
}

function swithcer (status, target){
	/* if the hidden area becomes visable. switch the button to "hidden area"*/
	if(status == "block") {
		target.innerHTML = "hidden it.";
		target.style.background = "url(\"img/show_hidden.png\") no-repeat scroll 0 -40px #f0c8a0";
	} 
	else if (status == "none") {
		target.innerHTML = "show more.";
	target.style.background = "url(\"img/show_hidden.png\") no-repeat scroll 0 0 #E4F9F8";
	}
}

css代码

p, span {
	margin:0;
}
#wrapper {
	width:960px;
	margin:30px auto;
	padding:20px 0;
	background:#ececec;
}
.contents {
	margin:0 15px;
	padding:5px 10px;
	border:#feb800 dotted 2px;
}
.content p {
	text-indent:20px;
	line-height:120%;
	margin-top:5px;
}
.show {
	width:200px;
	padding-left:25px;
	margin-top:5px;
	font-weight:bold;
	background:#E4F9F8 url(../img/show_hidden.png) 0 0 no-repeat;
	border:#000 dotted 1px;
	cursor:pointer;
}
.hidden {
	display:none; 
	background:#f0c8a0;
	margin:5px 10px;
	padding:0 5px;
	overflow:hidden;
	border:black dotted 1px;
}

hidden.zip (7.7 KB)
下载次数: 15

分享到：

javascript学习笔记（2） js调用外部css ... | 不用jQuery，闲的蛋疼，写个文档对象拖拽功 ...

2011-12-12 13:26
浏览 2869
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript学习笔记（1）缓动效果显示隐藏div

html代码

javascript代码

css代码

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript学习笔记（1） 缓动效果显示隐藏div

html代码

javascript代码

css代码

评论

发表评论

相关推荐

浏览器userAgent大全

为jQuery slideshow增加触摸滑动功能

Javascript实现图片预加载【回调函数，多张图片】

javascript学习笔记（3） 杂记

jQuery lightBox plugin 源码读后感【原创】

Javascript Dimensions

javascript学习笔记（2） js调用外部css样式表的style值， 获得一个不能预知高度的DIV的高度

不用jQuery，闲的蛋疼，写个文档对象拖拽功能

最近访客更多访客>>

javascript学习笔记（1）缓动效果显示隐藏div

javascript学习笔记（3）杂记

javascript学习笔记（2） js调用外部css样式表的style值，获得一个不能预知高度的DIV的高度