-
摘要和正文查看全部
-
收起与展开实现原理：首先定义一个容器，在容器中显示选项内容和隐藏内容，在容器里放一个按钮，鼠标点击按钮能够执行JavaScript function。在点击按钮展示隐藏层，再把按钮改成hidediv<br>。当一个按钮实现不同的点击功能时，需要修改引用，用element.href属性修改。 使用JavaScript实现动态效果，必须要有高度增加和高度减少事件。动画展开时调用addH()函数，停留一段时间后调用函数subH()减少高度。用onload事件在加载页面完成时调用addH()。用document.getElementById()方法查找元素来控制元素的收起与展开。用onload事件和setTimeout来设置动画。jQuery的toggle()方法，可以依次调用N个指定的函数，直到最后一个函数，然后重复对这个函数轮番调用语法：toggle(fn,fn2,...).jQuery中$(document).ready(function (){})或者 $(function(){}); 等同于window.onload=function (){}jQuery中text()修改文本内容等同于js中的innerText（）。 nextSibling:返回某个元素之后紧跟的元素（处于同一树层级） previousSibling:返回某节点之前紧跟的节点（处于同一树层级） parentNode 父节点查看全部
-
定时展开查看全部
-
显示函数 function showdiv(obj) { var x=obj.parentNode; var y=x.nextSibling; if(y.nodeType!=1){ y=y.nextSibling; } x.style.display="none"; y.style.display="block"; } // 隐藏函数 function hidediv(obj) { var y=obj.parentNode.parentNode; var x=y.previousSibling; if(x.nodeType!=1){ y=y.previousSibling; } y.style.display="none"; x.style.display="block";查看全部
-
通过jQ代码实现展开与收起效果 window.onload=function(){ $('a').bind('click',function(){ if($('a').html()=='更多选项+'){ $('a').html('收起'); $('#hpn').show(); }else{ $('a').html('更多选项+'); $('#hpn').hide(); } }) }查看全部
-
本章讲的是展开与收起的效果 var h=0; //增加高度函数addH() function addh() { if(h<300){ h+=5; document.getElementById('pn').style.hight=h+'px'; } else{ return; } setTimeout('addh()',30); } //网页加载完毕时，调用增加高度函数addH()，等待5秒钟后调用减少高度函数subh()。 window.onload=function(){ addh(); setTimeout('subh()',5000); } // 减少高度函数subH() function subh() { if(h>0){ h-=5; document.getElementById('pn').style.height=h+'px'; } else{ document.getElementById('pn').style.display='none'; return; } setTimeout('subh()',30); }查看全部
-
高度要设置为自动 因为展开的隐藏层考虑查看全部
-
动态效果两个，所以需要写出调用的两个函数，一个是显示隐藏层，一个收起隐藏层查看全部
-
盒子高度要设为自动高度，因为调用隐藏层时需要的高度会增加查看全部
-
思路是先想好需要几个容器，把容器和需要在容器里写的内容写出来查看全部
-
javascript的一个；分号不是用英文格式打的都会导致全部不能正常输出，以后记得打代码时切换输入法而不是切换输入状态，避免经常错误重复检查代码查看全部
-
1.定义js里面放下和收起的函数，再通过p段落引用用展开的函数{ document.getElementById("hpn").style.display ="block"; document.getElementById("strHref").innerHTML="收起-" ; document.getElementById("strHref").href="javascript:hidediv()";} 2.p段落引用 <p class="slide"> <a href="javascript:showdiv()" id="strHref" class="btn-slide">展开</a> <!--点击按钮--> </p> 3.js函数的收起 document.getElementById("hpn").style.display ="none"; document.getElementById("strHref").innerHTML="更多" ; document.getElementById("strHref").href="javascript:showdiv()"; 4.收起同样也需要按钮收起的引用 <p class="slide"> <a href="javascript:showdiv()" id="strHref" class="btn-slide">展开</a> <!--点击按钮--> </p>查看全部
-
代码：font-size:9pt;而自己在编写的时候font-size:9px; 并不影响查看全部
-
大容器查看全部
-
<script type="text/javascript"> //高度增加事件,广告层高度是通过w变量来控制 var W = 0; function addW() { if (W < 950) { W+=15; //将宽度W赋值给广告层 document.getElementById("pn").style.width = W + "px"; } else { return; } setTimeout("addW();", 30); } window.onload = function showAds() { addW(); setTimeout("subW();", 5000); } function subW() { if (W > 0) { W-=15; document.getElementById("pn").style.width = W + "px"; } else {//宽度为0后，隐藏广告层。 document.getElementById("pn").style.display = "none"; return; } setTimeout("subW()", 30); } </script> </head> <body> <div id="pn"> <h1>欢迎来到慕课网</h1> <h2>大幅广告</h2> </div> <p class="foot">慕课网欢迎你</p>查看全部
举报
0/150
提交
取消