jquery实现图片放大点击切换
程序员文章站
2022-04-10 10:15:08
本文实例为大家分享了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})
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇： 微信小程序开发之实现自定义Toast弹框