jquery仿京东商品放大浏览页面-创新互联

jquery仿京东商品页面

成都创新互联主营静宁网站建设的网络公司,主营网站建设方案,APP应用开发,静宁h5小程序制作搭建,静宁网站营销推广欢迎静宁等地区企业咨询

京东页面大家都很熟悉，进入商品页面把鼠标放在图片上旁边会出现一个放大的效果，接下来就带大家看看怎么实现的！！！！

仿京东商品页面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;
}

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

当前文章：jquery仿京东商品放大浏览页面-创新互联
网页网址：http://bjjierui.cn/article/pppih.html