Home > Article > Web Front-end > Share jquery code to achieve a certain point amplification click effect
Share jquery code to achieve a certain point amplification click effect
- 怪我咯Original
- 2017-06-26 12:02:551240browse
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?1.1.11"></script> <script type="text/javascript" src="js/js6.js?1.1.11"></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})
});The above is the detailed content of Share jquery code to achieve a certain point amplification click effect. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Getting started with jQueryNext article：Getting started with jQuery