最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

jquery仿京东商品放大浏览页面_实例分享

来源:懂视网 责编:小OO 时间:2020-11-27 20:06:54
文档

jquery仿京东商品放大浏览页面_实例分享

jquery仿京东商品页面。京东页面大家都很熟悉,进入商品页面把鼠标放在图片上旁边会出现一个放大的效果,接下来就带大家看看怎么实现的。仿京东商品页面css的代码。
推荐度:
导读jquery仿京东商品页面。京东页面大家都很熟悉,进入商品页面把鼠标放在图片上旁边会出现一个放大的效果,接下来就带大家看看怎么实现的。仿京东商品页面css的代码。
前面我们和大家分享过很多仿京东功能的文章,本文我们主要为大家详细介绍jquery仿京东商品浏览页面,鼠标放在图片上实现放大效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。

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的代码!!!

仿京东商品页面的效果!!!

大家觉得怎么样?是不是很有趣,赶紧动手尝试一下吧。

文档

jquery仿京东商品放大浏览页面_实例分享

jquery仿京东商品页面。京东页面大家都很熟悉,进入商品页面把鼠标放在图片上旁边会出现一个放大的效果,接下来就带大家看看怎么实现的。仿京东商品页面css的代码。
推荐度:
标签: 分享 放大 jQuery
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top