折叠滑动效果
代码如下：
<br/><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br/><html xmlns="http://www.w3.org/1999/xhtml"><br/><br/><head><br/><title> 折叠效果</title><br/><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br/><meta http-equiv="Content-Language" content="zh-CN" /><br/><meta name="description" content="xunzou.com" /><br/><script language="javascript"><br/>function pucker_show(name,no,hiddenclassname,showclassname) {<br/> //name:命名前缀<br/> //no:当前鼠标所处对象的序号<br/> //showclassname:展开状态样式名<br/> //hiddenclassname:折叠状态样式名<br/> for (var i=1 ;i<6 ;i++ )<br/> {<br/> document.getElementById(name+i).className=hiddenclassname;<br/> }<br/> document.getElementById(name+no).className=showclassname;<br/>}<br/></script><br/><style type="text/css"><br/>* {padding:0; margin:0; font:normal 12px "宋体"; text-decoration:none; color:#000;}<br/>a {color:#369;}<br/>a:hover {color:#f00; text-decoration:underline;}<br/>#top5 {width:300px; margin:20px; border-bottom:1px solid #ccc;}<br/>#top5 div {clear:left; padding:5px 0 0 15px; background:#fff url("../images/pucker_1.gif") no-repeat left 5px; border-top:1px solid #ccc;}<br/>#top5 #box2 {background-image: url("../images/pucker_2.gif");}<br/>#top5 #box3 {background-image: url("../images//pucker_3.gif");}<br/>#top5 #box4 {background-image: url("../images/pucker_4.gif");}<br/>#top5 #box5 {background-image: url("../images/pucker_5.gif");}<br/>#top5 .show img {float:left; width:60px; height:85px; margin:0 5px 5px 0;}<br/>#top5 .show h2 {padding:5px 0;}<br/>#top5 .show p {line-height:150%;}<br/>#top5 .hidden {background-position:left center;background-color:#ffd;}<br/>#top5 .hidden img {display:none;}<br/>#top5 .hidden p {display:none;}<br/></style><br/></head><br/><br/><body><br/><div id="top5"><br/> <div class="show" id="box1" onmouseover="pucker_show('box',1,'hidden','show')"><br/> <img src="../images/pucker_img_1.jpg" alt="明朝那些事儿" /><br/> <h2><a href="#">明朝那些事儿</a></h2><br/> <p>作者：当年明月<br />出版社：<a href="http://www.xunzou.com">学院出版社</a><br />出版时间：2006-9-1</p><br/> </div><br/> <div class="hidden" id="box2" onmouseover="pucker_show('box',2,'hidden','show')"><br/> <img src="../images/pucker_img_2.jpg" alt="别笑,我是英语单词书" /><br/> <h2><a href="#">别笑,我是英语单词书</a></h2><br/> <p>作者：李可<br />出版社：陕西师范大学出版社<br />出版时间：2007-9-1</p><br/> </div><br/> <div class="hidden" id="box3" onmouseover="pucker_show('box',3,'hidden','show')"><br/> <img src="../images/pucker_img_3.jpg" alt="求医不如求己" /><br/> <h2><a href="#">求医不如求己</a></h2><br/> <p>作者：中里巴人<br />出版社：中国中医药出版社<br />出版时间：2007-2-1</p><br/> </div><br/> <div class="hidden" id="box4" onmouseover="pucker_show('box',4,'hidden','show')"><br/> <img src="../images/pucker_img_4.jpg" alt="不生病的智慧" /><br/> <h2><a href="#">不生病的智慧</a></h2><br/> <p>作者：马悦凌<br />出版社：江苏文艺出版社<br />出版时间：2007-8-1</p><br/> </div><br/> <div class="hidden" id="box5" onmouseover="pucker_show('box',5,'hidden','show')"><br/> <img src="../images/pucker_img_5.jpg" alt="求医不如求己2" /><br/> <h2><a href="#">求医不如求己2</a></h2><br/> <p>作者：中里巴人<br />出版社：江苏文艺出版社<br />出版时间：2007-10-1</p><br/> </div><br/></div><br/></body><br/></html><br/>
0 条留言
我要留言