本文實例為大家分享了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})});以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
