商品浏览时的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的代码！！！

• 

• 

• 

• 

• 

• 

• 

• 

• 图文介绍
• 评论(1)

暂无好评！

适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗

来源：师徒课堂

仿京东商品页面jquery的代码！！！

$(function(){

var $yin = $(".yin");

$(".Ul li img").mouseover(function(){

$(this).parent().addClass("li").siblings().removeClass("li");

$("#pian").attr("src",$(this).attr("src"));

$("#zhao").attr("src",$(this).attr("src"));

}).mouseout(function(){

$(this).parent().removeClass("li");

});

var l = $(".shang").eq(0).offset().left;

var t = $(".shang").eq(0).offset().top;

var width1 = $(".yin").outerWidth()/2;

var height1 = $(".yin").outerHeight()/2;

var maxL = $(".shang").width() - $yin.outerWidth();

var maxT = $(".shang").height() - $yin.outerHeight();

var bili = $("#zhao").width()/$("#pian").width();

$(".shang").mousemove(function(e){

var maskL = e.clientX - l - width1,maskT = e.clientY - t - height1;

if (maskL < 0) { maskL = 0};

if (maskT < 0) { maskT = 0};

if (maskL > maxL) {maskL = maxL};

if (maskT > maxT) {maskT = maxT};

$yin.css({"left":maskL,"top":maskT});

$(".xia").show();

$(".yin").show();

$("#zhao").css({"margin-left":-maskL*bili,"margin-top":-maskT*bili});

});

$(".shang").mouseleave(function(){

$(".xia").hide();

$(".yin").hide();

});

var marginLeft = 0;

$(".you").click(function(){

marginLeft = marginLeft - 64;

if (marginLeft < -192) {marginLeft = -192};

$(".tab ul").stop().animate({"margin-left":marginLeft},"fast");

});

$(".zuo").click(function(){

marginLeft = marginLeft + 64;

if (marginLeft > 0) {marginLeft = 0};

$(".tab ul").stop().animate({"margin-left":marginLeft},"fast");

});

$(".lie li").click(function(){

var index=$(this).index();

$(this).addClass("ll").siblings().removeClass("ll");

$(".bao1>div").eq(index).show().siblings().hide();

});

});

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

怎么样，当我做出来的时候感觉神清气爽！！！！！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。