折叠滑动效果

?
<!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=”http://www.awebsite.cn/demo/images/pucker_img_1.jpg” alt=”明朝那些事儿” />
?? ??? <h2><a href=”#”>明朝那些事儿</a></h2>
?? ??? <p>作者:当年明月<br />出版社:中国友谊出版社<br />出版时间:2006-9-1</p>
</div>
<div class=”hidden” id=”box2″ onmouseover=”pucker_show(‘box’,2,’hidden’,’show’)”>
?? ??? <img src=”http://www.awebsite.cn/demo/images/pucker_img_2.jpg” alt=”别笑,我是英语单词书” />
?? ??? <h2><a href=”#”>别笑,我是英语单词书</a></h2>
?? ??? <p>作者:李可<br />出版社:陕西师范大学出版社<br />出版时间:2007-9-1</p>
</div>
<div class=”hidden” id=”box3″ onmouseover=”pucker_show(‘box’,3,’hidden’,’show’)”>
?? ??? <img src=”http://www.awebsite.cn/demo/images/pucker_img_3.jpg” alt=”求医不如求己” />
?? ??? <h2><a href=”#”>求医不如求己</a></h2>
?? ??? <p>作者:中里巴人<br />出版社:中国中医药出版社<br />出版时间:2007-2-1</p>
</div>
<div class=”hidden” id=”box4″ onmouseover=”pucker_show(‘box’,4,’hidden’,’show’)”>
?? ??? <img src=”http://www.awebsite.cn/demo/images/pucker_img_4.jpg” alt=”不生病的智慧” />
?? ??? <h2><a href=”#”>不生病的智慧</a></h2>
?? ??? <p>作者:马悦凌<br />出版社:江苏文艺出版社<br />出版时间:2007-8-1</p>
</div>
<div class=”hidden” id=”box5″ onmouseover=”pucker_show(‘box’,5,’hidden’,’show’)”>
?? ??? <img src=”http://www.awebsite.cn/demo/images/pucker_img_5.jpg” alt=”求医不如求己2″ />
?? ??? <h2><a href=”#”>求医不如求己2</a></h2>
?? ??? <p>作者:中里巴人<br />出版社:江苏文艺出版社<br />出版时间:2007-10-1</p>
</div>
</div>
</body>
</html>
赞(0) 打赏
未经允许不得转载:WEB前端开发 » 折叠滑动效果

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏