展开和收起的特效

思路是：

容器 包括{ 显示的选项内容， 隐藏的选项内容， 按钮--更多选项/收起}

简单的展示和收起

手机-商品刷选

网络：移动4G 联通3G 电信 3G

价钱：5000以上 4000-4999 3000-3999

特点：JDPhone计划 '0' 元购机 防水 长待机

更多选项+

var phn=document.getElementById("hpn");

alert(phn);

var str=document.getElementById("strHref");

str.onclick=function(){

if( phn.style.display=='none'){

phn.style.display='block';

this.innerHMTL='收起';

}else{

phn.style.display='none';

this.innerHMTL='更多选项+';

}

}

新浪网站的广告效果

body{ margin:0 auto; padding:0; margin:0;}#pn,p{margin:0 auto;width:930px;height:auto;text-align:center;padding:10px;}#pn{ background: #e8e8e8;            height: 60px;            width: 600px;            display: block;            margin: 0 auto;            padding: 5px;            font-size: 9pt;            height: auto;            text-align: center;}p{margin: 0;padding: 0;width: 600px;border-top: solid 4px gray;margin: 0 auto;}var time=300;

var h=0;

function add(){

if(time>0){

time--;

h=h+5;

}else{

return;

}

if(h>=300){

return;

}else{

document.getElementById("pn").style.height=h+'px';  }

setInterval('add()',30);

}

var t=300;

var n=300;

function hide(){

if(t>0){

t--;

n-=5;

}else{

return;

}

if(n<=0){

document.getElementById("pn").style.display='none';

return;

}else{

document.getElementById("pn").style.height=n+'px';

}

setInterval('hide()',30);

}

window.onload=function(){

add();

setInterval('hide()',3000);

document.getElementsByTagName("p").onclick=function(){

add();

}

jquery:toggle()方法

可以依次调用n个指定的函数。

直到最后一个函数，然后重复对这个函数轮番调用

语法:

toggle(fna,fn2,fn3,])

1.jQuery的toggle()方法，可以依次调用N个指定的函数，直到最后一个函数，然后重复对这个函数轮番调用

语法：toggle(fn,fn2,...)

2.jQuery中$(document).ready(function (){})或者 $(function(){}); 等同于window.onload=function (){}

3.jQuery中text()修改文本内容等同于js中的innerText（）。

4.jQuery中html()修改内部HTML代码，等同于JS中的innerHTML()

5.jQuery中show(1000)展开，1000是速度，可选

6.innerHTML与innerText区别

innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签。

innerText指的是从起始位置到终止位置的内容,但它去除Html标签。

$("document").ready(function(){

$(".btn-slide").click(function () {

$("#hpn").slideToggle();

});

})