ECShop 网上商店系统支持论坛 » 模板美化交流 » 适合多种php版本商城用的div+css折叠图片效果

想来看看 发表于 2008-5-27 23:47

适合多种php版本商城用的div+css折叠图片效果

相信很多人需要这种折叠效果。挺方便的效果，适用于各种用DIV+CSS构建的网站
图片：
[attach]11247[/attach]
演示：[url=http://www.taotaoshow.com/]http://www.taotaoshow.com/[/url]
第一步：在你的对应模版的css文件最后加入
/*---------------------------添加折叠菜单----------------------------------*/
#top5 {width:230px; height:100%;margin:0px; border-bottom:0px solid #F0263A;}
#top5 div {clear:left; padding:10px 0 10px 35px; background:#fff url("p01.gif") no-repeat left 0px; border-top:0px solid #F0263A;}
#top5 #box2 {background-image: url("p02.gif");}
#top5 #box3 {background-image: url("p03.gif");}
#top5 #box4 {background-image: url("p04.gif");}
#top5 #box5 {background-image: url("p05.gif");}
#top5 .show img {float:left; width:170px; height:200px; margin:30px 20px 10px 0px;}/*展示图片170与右对齐20px正好，多一些会错开*/
#top5 .show h2 {padding:5px 0 ;}
#top5 .show p {line-height:150%;}
#top5 .hidden {background-position:left center;background-color:#fff;}
#top5 .hidden img {display:none;}
#top5 .hidden p {display:none;}
第二步：在left.html中适当的位（根据自己需要，也可以放在右边，我自己是放在左边，请灵活运用）置添加
<!-- 加入左侧折叠菜单开始--->
<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>
<div id="top5">
<div class="show" id="box1" >
<img src="flash/tj01.jpg" _fcksavedurl="[url=http://www.taotaoshow.com/]http://www.taotaoshow.com/[/url]" alt="淘淘秀品牌化妆品推荐" />
<span><a href="[url=http://www.taotaoshow.com/]http://www.taotaoshow.com/[/url]" _fcksavedurl="[url=http://www.taotaoshow.com/flash/tj01.jpg]http://www.taotaoshow.com/flash/tj01.jpg[/url]" >淘淘秀化妆品推荐</a></span>
<p>可以加入自己的论坛调用</p>
</div>
<div class="hidden" id="box2" >
<img src="flash/tj02.jpg" _fcksavedurl="[url=http://www.taotaoshow.com/product.php?action=279]http://www.taotaoshow.com/product.php?action=279[/url]" alt="淘淘秀时尚女装推荐" />
<span><a href="[url=http://www.taotaoshow.com/product.php?action=279]http://www.taotaoshow.com/product.php?action=279[/url]" _fcksavedurl="#">淘淘秀时尚女装推荐</a></span>
<p>可以加入自己的论坛调用</p>
</div>
<div class="hidden" id="box3" >
<img src="flash/tj03.jpg" _fcksavedurl="[url=http://www.taotaoshow.com/flash/tj03.jpg]http://www.taotaoshow.com/flash/tj03.jpg[/url]" alt="淘淘秀男士手表推荐" />
<span><a href="[url=http://www.taotaoshow.com/]http://www.taotaoshow.com/[/url]" _fcksavedurl="[url=http://www.taotaoshow.com/]http://www.taotaoshow.com/[/url]">淘淘秀男士手表推荐</a></span>
<p>可以加入自己的论坛调用</script></p>
</div>
<div class="hidden" id="box4" >
<img src="flash/tj04.jpg" _fcksavedurl="[url=http://www.taotaoshow.com/flash/tj04.jpg]http://www.taotaoshow.com/flash/tj04.jpg[/url]" alt="淘淘秀宝宝精品推荐" />
<span><a href="[url=http://www.taotaoshow.com/]http://www.taotaoshow.com/[/url]" _fcksavedurl="[url=http://www.taotaoshow.com/]http://www.taotaoshow.com/[/url]">淘淘秀宝宝精品推荐</a></span>
<p>可以加入自己的论坛调用</script></p>
</div>
<div class="hidden" id="box5" >
<img src="flash/tj05.jpg" _fcksavedurl="[url=http://www.taotaoshow.com/flash/tj05.jpg]http://www.taotaoshow.com/flash/tj05.jpg[/url]" alt="淘淘秀家居礼品推荐" />
<span><a href="[url=http://www.taotaoshow.com/product.php?action=2]http://www.taotaoshow.com/product.php?action=2[/url]" _fcksavedurl="[url=http://www.taotaoshow.com/flash/tj05.jpg]http://www.taotaoshow.com/flash/tj05.jpg[/url]">淘淘秀家居礼品推荐</a></span>
<p>可以加入自己的论坛调用</p>
</div>
</div>
<!-- 加入左侧折叠菜单结束 -->
第三步：图片与内容请手动修改，需要折叠图片也可以下载我网站上的，不过千篇一律就没意思了，建议发挥一下自己的个性
感谢光临淘淘秀商城 [url=http://www.taotaoshow.com]http://www.taotaoshow.com[/url]

lictor 发表于 2008-5-27 23:56

感谢共享！

asooooot 发表于 2008-5-28 00:17

感谢共享！

想来看看 发表于 2008-5-28 09:51

呵呵，不客气，有不明白的可以和我联系

oioishop 发表于 2008-5-28 09:54

感谢共享~~

zhongwu1 发表于 2008-5-28 10:22

*** 作者被禁止或删除 内容自动屏蔽 ***

notask 发表于 2008-5-28 19:50

看了 这个代码有问题 的 少了很多东西 原出处应该是在蓝色理想。
稍后我会把这个无错误的版本发布出来。

qq61415246 发表于 2008-5-28 20:50

s

[size=4]确实不错！[/size]





[img]http://bbs.ecshop.com/images/common/sigline.gif[/img]


[url=http://www.p871.cn/cf.asp?61&caishen][size=4][color=red]诚招发帖推广员，一个点击0.1￥，推荐一个会员0.5￥。[/color][/size][/url]

[url=http://www.p871.cn/cf.asp?61&caishen][size=4][color=red]发发帖子，每天轻轻松松的挣100元！[/color][/size][/url]

想来看看 发表于 2008-5-28 22:16

[quote]原帖由 [i]notask[/i] 于 2008-5-28 19:50 发表 [url=http://bbs.ecshop.com/redirect.php?goto=findpost&pid=183330&ptid=53367][img]http://bbs.ecshop.com/images/common/back.gif[/img][/url]
看了 这个代码有问题 的 少了很多东西 原出处应该是在蓝色理想。
稍后我会把这个无错误的版本发布出来。 [/quote]
请问蓝色理想是哪个地方？这个代码我2004年就有了，很早的时候用在asp上，我不知道你说的是不是同一个出处

[[i] 本帖最后由 想来看看 于 2008-5-29 12:01 编辑 [/i]]

不拘小节 发表于 2008-6-3 09:23

好东西，正缺这个呢

小东西 发表于 2008-6-15 21:51

不错啊，支持，能转成2.6的版本吗？

想来看看 发表于 2008-9-11 20:52

可以用的

小东西 发表于 2008-10-17 20:17

图片大小可以调整吗？

tiger21 发表于 2008-10-18 00:40

这个风格在Firefox下游览，一塌糊涂 。。。。;P

小东西 发表于 2008-10-18 21:58

是哦，楼主的模板是有些问题，火狐下不兼容

不过折叠代码还不错，可以使用

查看完整版本: 适合多种php版本商城用的div+css折叠图片效果