suchen

Heim >Web-Frontend >js-Tutorial >Teilen Sie den JQuery-Code, um einen bestimmten Punktverstärkungs-Klickeffekt zu erzielen

Teilen Sie den JQuery-Code, um einen bestimmten Punktverstärkungs-Klickeffekt zu erzielen

怪我咯
怪我咯Original
2017-06-26 12:02:551348Durchsuche

Teilen Sie den JQuery-Code, um einen bestimmten Punktverstärkungs-Klickeffekt zu erzielen

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

Das obige ist der detaillierte Inhalt vonTeilen Sie den JQuery-Code, um einen bestimmten Punktverstärkungs-Klickeffekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Erste Schritte mit jQueryNächster Artikel：Erste Schritte mit jQuery

In Verbindung stehende Artikel

Mehr sehen