图片放大点击开关的jQuery实现
这个例子为大家分享jQuery放大点击开关图片显示的具体代码，供大家参考，详情如下HTML代码
>
CSS代码
* {
保证金：0；
填充：0；
}
李{
列表样式：无；
}
老板{。
职位：相对；
宽度：350px；
}
bigimg {。
宽度：350px；
边境：1px solid # CCC；
身高：350px；
职位：相对；
}
#面膜{
宽度：150px；
身高：150px；
背景：RGBA（255255255,0.5）；
位置：绝对；
顶部：0；
左：0；
边境：1px solid # CCC；
光标：指针；
}
夏{。
清楚：两者；
边距：5px；
宽度：352px；
}
沪指{。夏。
浮点数：左；
右边距：4px；
}
下一个{
浮子：右边；
}
。夏。昨日，。夏。下{
显示块；
文本对齐：中心；
宽度：10px；
身高：54px；
行高：54px；
边境：1px solid # CCC；
背景：# ebebeb；
光标：指针；
文字装饰：无；
}
，项目{
浮点数：左；
职位：相对；
宽度：322px；
身高：56px；
溢出：隐藏；
}
xia.items UL {。
位置：绝对；
身高：56px；
}
xia.items ul {。
浮点数：左；
宽度：64px；
文本对齐：中心；
}
xia.Items UL Li img {。
边境：1px solid # CCC；
填料：2px；
宽度：50px；
身高：50px；
}
xia.Items UL Li：悬停{ IMG。
边境：2px固体# ff6600；
填料：1px；
}
变焦{。
宽度：350px；
身高：410px；
边境：1px solid # CCC；
位置：绝对；
顶部：0；
右：- 360px；
溢出：隐藏；
显示：无；
}
jQuery代码
VaR在美元美元=（#穗）；
VaR（面具=美元美元#面具）；
bigimg = $（var $ 。bigimg ）；
方块= $（var $ # BPIC ）；
$（。项目IMG ），（鼠标悬停
spic.attr美元（src$（这）。Attr（src））； / /鼠标开关
bpic.attr美元（src
}）；
var = bigimg.eq美元（0）。偏移（左）；
var t = bigimg.eq美元（0）。偏移（顶部）；
VaR米= mask.outerwidth美元（） / 2；
无功height1 = mask.outerheight美元（） / 2；
VaR最大值= $（）$ bigimg.width mask.outerwidth（）；
VaR MaxT = bigimg.height美元（）-（）mask.outerheight美元；
VaR比例= bpic.width美元（）/（）spic.width美元；
bigimg.mouseover美元（功能（e）{）
无功maskl = e.clientx-l-width1，maskt = e.clienty-t-height1；
如果（maskl＜0）maskl = 0；
如果（maskt＜0）maskt = 0；
如果（maskl > maxl）maskl =最大值；
如果（maskt > MaxT）maskt =最紧密；
mask.css美元（{左：maskl，顶：maskt }）；
$（；
bpic.css美元（{余地：- maskl *比力，边距：- maskt *碧丽}）；
}）；
无功marginleft = 0
$（）。Click（函数（）{）
marginleft = marginleft-63.5；
如果（marginleft＜254）marginleft = - 254；
$（。项UL）。Css（{余地：marginleft }）
}）
$（里面）。Click（function（）{）
marginleft = marginleft + 63；
如果（marginleft > 0）marginleft = 0；
$（。项UL）。Css（{余地：marginleft }）
}）；
以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。