<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>放大器</title>
<style>
.div1{
width: 120px;
height: 90px;
padding: 5px;
border: 1px solid #CCCCCC;
position: relative;
}
.small_pic{
width: 120px;
height: 90px;
border: 1px solid #eeeeee;
position: relative;
}
.small_pic img{
width: 100%;
height: 100%;
}
.big_pic{
width: 240px;
height: 180px;
position: absolute;
top: -1px;
left: 215px;
overflow: hidden;
border: 2px solid #CCCCCC;
display: none;
}
.big_pic img{
position: absolute;
width: 420px;
height: 315px;
top: 0;
left: 0;
}
.mark{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
background:red;
/*
设定滤镜效果
filter:alpha(opacity: );
*/
filter:alpha(opacity:0);
opacity: 0;
}
.float_layer{
width: 50px;
height: 50px;
border: 1px solid #000000;
background-color: #ffffff;
position: absolute;
top: 0;
left: 0;
filter:alpha(opacity:30);
opacity: 0.3;
display: none;
}
span{
display: inline-block;
width: 18px;
height: 15px;
background-color: cadetblue;
color: white;
text-align: center;
line-height: 12px;
}
</style>
</head>
<body>
<div class="div1">
<div class="small_pic">
<span class="mark"></span>
<span class="float_layer"></span>
<img src="s4.JPG" class="small_img">
<img src="1.JPG" class="small_img">
<img src="2.JPG" class="small_img">
</div>
<div class="big_pic">
<div>
<img src="s4.JPG" class="big_img">
</div>
</div>
</div>
<span style="margin-left: 45px" id="span_left"><</span>
<span id="span_right">></span>
<script>
var small_p=document.getElementsByClassName("small_pic")[0];
var float=document.getElementsByClassName("float_layer")[0];
var big_p=document.getElementsByClassName("big_pic")[0];
var big_img=document.getElementsByClassName("big_img")[0];
var small_img=document.getElementsByClassName("small_img");
var span_l=document.getElementById("span_left");
var span_r=document.getElementById("span_right");
var bigimg=["s4.JPG","2.JPG","1.JPG"];
for(var i=0;i<small_img.length;i++){
small_img[i].style.display='none'
}
small_img[0].style.display='block';
//鼠标单机事件 向左
span_l.onclick=function(){
var displayNum=[small_img[0].style.display,small_img[1].style.display,small_img[2].style.display]
for(var i=0;i<small_img.length;i++){
if(i<2){
small_img[i+1].style.display=displayNum[i];
}
else{
small_img[0].style.display=displayNum[2]
}
}
//改变大图路径
for(var i=0;i<3;i++){
if(small_img[i].style.display=='block'){
big_img.src=small_img[i].src;
}
}
}
//鼠标单机事件 向右
span_r.onclick=function(){
var displayNum1=[small_img[0].style.display,small_img[1].style.display,small_img[2].style.display]
for(var i=0;i<small_img.length;i++){
if(i<2){
small_img[i].style.display=displayNum1[i+1];
}
else{
small_img[2].style.display=displayNum1[0];
}
}
for(var i=0;i<3;i++){
if(small_img[i].style.display=='block'){
big_img.src=small_img[i].src;
}
}
}
//鼠标进入事件
small_p.onmouseenter=function(){
float.style.display='block';
big_p.style.display='block';
}
//鼠标离开事件
small_p.onmouseleave=function(){
float.style.display='none';
big_p.style.display='none'
}
//鼠标移动事件
small_p.onmousemove=function(e){
//计算小图放大区域坐标
var float_l=(e.pageX-this.offsetLeft)<10?0:(e.pageX-this.offsetLeft-10);
var float_t=(e.pageY-this.offsetTop)<12?0:(e.pageY-this.offsetTop-12);
var float_r=(e.pageX)>83?68:(e.pageX-14);
var float_b=(e.pageY)>52?39:(e.pageY-14);
float.style.left=float_l+'px';
float.style.top=float_t+'px';
float.style.left=float_r+'px';
float.style.top=float_b+'px';
//计算大图坐标
big_img.style.left=-parseInt(float.style.left)*1.8+'px'
big_img.style.top=-parseInt(float.style.top)*3.5+'px'
}
</script>
</body>
</html>
放大器
猜你喜欢
转载自blog.csdn.net/weixin_42069386/article/details/82707894
今日推荐
周排行