首页 > 技术文章 > jq放大镜和选项卡切换等

wjk123456 2021-11-09 19:21 原文

// 选项卡切换

})
$(function(){
$(".top-list .title").click(function(){
$(this).addClass("active").siblings().removeClass("active");
var index=$(this).index();
$(".top-list-main ul").eq(index).show().siblings().hide()
})

})

 

 

 增加减少

$(function () {
// input里面获取value的值
var val=$("#count-ipt").val()
// li里面获取text值
var count=$(".in-count").text()
$(".c_sub").click(function () {
if (val>0) {
val--;
$("#count-ipt").val(val)
}

})
$(".c_add").click(function () {
if (val<count) {
val++;
$("#count-ipt").val(val)
}

})

 

 


//放大镜的作用

$(".mask").hover(function(){
$(".float_layer").show();
$(".big_box").show();
},function () {
$(".float_layer").hide();
$(".big_box").hide();
})
$(".mask").hover(function(e){
var left=e.offsetX-100;
var top=e.offsetY-100;
var w=$(this).width();
var h=$(this).height();

if(top<0)
top=0;
if(left<0)
left=0;

if (e.offsetX+100>=w) {
left=w-200;
}
if (e.offsetY+100>=w) {
left=h-200;
}

$(".float_layer").css({
left:left+"px",
top:top+"px"
})

$(".big_box img").css({
left:-2*left+"px",
top:-2*top+"px"
})
})
})
</script>

推荐阅读