仿淘宝商品列表效果，鼠标经过展开详细信息

发布时间：2018-10-05 15:04:32 所属栏目：政策来源：站长网

导读：仿淘宝商品列表效果，鼠标经过展开详细信息，对应的产品会显示出来，显示出图片和商品信息，鼠标移开后自动恢复原状，不但在淘宝有见到这效果，在其它的一些商品网站也都有见到过，一种很流行的CSS列表效果。烈火网提示：由于代码久远，无从考证来自哪个

　　仿淘宝商品列表效果，鼠标经过展开详细信息，对应的产品会显示出来，显示出图片和商品信息，鼠标移开后自动恢复原状，不但在淘宝有见到这效果，在其它的一些商品网站也都有见到过，一种很流行的CSS列表效果。

　　烈火网提示：由于代码久远，无从考证来自哪个网站，因此代码中的图片仅供参考，略有错位，时间关系没有修复，如果您打算使用，请自行修复。

　　示例：

<!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>js实现仿淘宝网的商品展开效果-烈火学院 VeryHuo.COM</title> <script type="text/javascript"> function pucker_show(name,no,hiddenclassname,showclassname) { for (var i=1 ;i<7 ;i++ ) { document.getElementById(name+i).className=hiddenclassname; } document.getElementById(name+no).className=showclassname; } </script> <style> body {font-size:14px;} .right{ width:220px; float:left;} .right .box{ width:218px; float:left; border:#e3dfdb 1px solid; border-top:none; height:229px;} .right .box li{ width:100%; clear:both; margin-top:-1px; display:inline; border-top:#e3dfdb 1px solid;} .right .box .show{ width:209px; height:40px; float:left; padding:12px 2px 12px 7px; background:#fbfdef;} .right .box .show .Num{ width:18px; height:18px; float:left; margin:0 7px 42px 0; display:inline;} .right .box .show .pic{ width:58px; height:58px; border:#e3dfdb 1px solid; float:left; margin-right:10px; display: inline; overflow:hidden;} .right .box .show .infor{ width:110px; float:left;} .right .box .show .title{ width:100%; float:left; line-height:16px;} .right .box .show .marketPrice{ text-decoration:line-through;} .right .box .show .memberPrice{ color:#cc0000; font-size:14px; font-weight:bold;} .right .box .show .memberPrice i{ font-style:normal; font-size:12px;} .right .box .hidden .pic{ display:none;} .right .box .hidden{ width:209px; height:18px; float:left; padding:5px 2px 5px 7px;} .right .box .hidden .Num{ width:18px; height:18px; float:left; margin:0 7px 0px 0; display:inline;} .right .box .hidden .title{ width:174px; float:left; line-height:18px;} .right .box .hidden .marketPrice,.taxGoods .right .box .hidden .memberPrice{ display:none;} </style> </head> <body> <div class="right"> <div class="box"> <ul> <li class="show" id="box1" onmouseover="pucker_show('box',1,'hidden','show')"> <div class="Num"><img src="http://www.veryhuo.com/uploads/common/images/ico1.gif"></div> <div class="pic"><a href=""><img src="http://www.veryhuo.com/uploads/common/images/1_s.jpg" alt="" /></a></div> <div class="infor"> <div class="title"><a href="">鼠标放上去展开</a></div> <div class="marketPrice">￥0000</div> <div class="memberPrice"><i>￥</i>0000</div> </div> </li> <li class="hidden" id="box2" onmouseover="pucker_show('box',2,'hidden','show')"> <div class="Num"><img src="http://www.veryhuo.com/uploads/common/images/ico1.gif"></div> <div class="pic"><a href=""><img src="http://www.veryhuo.com/uploads/common/images/1_s.jpg" alt="" /></a></div> <div class="infor"> <div class="title"><a href="">鼠标放上去展开</a></div> <div class="marketPrice">￥0000</div> <div class="memberPrice"><i>￥</i>0000</div> </div> </li> <li class="hidden" id="box3" onmouseover="pucker_show('box',3,'hidden','show')"> <div class="Num"><img src="http://www.veryhuo.com/uploads/common/images/ico1.gif"></div> <div class="pic"><a href=""><img src="http://www.veryhuo.com/uploads/common/images/1_s.jpg" alt="" /></a></div> <div class="infor"> <div class="title"><a href="">鼠标放上去展开</a></div> <div class="marketPrice">￥0000</div> <div class="memberPrice"><i>￥</i>0000</div> </div> </li> <li class="hidden" id="box4" onmouseover="pucker_show('box',4,'hidden','show')"> <div class="Num"><img src="http://www.veryhuo.com/uploads/common/images/ico1.gif"></div> <div class="pic"><a href=""><img src="http://www.veryhuo.com/uploads/common/images/1_s.jpg" alt="" /></a></div> <div class="infor"> <div class="title"><a href="">鼠标放上去展开</a></div> <div class="marketPrice">￥0000</div> <div class="memberPrice"><i>￥</i>0000</div> </div> </li> <li class="hidden" id="box5" onmouseover="pucker_show('box',5,'hidden','show')"> <div class="Num"><img src="http://www.veryhuo.com/uploads/common/images/ico1.gif"></div> <div class="pic"><a href=""><img src="http://www.veryhuo.com/uploads/common/images/1_s.jpg" alt="" /></a></div> <div class="infor"> <div class="title"><a href="">鼠标放上去展开</a></div> <div class="marketPrice">￥0000</div> <div class="memberPrice"><i>￥</i>0000</div> </div> </li> <li class="hidden" id="box6" onmouseover="pucker_show('box',6,'hidden','show')"> <div class="Num"><img src="http://www.veryhuo.com/uploads/common/images/ico1.gif"></div> <div class="pic"><a href=""><img src="http://www.veryhuo.com/uploads/common/images/1_s.jpg" alt="" /></a></div> <div class="infor"> <div class="title"><a href="">鼠标放上去展开</a></div> <div class="marketPrice">￥0000</div> <div class="memberPrice"><i>￥</i>0000</div> </div> </li> </ul> </div> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：南平站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!