标题 | 仿当当下拉文件 |
内容 | 仿当当图片下拉框特效.来源于网络 查看效果:仿当当下拉文件 代码: <!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="description" content="" /> <script language="javascript"> function pucker_show(name,no,hiddenclassname,showclassname) { 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("1.gif") no-repeat left 5px; border-top:1px solid #ccc;} #top5 #box2 {background-image: url("2.gif");} #top5 #box3 {background-image: url("3.gif");} #top5 #box4 {background-image: url("4.gif");} #top5 #box5 {background-image: url("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 id="box1" onmouseover="pucker_show('box',1,'hidden','show')"> <img src="1.jpg" /> <h2><a href="#">网站制作学习网1</a></h2> <p>作者:折叠效果<br />出版社:中国友谊出版社<br />出版时间:2006-9-1</p> </div> <div id="box2" onmouseover="pucker_show('box',2,'hidden','show')"> <img src="2.jpg" /> <h2><a href="#">网站制作学习网2</a></h2> <p>作者:折叠效果<br />出版社:陕西师范大学出版社<br />出版时间:2007-9-1</p> </div> <div id="box3" onmouseover="pucker_show('box',3,'hidden','show')"> <img src="3.jpg" /> <h2><a href="#">网站制作学习网3</a></h2> <p>作者:折叠效果<br />出版社:中国中医药出版社<br />出版时间:2007-2-1</p> </div> <div id="box4" onmouseover="pucker_show('box',4,'hidden','show')"> <img src="4.jpg" /> <h2><a href="#">网站制作学习网4</a></h2> <p>作者:折叠效果<br />出版社:江苏文艺出版社<br />出版时间:2007-8-1</p> </div> <div id="box5" onmouseover="pucker_show('box',5,'hidden','show')"> <img src="5.jpg" /> <h2><a href="#">网站制作学习网5</a></h2> <p>作者:折叠效果<br />出版社:江苏文艺出版社<br />出版时间:2007-10-1</p> </div> </div> </body> </html> |
随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。