网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的范文:

 

标题 仿当当下拉框特效
范文
    仿当当下拉框特效
    代码:
    <!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 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>
随便看

 

在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板,是学习及工作的有利工具。

 

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间:2025/5/16 7:14:28