`
tigerui
  • 浏览: 4231 次
  • 性别: Icon_minigender_1
  • 来自: 西安
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

html Div层的展开与收缩的特效源代码

阅读更多
原文:html Div层的展开与收缩的特效源代码下载

源代码下载地址:http://www.zuidaima.com/share/1550463332338688.htm







div展开收缩代码-www.zuidaima.com-最代码
* { margin:0; padding:0;}
body { text-align:center; font:75% Verdana, Arial, Helvetica, sans-serif;}
h1 { font:125% Arial, Helvetica, sans-serif; text-align:left; font-weight:bolder; background:#333;  padding:3px; display:block; color:#99CC00}
.class1 { width:40%; background:#CCC; position:relative; margin:0 auto; padding:5px;}
span { position:absolute; right:10px; top:8px; cursor: pointer; color:yellow;}
p { text-align:left; line-height:20px; background:#333; padding:3px; margin-top:5px; color:#99CC00}
#class1content, #class2content,#class3content  { height:50px;overflow:hidden;display:none;}

function $(element){
return element = document.getElementById(element);
}
function $D(element){
var d=$(element);
var h=d.offsetHeight;
var maxh=300;
function dmove(){
if(h>=maxh){
d.style.height='300px';
clearInterval(iIntervalId);
}else{
h+=50; //设置层展开的速度
d.style.display='block';
d.style.height=h+'px';
}
}
iIntervalId=setInterval(dmove,2);
}
function $D2(element){
var d=$(element);
var h=d.offsetHeight;
var maxh=300;
function dmove(){
if(h<=0){
d.style.display='none';
clearInterval(iIntervalId);
}else{
h-=50;//设置层收缩的速度
d.style.height=h+'px';
}
}
iIntervalId=setInterval(dmove,2);
}
function $use(targetid,objN){
var d=$(targetid);
var sb=$(objN);
if (d.style.display=="block"){
    $D2(targetid);
       d.style.display="none";
       sb.innerHTML="展开";
  } else {
    var p=document.getElementsByTagName("p");
    var span=document.getElementsByTagName("span");
 
    for(var i=0,l=p.length;i<l;i++){
 if(p[i]!=d){
    p[i].style.height=0;
      p[i].style.display="none";
       span[i].innerHTML="展开"; 
 }
    }
    $D(targetid);
       d.style.display="block";
       sb.innerHTML='收缩';
   }
}




       div展开收缩效果
       展开
       something.........


       div展开收缩效果
       展开
       something.........


       div展开收缩效果
       展开
       wojiade


分享到:
评论

相关推荐

    html Div层的展开与收缩

    html Div层的展开与收缩的特效源代码下载

    CSS层折叠(或收缩)与展开特效

    "CSS层折叠(或收缩)与展开特效"是一个结合了这两种技术,实现网页元素动态显示与隐藏的交互效果。这种效果常见于导航菜单、侧边栏、内容区块等,它允许用户点击后展开或折叠内容,提高用户体验,尤其在内容丰富的...

    jQuery侧边栏菜单收缩特效代码

    在提供的压缩包文件中,"使用帮助.txt"可能包含了关于如何应用这些代码的说明,"谷普下载.url"和"说明.url"可能是下载源和更详细文档的链接,而"jiaoben7295"可能是示例代码文件。通过阅读这些资源,你可以更深入地...

    网站首页可自动收缩的广告代码.zip

    2. **js** 文件夹:这包含了项目的JavaScript源代码。在`main.js`中,你会发现用于控制广告行为的核心代码。这部分代码可能包括了广告的显示、隐藏、自动收缩和扩展的逻辑,以及可能的动画效果。 3. **images** ...

    非常漂亮的jquery前端案例源代码(包含幻灯片切换、图片缩放、相册、放大镜、图片拖着滚动)100个合集.zip

    非常漂亮的jquery前端案例源代码(包含幻灯片切换、图片缩放、相册、放大镜、图片拖着滚动)100个合集: jQuery+CSS实用图片收缩与放大效果插件 jquery+div实现同时滑动切换的图文展示特效插件下载 jquery+div带动画...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    5.jquery+div带动画按钮图片手动与自动切换的特效代码 6.jquery一页多用的飞飞图片幻灯插件演示 7.jquery仿flash产品图片多角度展示特效代码 8.jquery仿flash图片放大相册的插件代码(Zoomer Gallery)下载 9...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. jquery仿flash图片放大相册的插件代码(Zoomer Gallery)下载 9....

    jQuery宽屏滑动缩放手风琴代码.zip

    在提供的文件列表中,`说明.htm`可能是包含代码解释和使用指南的HTML文档,而`jiaoben5470`可能是源代码文件,可能包含HTML、CSS和JavaScript文件,用于实现所述的特效。要查看和应用这个特效,需要将这些文件部署到...

    100多个JQuery效果示例(实例)div+css+javascrpit

    5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. jquery仿flash图片放大相册的插件代码(Zoomer Gallery)下载 9....

    jQuery游戏图片手风琴特效.zip

    在实际开发中,"jiaoben7888"这个文件很可能是项目的源代码,包含了HTML、CSS和JavaScript文件。通过对这些文件的学习和研究,你可以更深入地了解如何将理论知识应用到实践中,进一步提升你的jQuery技能。 总的来说...

    JavaScript_JQuery_CSS_DIV漂亮的实例

    5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. jquery仿flash图片放大相册的插件代码(Zoomer Gallery)下载 9....

    jQuery侧边栏下拉收缩菜单代码

    提供的`jiaoben7572`文件可能是实现这一功能的源代码文件,包括HTML、CSS和JavaScript。`说明.htm`可能是对如何使用这些代码的解释或示例。下载并解压这些文件后,开发者可以在自己的项目中直接引用,或者根据需求...

    爱心源码 html-css 动态跳动的爱心和动态的在一起时间跳动

    `src`目录通常包含了项目的源代码,其中可能有HTML、CSS和JavaScript文件。`.idea`目录是IntelliJ IDEA等IDE的配置文件,包含了项目的元数据和设置,帮助开发者进行代码编辑和调试。 总的来说,这个项目是HTML和CSS...

    纵向手风琴滚动切换.zip

    在"纵向手风琴滚动切换.zip"压缩包中的"jiaoben18389"文件,很可能是该效果的源代码或者示例文件。这个文件可能包含了HTML文件(用于结构布局)、CSS文件(用于样式设定)和JavaScript文件(用于实现动态效果)。...

    jquery 动态示例

    5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. jquery仿flash图片放大相册的插件代码(Zoomer Gallery)下载 9....

    jQuery垂直手风琴个人信息菜单面板代码.zip

    对于有能力进行二次修改的开发者来说,可以通过查看源代码,了解每个部分是如何协同工作的,然后根据需求调整样式、动画速度、触发事件等参数,以满足个性化需求。此外,还可以扩展功能,比如添加过渡动画、实现多级...

Global site tag (gtag.js) - Google Analytics