recherche

Maison >interface Web >js tutoriel >Exemple de partage de l'implémentation jquery de la fonction d'agrandissement d'image et de changement de clic

Exemple de partage de l'implémentation jquery de la fonction d'agrandissement d'image et de changement de clic

小云云
小云云original
2018-05-15 17:15:272849parcourir

Cet article présente principalement jquery pour réaliser l'agrandissement d'image et le changement de clic en détail. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

code html

<body>
<p class="boss">
 <p class="bigimg">
  <img src="img/s1.jpg" height="350" width="350" id="spic"> 
  <p id="mask"></p>
 </p>
 <p class="xia"> <a class="prev"><</a> <a class="next">></a>
  <p 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>
  </p>
 </p>
 <p class="zoom">
  <img src="img/b1.jpg" id="bpic">
 </p>
</p>

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

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

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

Recommandations associées :

Comment implémenter la fonction de prévisualisation de la loupe d'image dans l'applet WeChat

5 effets de loupe d'image implémentés par jquery, un incontournable pour les sites Web de centres commerciaux !

Partager un code d'effet d'agrandissement d'image HTML+css

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!

jquery css html 微信小程序
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：jquery imitation produits Jingdong agrandir la page de navigation_exemple de partageArticle suivant：jquery imitation produits Jingdong agrandir la page de navigation_exemple de partage

Articles Liés

Voir plus