jquery仿京东商品放大浏览页面

jquery仿京东商品页面

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

仿京东商品页面钢性铸铁的代码！

* { margin : 0；padd : 0；}.da {横向： 360px高度： 418像素；向左浮动：}.尚{宽度： 350像素高度： 350像素；border: 1px固体# cccmargin: 10px 0 10px 10px相对位置：}.尹{宽度： 150像素高度： 150像素；border: 1px固体# ccc背景： rgba(255，255，255，0.3)；绝对位置：top :0 left : 0；光标：指针；显示器：无；}.bao { width: 362px高度： 56px}.选项卡{宽度： 320px高度： 56px左边距left: 10px飞越：隐藏；}.Ul { width: 9999px高度： 56px}.Ul li {宽度： 52px 83360 52px向左浮动：border: 2px固体# ccc左边距left: 8pxlist-style:无；位置：相对；文本对齐：居中；}.Li { width : 52px h8 : 52px border : 2px实心# FF7403}。li img {显示：块；绝对位置：前：50%；左侧： 50%;边距-top :-26px；边距-左侧：-26px；}.左{显示：块；宽度： 12px高度： 56px背景：网址(./img/icon_clubs.gif)不重复；背景尺寸尺寸： 180px 608px背景-位置：-82px-462 px；向左浮动：左边距left: 10px}。您{显示：阻止了；宽度： 12px高度： 56px背景：网址(./img/icon_clubs.gif)不重复；背景尺寸尺寸： 180px 608px背景-位置：-95px-462 px；向右浮动：边距-top :-56px；}.xia {横向： 360px高度： 418像素；border: 1px固体# ccc向左浮动：余量： 10px 0 0px 20px飞越：隐藏；显示器：无；}.lie { width : 1329 pxh three : 30px左边距left: 10px边距-top : 20px；边框-bottom: 2px实心# BE0000}。李烈{左侧浮动：列表样式：无；宽度： 80px高度： 28px背景# fffborder-radius : 3px；边框： 0；线高： 30px文本对齐：中心；右边距： 5pxborder:1px固体# be 0000 color : # C30 cursor :指针；字体粗细：粗体；}.利尔ll { width : 80px three : 30px背景# be 0000 border-radius : 3px；边框： 0；线高： 30px文本对齐：中心；color: # fffcursor:指针；}.nie {横向： 1329px高度： 200像素；左边距left: 10px飞越：隐藏；} .Bao 1 {宽度： 1329 px高度： 500像素；}.向上{宽度： 1329像素高度： 200像素；}.向上跨越{ display:块；padding:10px 0 0 10px边距-底部： 70px}.向上p { text-align : center边距-top : 5px；}.向下{宽度： 1329像素重量： 300像素背景：黄色；}仿京东商品页面超文本标记语言的代码！

div class=' da ' div class=' Shang ' img src=' http : img/B1。jpg ' height=' 350 ' width=' 350 ' id=' pian ' div class=' yin '/div/div class=' Bao ' span class=' zoo '/span div class=' tab ' Ul class=' Ul ' Li img src=' http : img/B1。jpg '高=' 52 '宽=' 52 '/Li Li img图文介绍/li li评论(1)/Li/ul/div=' nie ' div=' Bao 1 ' div=' up ' span暂无好评！/span p适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗/p p来源：师徒课堂/p/div div class=' down ' img src=' http : img/11。png ' height=' 300 ' width=' 1329 '/div/div/div class=' Xia ' img src=' http : img/B1。jpg ' height=' 600 ' width=' 600 ' id=' Zhao '/div/div仿京东商品页面jquery的代码！

$(function(){ var $yin=$(').阴');$('.Ul li img ').mouseover(函数(){ $(this)).父项()。addClass('li ').兄弟姐妹()。移除CLaSS(' Li ')；$(“# pian”).attr('src '，$(this).attr(' src ')；$('赵').attr('src '，$(this).attr(' src ')；}).mouseout(函数(){ $(此)).父项()。移除CLaSS(' Li ')；});var l=$(' .商')。等式(0).偏移量()。向左；var t=$(' .商')。等式(0).偏移量()。顶部；var width1=$(' .阴')。out width()/2；var height1=$(' .阴')。outhealth()/2；var maxL=$(' .商')。width()-$ yin。out width()；var maxT=$(' .商')。高度()-$ yin。outhealth()；定义变量毕丽=$(“# Zhao”).width()/$(“# pian”).宽度();$('.商')。鼠标移动(函数{ var maskL=e.clientX - l - width1，MaSkt=e . clienty-t-height 1；if(maskL 0){ maskL=0 }；if(maskT 0){ maskT=0 }；if(MaSKl MaxL){ MaSKl=MaxL }；if(MaxT MaxT){ MaxT=MaxT }；$尹。CSS({ ' left ' : AskL，' top ' : AskT })；$('.夏')。show()；$('.阴')。show()；$('赵').CSS({ '左边距' :-maskL *毕丽，'页边距-顶部' :-maskT *毕丽});});$('.商')。mouseleave(函数(){ $(')。夏')。hide()；$('.阴')。hide()；});var左边距=0；$('.你')。click(function(){ margin left=margin left-64；if(左边距-192){左边距=-192 }；$('.制表符(ul ').停止()。动画({ '左边距：marginLeft '，' fast ')；});$('.左')。click(function(){左边距=左边距64；if(左边距0){左边距=0 }；$('.制表符(ul ').停止()。动画({ '左边距：marginLeft '，' fast ')；});$('.李烈')。单击(函数(){ var index=$(this)).index()；$(这个)。addClass('ll ').兄弟姐妹()。移除CLaSS(' ll ')；$(.保1师').eq(指数)。显示()。兄弟姐妹()。hide()；});});仿京东商品页面的效果！

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

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