学习javascript，实现两个功能：
- 显示隐藏div；
- 通过Tween算法实现div显示和隐藏的缓动效果。
参考链接：缓动效果参考文章：JavaScript html js Tween类型
html代码
Structuring our XHTML
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.
We'll start with structuring our XHTML appropriately:
show more.Structuring our XHTML
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.
We'll start with structuring our XHTML appropriately:
show more.
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
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;
}