jquery实现图片放大点击切换

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

HTML代码

rush:xhtml;">

<script type="text/javascript" src="js/jquery-1.8.3.js">
<script type="text/javascript" src="js/js6.js">

css代码

rush: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,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代码

rush:js;"> 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":-masklbili,"margin-top":-masktbili});
});

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})
});

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