时间:2021-07-01 10:21:17 帮助过:5人阅读
jquery仿京东商品页面
京东页面大家都很熟悉,进入商品页面把鼠标放在图片上旁边会出现一个放大的效果,接下来就带大家看看怎么实现的!!!!
仿京东商品页面css的代码!!!
*{ margin: 0; padding: 0; } .da{ width: 360px; height: 418px; float: left; } .shang{ width: 350px; height: 350px; border: 1px solid #ccc; margin: 10px 0 10px 10px; position: relative; } .yin{ width: 150px; height: 150px; border: 1px solid #ccc; background: rgba(255,255,255,0.3); position: absolute; top:0; left: 0; cursor: pointer; display: none; } .bao{ width: 362px; height: 56px; } .tab{ width: 320px; height: 56px; margin-left: 10px; overflow: hidden; } .Ul{ width: 9999px; height: 56px; } .Ul li{ width: 52px; height: 52px; float: left; border: 2px solid #ccc; margin-left: 8px; list-style: none; position:relative; text-align:center; } .li{ width: 52px; height: 52px; border: 2px solid #FF7403; } .li img{ display: block; position: absolute; top:50%; left: 50%; margin-top:-26px; margin-left:-26px; } .zuo{ display: block; width: 12px; height: 56px; background: url(../img/icon_clubs.gif) no-repeat; background-size: 180px 608px; background-position: -82px -462px; float: left; margin-left: 10px; } .you{ display: block; width: 12px; height: 56px; background: url(../img/icon_clubs.gif) no-repeat; background-size: 180px 608px; background-position: -95px -462px; float: right; margin-top: -56px; } .xia{ width: 360px; height: 418px; border: 1px solid #ccc; float: left; margin: 10px 0 0px 20px; overflow: hidden; display: none; } .lie{ width: 1329px; height: 30px; margin-left: 10px; margin-top: 20px; border-bottom: 2px solid #BE0000; } .lie li{ float: left; list-style: none; width: 80px; height: 28px; background: #fff; border-radius: 3px; border: 0; line-height: 30px; text-align: center; margin-right: 5px; border:1px solid #BE0000; color: #c30; cursor: pointer; font-weight: bold; } .lie>ul .ll{ width: 80px; height: 30px; background: #BE0000; border-radius: 3px; border: 0; line-height: 30px; text-align: center; color: #fff; cursor: pointer; } .nie{ width: 1329px; height: 200px; margin-left: 10px; overflow: hidden; } .bao1{ width: 1329px; height: 500px; } .up{ width: 1329px; height: 200px; } .up span{ display: block; padding:10px 0 0 10px; margin-bottom: 70px; } .up p{ text-align: center; margin-top: 5px; } .down{ width: 1329px; height: 300px; background: yellow; }
仿京东商品页面html的代码!!!
<p> <p class="da "> <p class="shang"> <img src="img/b1.jpg" height="350" width="350" id="pian"> <p class="yin"></p> </p> <p class="bao"> <span class="zuo"></span> <p class="tab"> <ul class="Ul"> <li> <img src="img/b1.jpg" height="52" width="52" /> </li> <li> <img src="img/b2.jpg" height="52" width="52" /> </li> <li> <img src="img/b3.jpg" height="52" width="52" /> </li> <li> <img src="img/b1.jpg" height="52" width="52" /> </li> <li> <img src="img/b2.jpg" height="52" width="52" /> </li> <li> <img src="img/b3.jpg" height="52" width="52" /> </li> <li> <img src="img/b1.jpg" height="52" width="52" /> </li> <li> <img src="img/b2.jpg" height="52" width="52" /> </li> </ul> </p> <span class="you"></span> </p> <p class="lie "> <ul> <li class="ll">图文介绍</li> <li>评论(1)</li> </ul> </p> <p class="nie"> <p class="bao1"> <p class="up"> <span>暂无好评!</span> <p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗</p> <p>来源:师徒课堂</p> </p> <p class="down"> <img src="img/11.png" height="300" width="1329" /> </p> </p> </p> </p> <p class="xia"> <img src="img/b1.jpg" height="600" width="600" id="zhao" /> </p> </p>
仿京东商品页面jquery的代码!!!
仿京东商品页面的效果!!!
大家觉得怎么样?是不是很有趣,赶紧动手尝试一下吧。
相关推荐:
仿京东快报向上滚动的实例_javascript技巧
用vue.js模仿京东省市区三级联动的选择组件
Html+Css新手简单快速仿京东商品分类导航_html/css_WEB-ITnose
以上就是jquery仿京东商品放大浏览页面_实例分享的详细内容,更多请关注Gxl网其它相关文章!