jQuery复制的京东产品放大浏览页面

模仿京东商品页面
景东葩格对每个人都很熟悉，输入商品页面，把鼠标放在图片上，接下来会有放大效果，然后我们会告诉你如何实现它！！！！！

仿京东商品页面CSS代码！！！

* {
保证金：0；
填充：0；
}
大{。
宽度：360px；
身高：418px；
浮点数：左；
}
上{。
宽度：350px；
身高：350px；
边境：1px solid # CCC；
保证金：0 10px 10px 10px；
职位：相对；
}
阴{。
宽度：150px；
身高：150px；
边境：1px solid # CCC；
背景：RGBA（255255255,0.3）；
位置：绝对；
顶部：0；
左：0；
光标：指针；
显示：无；
}
宝{。
宽度：362px；
身高：56px；
}
{。
宽度：320px；
身高：56px；
左：10px保证金；
溢出：隐藏；
}
UL {。
宽度：9999px；
身高：56px；
}
UL认证
宽度：52px；
身高：52px；
浮点数：左；
边境：2px固体# CCC；
左：8px保证金；
列表样式：无；
职位：相对；
文本对齐：中心；
}
李{。
宽度：52px；
身高：52px；
边境：2px固体# ff7403；
}
李img {。
显示块；
位置：绝对；
顶部：50%；
左：50%；
边距：- 26px；
margin-left: - 26px；
}
左{。
显示块；
宽度：12px；
身高：56px；
背景：URL（。 / / icon_clubs IMG .webp）不重复；
背景尺寸：180px 608px；
背景位置：- 82px - 462px；
浮点数：左；
左：10px保证金；
}
你{。
显示块；
宽度：12px；
身高：56px；
背景：URL（。 / / icon_clubs IMG .webp）不重复；
背景尺寸：180px 608px；
背景位置：- 95px - 462px；
浮子：右边；
边距：- 56px；
}
夏{。
宽度：360px；
身高：418px；
边境：1px solid # CCC；
浮点数：左；
保证金：0 0px 20px 10px；
溢出：隐藏；
显示：无；
}

谎言{。
宽度：1329px；
身高：30px；
左：10px保证金；
边距：20px；
底部边框：2px固体# be0000；
}
李李
浮点数：左；
列表样式：无；
宽度：80px；
身高：28px；
背景：# FFF；
边界半径：3px；
边界：0；
行高：30px；
文本对齐：中心；
右边距：5px；
边境：1px solid # be0000；
颜色：# C30；
光标：指针；
字体粗细：粗体；
}
谎言
宽度：80px；
身高：30px；
背景：# be0000；
边界半径：3px；
边界：0；
行高：30px；
文本对齐：中心；
颜色：# FFF；
光标：指针；
}
聂{。
宽度：1329px；
身高：200px；
左：10px保证金；
溢出：隐藏；
}
1 {。
宽度：1329px；
身高：500px；
}
，{
宽度：1329px；
身高：200px；
}
上跨{
显示块；
填充物：00 10px 10px；
边距：70px；
}
向上{ {
文本对齐：中心；
边距：5px；
}
下{。
宽度：1329px；
身高：300px；
背景：黄色；
}

仿京东商品页面html代码！！！




图文介绍
评论（1）

没有赞美的时间。
浏览器：IE8、360、Firefox、Chrome、Safari、Opera、搜狗、傲游、世界之窗
资料来源：师徒班

仿京东商品页面jQuery代码！！！

$（函数（）{（））
var $ = $（）；
$（。ul IMG）。Mouseover（function（）{（）{）
$（这）。父（），AddClass（李），兄弟姐妹（）。RemoveClass（李）；
$（#片）Attr（src。
$（#赵）Attr（src。
}）。Mouseout（function（）{）
$（这）。父（），RemoveClass（李）；
}）；

var = $（）。EQ（0）；
var = $（）。EQ（0）；
米= $（var。尹）。OuterWidth（） / 2；
无功height1 = $（。尹）。OuterHeight（） / 2；
VaR最大值= $（商），Width（）（）yin.outerwidth美元；
VaR MaxT =美元（商），Height（）（）yin.outerheight美元；
Var Bili = $（#赵）（宽度）/ $（#片）（宽度）；

$（商）。Mousemove（function（e）{
无功maskl = e.clientx - L - 1，maskt = e.clienty - T - height1；
如果（maskl＜0）maskl = { 0 }；
如果（maskt＜0）maskt = { 0 }；
如果（maskl > maxl）{ maskl =最大值}；
如果（maskt > MaxT）{ maskt = MaxT }；

yin.css美元（{左：maskl，顶：maskt }）；
$（）；
$（）；
$（#赵）。Css（{余地：- maskl *比力，边距：- maskt *碧丽}）；
}）；
$（商）。Mouseleave（function（）{）
$（）；
$（）。隐藏（）；
}）；

无功marginleft = 0；
$（）。Click（函数（）{）
marginleft = marginleft - 64；
如果（marginleft < 192）{ 192 } marginleft =；
$（。标签UL）。停止（）。动画（{余地：marginleft }，快）；
}）；

$（）。Click（函数（）{）
marginleft = marginleft + 64；
如果（marginleft > 0）{ marginleft = 0 }；
$（。标签UL）。停止（）。动画（{余地：marginleft }，快）；
}）；

$（李）。Click（函数（）{）
var索引= $（this）；
$（这）。AddClass（我），兄弟姐妹（）。RemoveClass（我）；
$（div。1 >>）。情商（指数），（），（）（）兄弟姐妹。隐藏；
}）；
}）；

模仿京东商品页面的效果！！！
当我这样做时，我感到神清气爽！！！！！

以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。