recherche

Maison >interface Web >js tutoriel >Partagez le code jquery pour obtenir un certain effet de clic d'amplification de point

Partagez le code jquery pour obtenir un certain effet de clic d'amplification de point

怪我咯
怪我咯original
2017-06-26 12:02:551354parcourir

Partagez le code jquery pour obtenir un certain effet de clic d'amplification de point

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Premiers pas avec jQueryArticle suivant：Premiers pas avec jQuery

Articles Liés

Voir plus