Heim > Artikel > Web-Frontend > Teilen Sie den JQuery-Code, um einen bestimmten Punktverstärkungs-Klickeffekt zu erzielen
Teilen Sie den JQuery-Code, um einen bestimmten Punktverstärkungs-Klickeffekt zu erzielen
- 怪我咯Original
- 2017-06-26 12:02:551241Durchsuche
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})
});Das obige ist der detaillierte Inhalt vonTeilen Sie den JQuery-Code, um einen bestimmten Punktverstärkungs-Klickeffekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Erste Schritte mit jQueryNächster Artikel：Erste Schritte mit jQuery