分享jquery实现某点放大点击效果代码

LALAL.AI

AI人声去除器和声乐提取工具

下载

html代码

    

        @@##@@   
        

    
    
 zuojiankuohaophpcn youjiankuohaophpcn
      

        

          
@@##@@
          
@@##@@
          
@@##@@
          
@@##@@
          
@@##@@
          
@@##@@
          
@@##@@
          
@@##@@
          
@@##@@
          
@@##@@
        
      
    
    

        @@##@@
    

css代码

*{
margin: 0;
padding:0;
}
li{
    list-style: none;
}
.boss{
    position:relative;
    width: 350px;
}
.bigimg{
    width: 350px;
    border: 1px solid #ccc;
    height: 350px;
    position: relative;
}
#mask{
    width: 150px;
    height: 150px;
    background: rgba(255,255,255,0.5);
    position: absolute;
    top: 0;
    left: 0;
    border:1px solid #ccc;
    cursor: pointer;
}

.xia{
    clear:both;
    margin-top:5px;
    width:352px;
}
.xia .prev{
    float:left;
    margin-right:4px;
}
.xia .next{
    float:right;
}
.xia .prev,.xia .next{
    display:block;
    text-align:center;
    width:10px;
    height:54px; 
    line-height:54px;
    border:1px solid #CCC;
    background:#EBEBEB;
    cursor:pointer;
    text-decoration:none;
}
.xia .items{
    float:left;
    position:relative;
    width:322px;
    height:56px;
    overflow:hidden;
}
.xia .items ul{
    position:absolute;
    height:56px;
}
.xia .items ul li{
    float:left;
    width:64px;
    text-align:center;
}
 .xia .items ul li img{
    border:1px solid #CCC;
    padding:2px;
    width:50px;
    height:50px;
}
.xia .items ul li img:hover{
    border:2px solid #FF6600;
    padding:1px;
} 
.zoom{
    width: 350px;
    height: 410px;
    border:1px solid #ccc;
    position: absolute;
    top: 0;
    right: -360px;
    overflow: hidden;
    display: none;
}

jquery代码

var $spic=$("#spic");
var $mask=$("#mask");
var $bigimg=$(".bigimg");
var $bpic=$("#bpic");
$(".items img").on("mouseover",function(){
    
    $spic.attr("src",$(this).attr("src"));//鼠标滑过切换
    $bpic.attr("src",$(this).attr("src"));

});

var l=$bigimg.eq(0).offset().left;
var t=$bigimg.eq(0).offset().top;
var width1=$mask.outerWidth()/2;
var height1=$mask.outerHeight()/2;

var maxl=$bigimg.width()-$mask.outerWidth();
var maxt=$bigimg.height()-$mask.outerHeight();

var bili=$bpic.width()/$spic.width();

$bigimg.mouseover(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;

    $mask.css({"left":maskl,"top":maskt});

    $(".zoom").show();

    $bpic.css({"margin-left":-maskl*bili,"margin-top":-maskt*bili});
});


var marginLeft=0
$(".next").click(function(){

    marginLeft=marginLeft-63.5;
    if(marginLeft<-254) marginLeft=-254;

    $(".items ul").css({"margin-left":marginLeft})
})
$(".prev").click(function(){

    marginLeft=marginLeft+63;
    if(marginLeft>0) marginLeft=0;

    $(".items ul").css({"margin-left":marginLeft})
});