집 > 기사 > 웹 프론트엔드 > 특정 포인트 증폭 클릭 효과를 달성하기 위해 jquery 코드 공유

특정 포인트 증폭 클릭 효과를 달성하기 위해 jquery 코드 공유

怪我咯원래의: 2017-06-26 12:02:551241검색

html代码

<body>
<div class="boss">
    <div class="bigimg">
        <img src="img/s1.jpg" height="350" width="350" id="spic">   
        <div id="mask"></div>
    </div>
    <div class="xia"> <a class="prev">&lt;</a> <a class="next">&gt;</a>
      <div class="items">
        <ul>
          <li><img src="img/b1.jpg" height="56" width="56"></li>
          <li><img src="img/b2.jpg" height="56" width="56"></li>
          <li><img src="img/b3.jpg" height="56" width="56"></li>
          <li><img src="img/b1.jpg" height="56" width="56"></li>
          <li><img src="img/b3.jpg" height="56" width="56"></li>
          <li><img src="img/b1.jpg" height="56" width="56"></li>
          <li><img src="img/b1.jpg" height="56" width="56"></li>
          <li><img src="img/b1.jpg" height="56" width="56"></li>
          <li><img src="img/b2.jpg" height="56" width="56"></li>
          <li><img src="img/b3.jpg" height="56" width="56"></li>
        </ul>
      </div>
    </div>
    <div class="zoom">
        <img src="img/b1.jpg" id="bpic">
    </div>
</div>

<script type="text/javascript" src="js/jquery-1.8.3.js?1.1.11"></script>
<script type="text/javascript" src="js/js6.js?1.1.11"></script>

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})
});

위 내용은 특정 포인트 증폭 클릭 효과를 달성하기 위해 jquery 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：jQuery 시작하기다음 기사：jQuery 시작하기