学习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;
}
分享到：
相关推荐
韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记
非常好的学习与复习的资料，讲解非常的详细！
里面包括了韩顺平轻松搞定网页设计的html课堂笔记、css+div课堂笔记、javascript课堂笔记，还有清华大学的html帮助文档很好用，希望对你的学习有所帮助
java学习笔记大全：java内容介绍 java编程可以分成三个方向： 1、java se (j2se)桌面开发 java中的基础中的基础 2、java ee (j2ee)web开发 3、java me (j2me)手机开发 java se课程介绍 java面向对象编程(基础) java...
* c$("$div #text1") // 返回 div 标签里面 id 为"text1"的元素(支持多级查询，以空格分隔) * c$(function(){alert('执行DOM加载完成事件');}); // 为 c$.ready(fun) 的缩写 * * c$.函数名(参数列表) // 调用这...
javascript学习笔记（二） 鼠标经过时，改变div块的背景色的实现代码，当然也可以用css实现。
html代码如下： 代码如下: <div id=”showTime”></div> javascript 代码如下：时间显示格式为：2011-04-04 星期二 12:09:34 代码如下: function startTime() { try{ var today = new Date(); var year = today....
eval的作用其实很简单，就是把一段字符串传递给JS解释器，由...我想大家最基本的使用eval函数都是应该在DOM中，例如我们有div1,div2,div3，那么在document.getElementByID时我们的ID没有办法去得到，那么最简单的办法就
一、事件流 1、冒泡型事件 IE上的解决方案就是冒泡型事件，它的基本思想是从最特定的目标到最不特定的事件目标（document对象）的顺序触发。 过程：按照DOM的层次结构像水泡一样不断上升至顶端。（从里面的div触发...
这是我学习java以来做的一点笔记，包含java hibernate spring struts html+div jsp oracle javascript等的，使用与初学者，希望对你们的学习有所帮助。
学习Javascript要分清 1. js语言本身的语法 2. DOM对象（把body,div,p等节点树看成一个对象） 3. BOM对象（把浏览器的地址栏，历史记录，DOM等庄子啊一个对象）
JS学习笔记相关文档 Login.html学习 placeholder 属性规定可描述输入字段预期值的简短的提示信息（比如：一个样本值或者预期格式的短描述）。 该提示会在用户输入值之前显示在输入字段中。 注意：placeholder 属性...
创建元素节点 document.createElement() 方法 用于创建元素，接受一个参数，即要创建元素的标签名，返回创建的元素节点 代码如下: var div = document.createElement(“div”); //创建一个div元素 div.id = “myDiv...
1.获取元素 getElementById()方法，通过元素的id获取元素，接受一个参数即要获取元素的id，如果不存在这个id返回 null 注意不要让表单元素的name和别的元素的id相同，IE8以下的IE浏览器用这个方法通过元素的name属性...
XPAGE学习笔记 1 Theme 2 2 在Xpage中使用Dojo 2 2.1 加载dojo.js 2 2.2 设置应用程序主题引入tundra.css 2 2.3 设置xpage属性引入dojo模块 3 2.4 Xpage的页面html代码 4 2.5 在xpage中使用dojo编程 4 2.5.1 按钮...
1.输出工具： [removed]()—可以是html alert()—字符串 prompt(text,defaultText) text—可选。要在对话框中显示的纯文本（而不是 HTML 格式的文本）。 defaultText—可选。默认的输入文本。 ...
集合个人3年多的学习资料，总结出来的一套学习笔记。对于各个层面的学习者都有很大帮助
\contentsline {chapter}{Contents}{2}{section*.1} {1}Java基础}{17}{chapter.1} {1.1}基本语法}{17}{section.1.1} {1.2}数字表达方式}{17}{section.1.2} {1.3}补码}{19}{section.1.3} {1.3.1}总结}{23}{...