javaScript
1.
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>StripingTable</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> <!-- $(document).ready(function(){$("#helloDiv").hide(); }); function changeDisplay(){ var helloDivObj = $("#helloDiv"); var buttonObj = $("#btnDisplay"); var val = buttonObj.attr("value"); if(val=="隐藏"){ helloDivObj.hide(); buttonObj.attr("value","显示"); }else{ helloDivObj.show(); buttonObj.attr("value","隐藏"); } } --> </script> </head> <body> <input id="btnDisplay" type="button" value="隐藏" onclick="changeDisplay()" /> <div id="helloDiv"> Hello,everyone<p></p> Hello,everytwo<p></p> Hello,everythree<p></p> </div> </bdoy> </html>
2.
<style> #content { font-size: 14px; width: 100%; height: 50px; background: #eee; padding: 10px; border: 4px #ccc double; overflow: hidden; } #key { color: red; float: right; margin-top: -20px; } span{cursor:pointer;} </style> <script> var s=5; var minheight=50; var maxheight=450; function shoppingcat(){ var content=document.getElementById("content"); var key = document.getElementById("key"); var t=content.style; if(t.height==""||t.height==0) t.height=minheight; var h=parseInt(t.height); if(key.innerHTML=="展开"){ h+=s; t.height=h+"px"; if(h<maxheight){ setTimeout("shoppingcat();",1); }else{ key.innerHTML="关闭"; } }else{ h-=s; t.height=h+"px"; if(h>minheight){ setTimeout("shoppingcat();",1); }else{ key.innerHTML="展开"; } } } </script> <div id="content"><br/> <span id="key" onclick="shoppingcat();">展开</span><br/> 藤床纸帐朝眠起, 说不尽、无佳思。 沈香烟断玉炉寒, 伴我情怀如水。 笛声三弄, 梅心惊破, 多少春情意。 小风疏雨萧萧地, 又催下、千行泪。 吹箫人去玉楼空, 肠断与谁同倚? 一枝折得, 人间天上, 没个人堪寄。 欢迎再次光临 牛图库特效。 </div>
3.
<html xmlns="http://www.w3.org/1999/xhtml"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>www.webjx.com</title> <script language="javascript"> function tablecollapse() { /* Variables */ var collapseClass='footcollapse'; var collapsePic='http://webdesign.chinaitlab.com/UploadFiles_8014/200706/20070620173213376.gif'; var expandPic='http://webdesign.chinaitlab.com/UploadFiles_8014/200706/20070620173213394.gif'; var initialCollapse=true; // loop through all tables var t=document.getElementsByTagName('table'); var checktest= new RegExp("(^|\\s)" + collapseClass + "(\\s|$)"); for (var i=0;i<t.length;i++) { // if the table has not the right class, skip it if(!checktest.test(t[i].className)){continue;} // make the footer clickable t[i].getElementsByTagName('tfoot')[0].onclick=function() { // loop through all bodies of this table and show or hide // them var tb=this.parentNode.getElementsByTagName('tbody'); for(var i=0;i<tb.length;i++) { tb[i].style.display=tb[i].style.display=='none'?'':'none'; } // change the image accordingly var li=this.getElementsByTagName('img')[0]; li.src=li.src.indexOf(collapsePic)==-1?collapsePic:expandPic; } // if the bodies should be collapsed initially, do so if(initialCollapse) { var tb=t[i].getElementsByTagName('tbody'); for(var j=0;j<tb.length;j++) { tb[j].style.display='none'; } } // add the image surrounded by a dummy link to allow keyboard // access to the last cell in the footer var newa=document.createElement('a'); newa.href='#'; newa.onclick=function(){return false;} var newimg=document.createElement('img'); newimg.src=initialCollapse?expandPic:collapsePic; var tf=t[i].getElementsByTagName('tfoot')[0]; var lt=tf.getElementsByTagName('td')[tf.getElementsByTagName('td').length-1]; newa.appendChild(newimg); lt.insertBefore(newa,lt.firstChild); } } // run tablecollapse when the page loads window.onload=tablecollapse; </script> <style type="text/css"> body{ font-family:Arial,Sans-Serif; font-size:90%; background:#cc9; } #boundary{ background:#f8f8f8; padding:2em; width:40em; } h1{ font-family:"Trebuchet MS",Sans-serif; text-transform:uppercase; color:#696; font-size:120%; } table.footcollapse{ width:30em;/* 调整表格宽度*/ } table.footcollapse caption{ font-size:120%; text-transform:uppercase; text-align:left; padding:.5em 30em; } table.footcollapse th{ text-align:left; } table.footcollapse,table.footcollapse th,table.footcollapse th { border:none; border-collapse:collapse; } table.footcollapse thead th { width:10em; border-style:solid; border-width:1px; border-color:#cff #69c #69c #cff; background:#9cf; padding:2px 10px; } table.footcollapse tfoot th, table.footcollapse tfoot td { border-style:solid; border-width:1px; border-color:#9cf #369 #369 #9cf; background:#69c; padding:2px 10px; } table.footcollapse tbody{ background:#ddd; } table.footcollapse tbody td{ padding:5px 10px; border:1px solid #999; } table.footcollapse tbody th{ padding:2px 10px; border:1px solid #999; border-left:none; } table.footcollapse tbody tr.odd{ background:#ccc; } table.footcollapse tfoot td img{ border:none; vertical-align:bottom; padding-left:10px; float:right; } </style> </head> <body> <table summary="CDs I listened to recently" class="footcollapse"> <caption>这个</caption> <thead> <tr> <th>列1</th> <th>列2</th> <th>列3</th> </tr> </thead> <tfoot> <tr> <th>结尾1</th> <td colspan="2">结尾2</td> </tr> </tfoot> <tbody> <tr> <th>值1</th> <td>值2</td> <td>值3</td> </tr> <tr class="odd"> <th>值4</th> <td>值5</td> <td>值6</td> </tr> <tr> <th>值7</th> <td>值8</td> <td>值9</td> </tr> <tr class="odd"> <th>值10</th> <td>值11</td> <td>值12</td> </tr> <tr> <th>值13</th> <td>值14</td> <td>值15</td> </tr> </tbody> </table> </body> </html>
相关推荐
该折叠导航菜单主要涉及以下几个技术点: 1. **jQuery选择器**:jQuery的选择器允许开发者高效地选取DOM元素,例如`$("#id")`选择ID为指定值的元素,`$(".class")`选择所有类名为指定值的元素。在这个导航栏中,...
实现这个功能主要涉及到以下几个jQuery知识点: 1. **选择器**:jQuery 提供了丰富的选择器来选取 HTML 元素,如 `$("#id")` 选择 id 为特定值的元素,`$(".class")` 选择所有 class 匹配的元素。在这个案例中,...
在上述代码中,`#toggleBtn`是用于触发展开和收缩的按钮,而`#content`是我们想要控制显示和隐藏的元素。初始状态下,`#content`是隐藏的,因为CSS样式`display:none;`。 现在,我们将使用jQuery编写JavaScript代码...
在“带缓冲的收缩与展开内容效果”中,主要涉及到以下几个关键知识点: 1. **CSS3 Transitions**:CSS3的过渡属性允许我们在两种样式之间创建平滑的转换。通过指定一个属性和持续时间,我们可以让元素在改变状态时...
总结来说,实现“展开/折叠GridView行”涉及以下几个关键点: 1. 使用JavaScript处理客户端事件,动态改变行的可见性。 2. 利用CSS来区分展开和折叠状态,提升用户体验。 3. 在C#后台处理数据和生成展开/折叠按钮。 ...
知识点主要包括以下几个方面: 1. **JavaScript自定义函数**: 实现收缩与展开效果的核心在于自定义的JavaScript函数。这两个函数分别是`toggle`和`anim`,它们联合起来控制div的高度变化,并产生动画效果。 2. **...
本压缩包中的资源涵盖了几个常见的JavaScript技术,包括导航菜单、图片切换、手风琴效果、弹出框以及切换标签,这些都是网页动态效果实现的核心组件。 首先,让我们详细探讨一下每个知识点: 1. **导航菜单**:...
最后,压缩包中的"js展开收缩"文件可能包含实现这些功能的具体JavaScript代码,你可以下载并根据自己的需求进行调整和优化。 总结一下,创建一个JavaScript驱动的垂直树形导航菜单涉及以下几个步骤: 1. 设计HTML...
在创建一个js折叠导航时,我们需要考虑以下几个关键知识点: 1. **DOM操作**:JavaScript通过Document Object Model (DOM)与网页内容进行交互。为了实现折叠导航,我们需要用到`getElementById`、`...
特别是CSS3的过渡和动画属性,可以实现平滑的展开和收缩效果。同时,CSS的媒体查询(Media Queries)还可以确保菜单在不同设备和屏幕尺寸上的响应式布局。 3. div元素:在HTML中,div是用于分组其他HTML元素的容器...
在本文中,将详细介绍如何使用JavaScript (JS) 技术实现一个三级折叠菜单特效,其中特别指出其他级别在点击展开时,能够自动收缩,从而避免菜单项之间的相互干扰。这种菜单常见于网站导航、下拉列表等场景中,能够...
在实现163网盘折叠菜单的过程中,主要涉及以下几个关键知识点: 1. **HTML 结构**:首先,我们需要用HTML创建菜单的基础结构。这通常包括一个父级容器,用于包含所有的菜单项,以及一系列的子菜单项。每个子菜单项...
在JavaScript中,Outlookbar Menu通常由以下几个关键部分组成: 1. **HTML结构**:首先,我们需要一个HTML结构来呈现菜单的各个部分,如主类别、子类别和链接。这通常包括`<ul>`和`<li>`元素,以及可能的`<div>`或`...
“JS特效-其它代码”标签进一步确认了这个压缩包包含的是与JavaScript相关的代码,可能是用于创建特定效果的自定义脚本。JavaScript特效广泛应用于网页中,如悬停效果、动画、滑块、折叠面板等,而“其它代码”可能...
在伸缩窗口菜单的实现中,jQuery 的强大功能体现在以下几个方面: 1. **选择器**:jQuery 提供了一种简单的方式来选取DOM元素,如 `$("#menu")` 选择ID为 "menu" 的元素,这使得定位和操作菜单元素变得容易。 2. *...
在给定的“javascript常用特效”主题中,我们可以深入探讨以下几个关键知识点: 1. **带按钮轮换横幅广告**:这种效果通常用于网站的首页,通过点击按钮或自动定时切换来展示多张图片或广告内容。它涉及到DOM操作...
首先,定义了几个变量用于后续操作,其中`cur_status`用于记录当前状态,是`"less"`还是`"more"`,分别代表“收缩”和“展开”的状态。 ```javascript var cur_status = "less"; ``` ##### 函数定义 `show_more_...
JS可以处理复杂的菜单结构,使得多级菜单展开和收缩更加便捷,同时避免页面显得过于拥挤。 5. **Nick la的Mac风格的鱼眼效果菜单**: 鱼眼效果指的是菜单项在鼠标悬停时放大,类似Mac OS中的效果。这种设计富有...
在实际开发中,为了实现一个功能完善的左侧导航插件,我们需要考虑以下几个方面: 1. **布局设计**:通常使用CSS(层叠样式表)来设置导航栏的样式,包括颜色、字体、边距等,以及响应式布局,确保在不同屏幕尺寸下...
横向扩展树的实现原理通常包括以下几个关键步骤: 1. **数据解析**:将XML或JSON数据转换为JavaScript对象,每个对象代表树的一个节点。 2. **布局计算**:根据数据结构,计算每个节点的位置,以便在水平方向上正确...