教程集 > 脚本编程 > javascript > 正文折叠效果

折叠效果

发布时间：2023-07-04 编辑：jiaochengji.com

教程集为您提供折叠效果等资源，欢迎您收藏本站，我们将为您提供最新的折叠效果资源

提示：您可以先修改部分代码再运行

<!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>  <title> 折叠效果 </title>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  <meta http-equiv="Content-Language" content="zh-CN" />  <meta name="author" content="贰陆" />  <meta name="keywords" content="贰陆空间,Web前端技术,XHTML,CSS,web standard,ECMAscript,Ajax,XML,网页设计,网页美工,ASP,PHP" />  <meta name="description" content="欢迎访问贰陆空间,这里是贰陆的个人博客,记录生活和工作中的点点滴滴,也学习着web前端技术及网页美工设计方面的东西,欢迎大家和我交流,我的电邮是victor.xiao@qq.com" />  <script language="javascript">  function pucker_show(name,no,hiddenclassname,showclassname) {      //name:命名前缀      //no:当前鼠标所处对象的序号      //showclassname:展开状态样式名      //hiddenclassname:折叠状态样式名      for (var i=1 ;i<6 ;i   )      {          document.getElementById(name i).className=hiddenclassname;      }      document.getElementById(name no).className=showclassname;  }  </script>  <style type="text/css">  * {padding:0; margin:0; font:normal 12px "宋体"; text-decoration:none; color:#000;}  a {color:#369;}  a:hover {color:#f00; text-decoration:underline;}  #top5 {width:300px; margin:20px; border-bottom:1px solid #ccc;}  #top5 div {clear:left; padding:5px 0 0 15px; background:#fff url("http://www.awebsite.cn/demo/images/pucker_1.gif") no-repeat left 5px; border-top:1px solid #ccc;}  #top5 #box2 {background-image: url("http://www.awebsite.cn/demo/images/pucker_2.gif");}  #top5 #box3 {background-image: url("http://www.awebsite.cn/demo/images/pucker_3.gif");}  #top5 #box4 {background-image: url("http://www.awebsite.cn/demo/images/pucker_4.gif");}  #top5 #box5 {background-image: url("http://www.awebsite.cn/demo/images/pucker_5.gif");}  #top5 .show img {float:left; width:60px; height:85px; margin:0 5px 5px 0;}  #top5 .show h2 {padding:5px 0;}  #top5 .show p {line-height:150%;}  #top5 .hidden {background-position:left center;background-color:#ffd;}  #top5 .hidden img {display:none;}  #top5 .hidden p {display:none;}  </style>  </head>  <body>  <div id="top5">      <div class="show" id="box1" onmouseover="pucker_show('box',1,'hidden','show')">          <img src="" alt="明朝那些事儿" />          <h2>明朝那些事儿</h2>          <p>作者：当年明月<br />出版社：中国友谊出版社<br />出版时间：2006-9-1</p>      </div>      <div class="hidden" id="box2" onmouseover="pucker_show('box',2,'hidden','show')">          <img src="" alt="别笑,我是英语单词书" />          <h2>别笑,我是英语单词书</h2>          <p>作者：李可<br />出版社：陕西师范大学出版社<br />出版时间：2007-9-1</p>      </div>      <div class="hidden" id="box3" onmouseover="pucker_show('box',3,'hidden','show')">          <img src="" alt="求医不如求己" />          <h2>求医不如求己</h2>          <p>作者：中里巴人<br />出版社：中国中医药出版社<br />出版时间：2007-2-1</p>      </div>      <div class="hidden" id="box4" onmouseover="pucker_show('box',4,'hidden','show')">          <img src="" alt="不生病的智慧" />          <h2>不生病的智慧</h2>          <p>作者：马悦凌<br />出版社：江苏文艺出版社<br />出版时间：2007-8-1</p>      </div>      <div class="hidden" id="box5" onmouseover="pucker_show('box',5,'hidden','show')">          <img src="" alt="求医不如求己2" />          <h2>求医不如求己2</h2>          <p>作者：中里巴人<br />出版社：江苏文艺出版社<br />出版时间：2007-10-1</p>      </div>  </div>  </body>  </html>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
jQuery+CSS 半开折叠效果原理及代码(自写)
Illustrator创建折纸风格的矢量天鹅图绘制教程
 jquery animate()函数实现菜单折叠效果
 jquery原创弹出层折叠效果点击折叠弹出一个层
 基于JQuery的简单实现折叠菜单代码
 js 下拉折叠菜单代码
 jQuery布局插件UI Layout简介及使用方法
 jQuery之折叠面板的深入解析
 jQuery可折叠菜单 Accordion Menu script
JS折叠展开一个二级导航菜单效果

上一篇：JS焦点图联动效果代码下一篇：js拖动效果

[关闭]

折叠效果

最近更新

浏览排行