jquery实现图片放大点击切换

2019-11-19 16:25:11

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了jquery放大点击切换图片展示的具体代码，供大家参考，具体内容如下

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"><</a> <a class="next">></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"></script><script type="text/javascript" src="js/js6.js"></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})});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：Node.js连接mongodb实例代码

下一篇：AngularJS 验证码60秒倒计时功能的实现