通过JS+CSS实现列表与图片方式切换

2009-05-19 更新公司电子商务站的商品展示页，通过JS+CSS实现列表与图片方式切换

列表方式：

 

图片方式：

写得不好，各位多指教

CSS如下：

.provi{width:750px;height:auto;margin-top:10px;}
.provi a img{border:solid 1px #ddd;}
.provi ul.lstv {margin:0px; padding:0px; list-style:none;}
.lstv li{width:740px;height:122px; overflow:hidden;border-style:dotted;border-color:#ddd;border-width:0 0 1px 0; padding:5px;margin-bottom:5px;}
.lstv div{float:left;margin-left:5px;}
.lstv p{padding:0;margin:8px 0;color:#999;}
.lstv span.tsp{color:#333;}
.lstv .dvimg{width:122px;height:122px;}
.lstv .dvimg img{width:120px;height:120px;}
.lstv .dvpinf{width:340px; height:120px; }
.lstv .dvprice{width:100px; height:120px; }
.lstv .dvprice .curpri{color:#ee0000;margin:50px 0 0 0; text-align:center; font-size:14px;}
.lstv .dvprice .baseprice{font-size:10px;margin-top:2px;text-align:center;}
.lstv .dvnum{width:50px; height:65px;padding-top:55px; text-align:center; overflow:hidden;}
.lstv .dvbut{width:90px;height:90px;margin-top:30px; overflow:hidden; text-align:center;}
.lstv .dvbut .butbuy{width:90px;height:20px;margin:5px 0;}
.lstv .dvbut .butview{width:90px;height:20px;margin:5px 0;}
.lstv .dvpinf .dvpname{color:#333; font-weight:bold; font-size:13px;}
.lstv .dvpinf .dvpcode{}
.lstv .dvpinf .dvdesp{}
.provi ul.picv{margin:0px auto; padding:0px; list-style:none;color:#333; width: 700px; }
.picv li{width:150px;height:200px;margin:10px; overflow:hidden;float:left;}
.picv .dvimg{width:122px;height:122px;margin:0px auto;}
.picv .dvimg img{width:120px;height:120px;}
.picv p{padding:0;margin:0;color:#999;}
.picv .dvpinf{width:150px;height:30px; overflow:hidden;margin-top:5px;}
.picv .dvpinf .dvpname{color:#333; font-weight:bold; font-size:13px;}
.picv .dvpinf .dvpcode{display:none;}
.picv .dvpinf .dvdesp{display:none;}
.picv .dvprice{width:150px; height:20px; overflow:hidden; }
.picv .dvprice .curpri{color:#ee0000;margin:0; text-align:center; font-size:12px;height:20px;line-height:20px;}
.picv .dvprice .baseprice{display:none;}
.picv .dvnum{display:none;}
.picv .dvbut{width:150px;height:30px;text-align:center;}
.picv .dvbut .butbuy{}
.picv .dvbut .butview{display:none;}

 

HTML如下：

<div class="provi">

　　　　<!-- 变成图片方式只需将这个class改成picv -->
            <ul class="lstv">
                <li>
                    <div class="dvimg"><a href="#"><img src="/nopic.jpg" alt="" /></a></div>
                    <div class="dvpinf">
                        <p class="dvpname">
                            这里是商品名称，商品名称商品名称商品名称名称商品名称名称商品名称
                        </p>
                        <p class="dvpcode">
                            <span class="tsp">商品编号：</span>1234567890
                        </p>
                        <p class="dvdesp">
                            <span class="tsp">商品介绍：</span>这只是一个测试商品，相关介绍在库里相关介绍在库里相关介绍在库里相关介绍在库里相关介绍在库里相关介绍在库里相关介绍在库里
                        </p>
                    </div>
                    <div class="dvprice">
                        <p class="curpri">￥123456.00</p>
                        <p class="baseprice"><span class="tsp">市场价：</span>123456.00</p>
                    </div>
                    <div class="dvnum">
                        <span>12345件</span>
                    </div>
                    <div class="dvbut">
                        <div class="butview">
                            <input type="image" src="/App_Themes/BaseSkin/list_buy.gif" alt="" />
                        </div>
                        <div class="butbuy">
                            <input type="image" src="/App_Themes/BaseSkin/list_buy.gif" alt="" />
                        </div>
                    </div>
                </li>
                <li>
                    <div class="dvimg"><a href="#"><img src="/nopic.jpg" alt="" /></a></div>
                    <div class="dvpinf">
                        <p class="dvpname">
                            这里是商品名称，商品名称商品名称商品名称名称商品名称名称商品名称
                        </p>
                        <p class="dvpcode">
                            <span class="tsp">商品编号：</span>1234567890
                        </p>
                        <p class="dvdesp">
                            <span class="tsp">商品介绍：</span>这只是一个测试商品，相关介绍在库里相关介绍在库里相关介绍在库里相关介绍在库里相关介绍在库里相关介绍在库里相关介绍在库里
                        </p>
                    </div>
                    <div class="dvprice">
                        <p class="curpri">￥123456.00</p>
                        <p class="baseprice"><span class="tsp">市场价：</span>123456.00</p>
                    </div>
                    <div class="dvnum">
                        <span>12345件</span>
                    </div>
                    <div class="dvbut">
                        <div class="butview">
                            <input type="image" src="/App_Themes/BaseSkin/list_buy.gif" alt="" />
                        </div>
                        <div class="butbuy">
                            <input type="image" src="/App_Themes/BaseSkin/list_buy.gif" alt="" />
                        </div>
                    </div>
                </li>
                <li>
                    <div class="dvimg"><a href="#"><img src="/nopic.jpg" alt="" /></a></div>
                    <div class="dvpinf">
                        <p class="dvpname">
                            这里是商品名称，商品名称商品名称商品名称名称商品名称名称商品名称
                        </p>
                        <p class="dvpcode">
                            <span class="tsp">商品编号：</span>1234567890
                        </p>
                        <p class="dvdesp">
                            <span class="tsp">商品介绍：</span>这只是一个测试商品，相关介绍在库里相关介绍在库里相关介绍在库里相关介绍在库里相关介绍在库里相关介绍在库里相关介绍在库里
                        </p>
                    </div>
                    <div class="dvprice">
                        <p class="curpri">￥123456.00</p>
                        <p class="baseprice"><span class="tsp">市场价：</span>123456.00</p>
                    </div>
                    <div class="dvnum">
                        <span>12345件</span>
                    </div>
                    <div class="dvbut">
                        <div class="butview">
                            <input type="image" src="/App_Themes/BaseSkin/list_buy.gif" alt="" />
                        </div>
                        <div class="butbuy">
                            <input type="image" src="/App_Themes/BaseSkin/list_buy.gif" alt="" />
                        </div>
                    </div>
                </li>
                <li>
                    <div class="dvimg"><a href="#"><img src="/nopic.jpg" alt="" /></a></div>
                    <div class="dvpinf">
                        <p class="dvpname">
                            这里是商品名称，商品名称商品名称商品名称名称商品名称名称商品名称
                        </p>
                        <p class="dvpcode">
                            <span class="tsp">商品编号：</span>1234567890
                        </p>
                        <p class="dvdesp">
                            <span class="tsp">商品介绍：</span>这只是一个测试商品，相关介绍在库里相关介绍在库里相关介绍在库里相关介绍在库里相关介绍在库里相关介绍在库里相关介绍在库里
                        </p>
                    </div>
                    <div class="dvprice">
                        <p class="curpri">￥123456.00</p>
                        <p class="baseprice"><span class="tsp">市场价：</span>123456.00</p>
                    </div>
                    <div class="dvnum">
                        <span>12345件</span>
                    </div>
                    <div class="dvbut">
                        <div class="butview">
                            <input type="image" src="/App_Themes/BaseSkin/list_buy.gif" alt="" />
                        </div>
                        <div class="butbuy">
                            <input type="image" src="/App_Themes/BaseSkin/list_buy.gif" alt="" />
                        </div>
                    </div>
                </li>
                <li>
                    <div class="dvimg"><a href="#"><img src="/nopic.jpg" alt="" /></a></div>
                    <div class="dvpinf">
                        <p class="dvpname">
                            这里是商品名称，商品名称商品名称商品名称名称商品名称名称商品名称
                        </p>
                        <p class="dvpcode">
                            <span class="tsp">商品编号：</span>1234567890
                        </p>
                        <p class="dvdesp">
                            <span class="tsp">商品介绍：</span>这只是一个测试商品，相关介绍在库里相关介绍在库里相关介绍在库里相关介绍在库里相关介绍在库里相关介绍在库里相关介绍在库里
                        </p>
                    </div>
                    <div class="dvprice">
                        <p class="curpri">￥123456.00</p>
                        <p class="baseprice"><span class="tsp">市场价：</span>123456.00</p>
                    </div>
                    <div class="dvnum">
                        <span>12345件</span>
                    </div>
                    <div class="dvbut">
                        <div class="butview">
                            <input type="image" src="/App_Themes/BaseSkin/list_buy.gif" alt="" />
                        </div>
                        <div class="butbuy">
                            <input type="image" src="/App_Themes/BaseSkin/list_buy.gif" alt="" />
                        </div>
                    </div>
                </li>
                <li>
                    <div class="dvimg"><a href="#"><img src="/nopic.jpg" alt="" /></a></div>
                    <div class="dvpinf">
                        <p class="dvpname">
                            这里是商品名称，商品名称商品名称商品名称名称商品名称名称商品名称
                        </p>
                        <p class="dvpcode">
                            <span class="tsp">商品编号：</span>1234567890
                        </p>
                        <p class="dvdesp">
                            <span class="tsp">商品介绍：</span>这只是一个测试商品，相关介绍在库里相关介绍在库里相关介绍在库里相关介绍在库里相关介绍在库里相关介绍在库里相关介绍在库里
                        </p>
                    </div>
                    <div class="dvprice">
                        <p class="curpri">￥123456.00</p>
                        <p class="baseprice"><span class="tsp">市场价：</span>123456.00</p>
                    </div>
                    <div class="dvnum">
                        <span>12345件</span>
                    </div>
                    <div class="dvbut">
                        <div class="butview">
                            <input type="image" src="/App_Themes/BaseSkin/list_buy.gif" alt="" />
                        </div>
                        <div class="butbuy">
                            <input type="image" src="/App_Themes/BaseSkin/list_buy.gif" alt="" />
                        </div>
                    </div>
                </li>
                <li>
                    <div class="dvimg"><a href="#"><img src="/nopic.jpg" alt="" /></a></div>
                    <div class="dvpinf">
                        <p class="dvpname">
                            这里是商品名称，商品名称商品名称商品名称名称商品名称名称商品名称
                        </p>
                        <p class="dvpcode">
                            <span class="tsp">商品编号：</span>1234567890
                        </p>
                        <p class="dvdesp">
                            <span class="tsp">商品介绍：</span>这只是一个测试商品，相关介绍在库里相关介绍在库里相关介绍在库里相关介绍在库里相关介绍在库里相关介绍在库里相关介绍在库里
                        </p>
                    </div>
                    <div class="dvprice">
                        <p class="curpri">￥123456.00</p>
                        <p class="baseprice"><span class="tsp">市场价：</span>123456.00</p>
                    </div>
                    <div class="dvnum">
                        <span>12345件</span>
                    </div>
                    <div class="dvbut">
                        <div class="butview">
                            <input type="image" src="/App_Themes/BaseSkin/list_buy.gif" alt="" />
                        </div>
                        <div class="butbuy">
                            <input type="image" src="/App_Themes/BaseSkin/list_buy.gif" alt="" />
                        </div>
                    </div>
                </li>
                <li>
                    <div class="dvimg"><a href="#"><img src="/nopic.jpg" alt="" /></a></div>
                    <div class="dvpinf">
                        <p class="dvpname">
                            这里是商品名称，商品名称商品名称商品名称名称商品名称名称商品名称
                        </p>
                        <p class="dvpcode">
                            <span class="tsp">商品编号：</span>1234567890
                        </p>
                        <p class="dvdesp">
                            <span class="tsp">商品介绍：</span>这只是一个测试商品，相关介绍在库里相关介绍在库里相关介绍在库里相关介绍在库里相关介绍在库里相关介绍在库里相关介绍在库里
                        </p>
                    </div>
                    <div class="dvprice">
                        <p class="curpri">￥123456.00</p>
                        <p class="baseprice"><span class="tsp">市场价：</span>123456.00</p>
                    </div>
                    <div class="dvnum">
                        <span>12345件</span>
                    </div>
                    <div class="dvbut">
                        <div class="butview">
                            <input type="image" src="/App_Themes/BaseSkin/list_buy.gif" alt="" />
                        </div>
                        <div class="butbuy">
                            <input type="image" src="/App_Themes/BaseSkin/list_buy.gif" alt="" />
                        </div>
                    </div>
                </li>
                <li>
                    <div class="dvimg"><a href="#"><img src="/nopic.jpg" alt="" /></a></div>
                    <div class="dvpinf">
                        <p class="dvpname">
                            这里是商品名称，商品名称商品名称商品名称名称商品名称名称商品名称
                        </p>
                        <p class="dvpcode">
                            <span class="tsp">商品编号：</span>1234567890
                        </p>
                        <p class="dvdesp">
                            <span class="tsp">商品介绍：</span>这只是一个测试商品，相关介绍在库里相关介绍在库里相关介绍在库里相关介绍在库里相关介绍在库里相关介绍在库里相关介绍在库里
                        </p>
                    </div>
                    <div class="dvprice">
                        <p class="curpri">￥123456.00</p>
                        <p class="baseprice"><span class="tsp">市场价：</span>123456.00</p>
                    </div>
                    <div class="dvnum">
                        <span>12345件</span>
                    </div>
                    <div class="dvbut">
                        <div class="butview">
                            <input type="image" src="/App_Themes/BaseSkin/list_buy.gif" alt="" />
                        </div>
                        <div class="butbuy">
                            <input type="image" src="/App_Themes/BaseSkin/list_buy.gif" alt="" />
                        </div>
                    </div>
                </li>
                <li>
                    <div class="dvimg"><a href="#"><img src="/nopic.jpg" alt="" /></a></div>
                    <div class="dvpinf">
                        <p class="dvpname">
                            这里是商品名称，商品名称商品名称商品名称名称商品名称名称商品名称
                        </p>
                        <p class="dvpcode">
                            <span class="tsp">商品编号：</span>1234567890
                        </p>
                        <p class="dvdesp">
                            <span class="tsp">商品介绍：</span>这只是一个测试商品，相关介绍在库里相关介绍在库里相关介绍在库里相关介绍在库里相关介绍在库里相关介绍在库里相关介绍在库里
                        </p>
                    </div>
                    <div class="dvprice">
                        <p class="curpri">￥123456.00</p>
                        <p class="baseprice"><span class="tsp">市场价：</span>123456.00</p>
                    </div>
                    <div class="dvnum">
                        <span>12345件</span>
                    </div>
                    <div class="dvbut">
                        <div class="butview">
                            <input type="image" src="/App_Themes/BaseSkin/list_buy.gif" alt="" />
                        </div>
                        <div class="butbuy">
                            <input type="image" src="/App_Themes/BaseSkin/list_buy.gif" alt="" />
                        </div>
                    </div>
                </li>
               
            </ul>
        </div>

转载于:https://www.cnblogs.com/rumeo/archive/2010/03/28/1698824.html