HTML京东商品页面代码,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