仿當當下拉框特效
代碼:
<!doctype html public -//w3c//dtd xhtml 1.0 transitional//en>
<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 class=show id=box1 onmouseover=pucker_show('box',1,'hidden','show')>
<img src=1.jpg alt=明朝那些事兒 />
<h2><a href=#>網站制作學習網1</a></h2>
<p>作者：折疊效果<br />出版社：中國友誼出版社<br />出版時間：2006-9-1</p>
</div>
<div class=hidden id=box2 onmouseover=pucker_show('box',2,'hidden','show')>
<img src=2.jpg alt=別笑,我是英語單詞書 />
<h2><a href=#>網站制作學習網2</a></h2>
<p>作者：折疊效果<br />出版社：陜西師范大學出版社<br />出版時間：2007-9-1</p>
</div>
<div class=hidden id=box3 onmouseover=pucker_show('box',3,'hidden','show')>
<img src=3.jpg alt=求醫不如求己 />
<h2><a href=#>網站制作學習網3</a></h2>
<p>作者：折疊效果<br />出版社：中國中醫藥出版社<br />出版時間：2007-2-1</p>
</div>
<div class=hidden id=box4 onmouseover=pucker_show('box',4,'hidden','show')>
<img src=4.jpg alt=不生病地智慧 />
<h2><a href=#>網站制作學習網4</a></h2>
<p>作者：折疊效果<br />出版社：江蘇文藝出版社<br />出版時間：2007-8-1</p>
</div>
<div class=hidden id=box5 onmouseover=pucker_show('box',5,'hidden','show')>
<img src=5.jpg alt=求醫不如求己2 />
<h2><a href=#>網站制作學習網5</a></h2>
<p>作者：折疊效果<br />出版社：江蘇版社<br />出版時間：2007-10-1</p>
</div>
</div>
</body>
</html>
更多信息請查看IT技術專欄
版權所有:易賢網
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試