热门源码
|
热门软件
|
高级搜索
|
网站地图
|
文章
·
软件投稿
免费收录你的网站,现在加入广捷居!
庆祝Admin5·站长网广告联盟开通,抢先注册中.
CSS代码在线格式化、美化工具
首页
站长资讯
源码下载
素材图库
脚本特效
电子书籍
专题
开源者社区
智能模糊搜索
资源名称检索
本站推荐
:
共享世纪推荐的2010·互联网建站品牌CMS
Windows/Linux高性能主机
2G 155元,3G 198元,5G 300元,欢迎联系本站站长选购!
仿当当网首页推介折叠滑动效果
脚本类别:
页面布局
添加时间:
2008-06-27
查看次数:
作者:
脚本代码
<!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("/Pri_upfile/jspic/2009/pucker_1.gif") no-repeat left 5px; border-top:1px solid #ccc;} #top5 #box2 {background-image: url("/Pri_upfile/jspic/2009/pucker_2.gif");} #top5 #box3 {background-image: url("/Pri_upfile/jspic/2009/pucker_3.gif");} #top5 #box4 {background-image: url("/Pri_upfile/jspic/2009/pucker_4.gif");} #top5 #box5 {background-image: url("/Pri_upfile/jspic/2009/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="/Pri_upfile/jspic/2009/pucker_img_1.jpg" alt="明朝那些事儿" /> <h2><a href="#">明朝那些事儿</a></h2> <p>作者:当年明月<br />出版社:<a href="http://www.2ky.cn">共享世纪出版社</a><br />出版时间:2006-9-1</p> </div> <div class="hidden" id="box2" onmouseover="pucker_show('box',2,'hidden','show')"> <img src="/Pri_upfile/jspic/2009/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="/Pri_upfile/jspic/2009/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="/Pri_upfile/jspic/2009/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="/Pri_upfile/jspic/2009/pucker_img_5.jpg" alt="求医不如求己2" /> <h2><a href="#">求医不如求己2</a></h2> <p>作者:中里巴人<br />出版社:江苏文艺出版社<br />出版时间:2007-10-1</p> </div> </div> </body> </html>
loading...
当前页面所处路径为
共享世纪
/
脚本特效
/
页面布局
/ ,本特效的Tag为:
共享世纪
有图片素材,如需使用,请自行下载。
会员登陆
close X
用户名
密 码
验证码