客户要求当鼠标移动上去,对应的图片要有放大效果。
要求:
有轮播效果
一张屏幕有3张图片
当鼠标移动到对应图片上,对应图片放大,其他大小还原。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
<link href="https://cdn.staticfile.org/Swiper/2.7.0/idangerous.swiper.min.css" rel="stylesheet" />
<script src="https://cdn.staticfile.org/Swiper/2.7.0/idangerous.swiper.min.js"></script>
<style>
.layout_1356 {
margin: 0 auto;
width: 1356px;
}
.mission {
height: 765px;
box-sizing: border-box;
background: url("/img/i_bg1.png") center center no-repeat;
}
.mission .watch-title {
background: url("/img/i_l3.png") center center no-repeat;
height: 110px;
}
.mission #certify {
position: relative;
width: 1200px;
margin: 0 auto;
}
.mission #certify .swiper-container .swiper-wrapper {
height: 360px !important;
}
.mission #certify .swiper-slide {
position: relative;
height: 338px !important;
width: 1200px;
}
.mission #certify .swiper-slide a {
height: 188px;
display: inline-block;
width: 294px;
margin-right: 30px;
position: relative;
vertical-align: middle;
line-height: 188px;
text-align: center;
font-size: 60px;
transition: width 0.1s;
}
.a1 {
background-color: red;
}
.a2 {
background-color: blue;
}
.a3 {
background-color: orange;
;
}
.mission #certify .swiper-slide a:last-child {
margin-right: 0;
}
.mission #certify .swiper-slide a.large {
width: 540px;
height: 338px;
top: 0px;
transition: width 0.1s;
}
.mission #certify .swiper-slide img {
display: block;
width: 100%;
height: 100%;
}
.mission #certify .swiper-button-prev {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: -80px;
width: 80px;
height: 136px;
background: yellow;
cursor: pointer;
z-index: 9999;
}
.mission #certify .swiper-button-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -80px;
width: 80px;
height: 136px;
background: yellow;
cursor: pointer;
z-index: 9999;
}
</style>
</head>
<body>
<div class="mission section">
<div class="layout_1356">
<div class="section-title watch-title"></div>
<div id="certify" class="hanker">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide s1-s">
<a href="/social#to-zj" class="a1">1</a>
<a href="/social#to-scoial" class="large a2">2</a>
<a href="/social#to-charity" class="a3">3</a>
</div>
<div class="swiper-slide s2-s">
<a href="/social#to-charity" class="a3">3</a>
<a href="/social#to-zj" class="large a1">1</a>
<a href="/social#to-scoial" class="a2">2</a>
</div>
<div class="swiper-slide s3-s">
<a href="/social#to-scoial" class="a2">2</a>
<a href="/social#to-charity" class="large a3">3</a>
<a href="/social#to-zj" class="a1">1</a>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
</body>
</html>
<script>
$(function () {
function TimeSlider() {
certifySwiper = new Swiper("#certify .swiper-container", {
autoplay: 2000,
speed: 300,
loop: true,
});
$(".swiper-button-prev").on("click", function (e) {
e.preventDefault();
certifySwiper.swipePrev();
});
$(".swiper-button-next").on("click", function (e) {
e.preventDefault();
certifySwiper.swipeNext();
});
/*鼠标移入停止轮播,鼠标离开 继续轮播*/
$("#certify .swiper-container")
.mouseenter(function () {
certifySwiper.stopAutoplay();
})
.mouseleave(function () {
certifySwiper.startAutoplay();
});
$("#certify .swiper-slide a")
.mouseenter(function () {
$(this).addClass('large').siblings().removeClass('large');
})
.mouseleave(function () {
var i = $(this).index();
console.log(i);
if (i == 1) {
return;
} else if (i == 0) {
$(this).removeClass("large");
$(this).next().addClass("large");
} else if (i == 2) {
$(this).removeClass("large");
$(this).prev().addClass("large");
}
});
}
setTimeout(function () {
TimeSlider();
}, 300);
})
</script>
刚开始有个误区
使用的是采用 这种分屏效果,控制大小使用的是css的transform:scale(1.4,1.4)效果。
certifySwiper = new Swiper("#certify .swiper-container", {
autoplay: 2000,
speed: 300,
loop: true,
slidesPerView: 3,
spaceBetween: 90,
onSlideChangeStart: function (swiper) {
console.log("start");
},
});
这是没有考虑到鼠标移动上去放大的功能,按照正常的写法
当提出新的要求后,依旧顺着原来的思路。
把左右两侧的翻页按钮向两旁移动,留出放大的空间。
这样写图片与图片之间的距离不好控制。
方向错了,越努力越反动。不停的利用jquery来调整位置,但是轮播的时候,每个图片都需要调整。
解决方法: 3张图写3次。
<div class="swiper-slide s1-s">
<a href="/social#to-zj" class="a1">1</a>
<a href="/social#to-scoial" class="large a2">2</a>
<a href="/social#to-charity" class="a3">3</a>
</div>
<div class="swiper-slide s2-s">
<a href="/social#to-charity" class="a3">3</a>
<a href="/social#to-zj" class="large a1">1</a>
<a href="/social#to-scoial" class="a2">2</a>
</div>
<div class="swiper-slide s3-s">
<a href="/social#to-scoial" class="a2">2</a>
<a href="/social#to-charity" class="large a3">3</a>
<a href="/social#to-zj" class="a1">1</a>
</div>
一瞬间就看到解决问题的希望。o(╥﹏╥)o 还是菜