Home > Article > Web Front-end > Example sharing of jquery implementation of image enlargement and click switching function
This article mainly introduces jquery to realize image enlargement and click switching in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.
html code
<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>
css code
*{ 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 code
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}) });
Related recommendations:
微信小How does the program implement the image magnification preview function?
5 jquery-implemented image magnifying glass effects, a must-use for shopping mall websites!
Share an HTML+css image enlargement special effect code
The above is the detailed content of Example sharing of jquery implementation of image enlargement and click switching function. For more information, please follow other related articles on the PHP Chinese website!