欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jquery实现图片放大点击切换

程序员文章站 2022-07-05 20:23:34
本文实例为大家分享了jquery放大点击切换图片展示的具体代码,供大家参考,具体内容如下 html代码

本文实例为大家分享了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})
});

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