jquery實現百葉窗效果

發布時間：2020-09-30 00:38:49 來源：腳本之家閱讀：193 作者：木風622 欄目：web開發

今天試著用jq寫了下圖片百葉窗效果，就是鼠標經過那張圖，那張圖顯示，其他圖片縮小~

最開始看效果的時候覺得好復雜，以為是寬度的變化寫的動畫，但是后來細想，如果是寬度變化，那么圖片變窄的時候肯定會失真了，后來經過學習，發現原來原理很簡單：

基本原理就是，將圖片都絕對定位到盒子里，然后分別定位，平分整個盒子，圖片就會顯示一種層疊效果了（本案例是通過left值控制位置）；然后通過jq控制，當鼠標經過某張圖片的時候這張圖片完全顯示（即left值進行變化），其他圖片的left值也進行相應的改變。

文字描述起來很難懂的樣子，先上html和css布局效果

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
<style type="text/css">
div{
 width: 420px;
 height: 186px;
 border: 2px solid #ccc;
 overflow: hidden;
 position: relative;
 margin: 100px auto;
}
img{
 border: none;
 display: block;
 position: absolute;
 top: 0;
}
img:nth-of-type(1){
 left: 0;
}
img:nth-of-type(2){
 left: 84px;
}
img:nth-of-type(3){
 left: 168px;
}
img:nth-of-type(4){
 left: 252px;
}
img:nth-of-type(5){
 left: 336px;
}
</style>
<div class="box">
 <img src="http://tupian.enterdesk.com/2013/mxy/10/12/1/17.jpg">
 <img src="http://tupian.enterdesk.com/2013/mxy/07/0715/1/7.jpg">
 <img src="https://cache.yisu.com/upload/information/20200622/114/78117.jpg">
 <img src="https://cache.yisu.com/upload/information/20200622/114/78118.jpg">
 <img src="https://cache.yisu.com/upload/information/20200622/114/78119.gif">
</div>
</body>
</html>

布局很簡單，接下來就是jq控制各個圖片相對位置的變化了。

起始位置：五張圖片的 left 值在css已經寫好，就是平分了整個盒子的寬度；

鼠標經過時候：經過的那張圖片完全顯示，即占據寬度280px（圖片的寬度是280px），剩余的寬度是（盒子寬度-280px）/剩余的圖片數量，根據所得值確定各個圖片的終止位置，left值；

感覺自己說的好復雜，先看下鼠標講過某張圖的時候的動畫效果：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
<style type="text/css">
div{
 width: 420px;
 height: 186px;
 border: 2px solid #ccc;
 overflow: hidden;
 position: relative;
 margin: 100px auto;
}
img{
 border: none;
 display: block;
 position: absolute;
 top: 0;
}
img:nth-of-type(1){
 left: 0;
}
img:nth-of-type(2){
 left: 84px;
}
img:nth-of-type(3){
 left: 168px;
}
img:nth-of-type(4){
 left: 252px;
}
img:nth-of-type(5){
 left: 336px;
}
</style>
<div class="box">
 <img src="http://tupian.enterdesk.com/2013/mxy/10/12/1/17.jpg">
 <img src="http://tupian.enterdesk.com/2013/mxy/07/0715/1/7.jpg">
 <img src="https://cache.yisu.com/upload/information/20200622/114/78117.jpg">
 <img src="https://cache.yisu.com/upload/information/20200622/114/78118.jpg">
 <img src="https://cache.yisu.com/upload/information/20200622/114/78119.gif">
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
var lefts;
var idx;
$("img").each(function(){
 $(this).mouseenter(function(e) {
 idx = $(this).index();
 lefts = idx * 35;
 //當前圖片的變化
 $(this).stop(true).animate({"left" : idx * 35}, 1000);
 });
})

當前圖片能夠愉快的玩耍了，接下來的重點就是其余圖片怎么運動。

此時，我們可以把剩余的圖片分成左右兩部分，用jq 的 ":lt()" 和 ":gt()"方法寫出剩余部分的效果。這里有一個小小的坑，自己也是繞了半天，最后還是別人提醒的才繞出來。

以當前圖片左側動畫效果為例，最開始我是這么寫的

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
<style type="text/css">
div{
 width: 420px;
 height: 186px;
 border: 2px solid #ccc;
 overflow: hidden;
 position: relative;
 margin: 100px auto;
}
img{
 border: none;
 display: block;
 position: absolute;
 top: 0;
}
img:nth-of-type(1){
 left: 0;
}
img:nth-of-type(2){
 left: 84px;
}
img:nth-of-type(3){
 left: 168px;
}
img:nth-of-type(4){
 left: 252px;
}
img:nth-of-type(5){
 left: 336px;
}
</style>
<div class="box">
 <img src="http://tupian.enterdesk.com/2013/mxy/10/12/1/17.jpg">
 <img src="http://tupian.enterdesk.com/2013/mxy/07/0715/1/7.jpg">
 <img src="https://cache.yisu.com/upload/information/20200622/114/78117.jpg">
 <img src="https://cache.yisu.com/upload/information/20200622/114/78118.jpg">
 <img src="https://cache.yisu.com/upload/information/20200622/114/78119.gif">
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
var lefts;
var idx;
$("img").each(function(){
 $(this).mouseenter(function(e) {
 idx = $(this).index();
 lefts = idx * 35;
 //當前圖片的變化
 $(this).stop(true).animate({"left" : idx * 35}, 1000);
  $(“img:lt( idx )“).each(function(){
 $(this).stop(true).animate({"left" : ($(this).index()) * 35}, 1000)
 })
 });
})

看上去沒有什么錯誤，見證奇跡~~~奇跡~~跡~~~然而并沒有什么奇跡，原因就是 $(“img:lt( idx )“) 這種寫法，里面的idx已經不是變量了，所以無法獲取當前的 idx 值，我們可以在外面定義一個變量，同時用 + 連接 lt 和變量 idx，再把變量引入進去即可。

因此更改后如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
<style type="text/css">
div{
 width: 420px;
 height: 186px;
 border: 2px solid #ccc;
 overflow: hidden;
 position: relative;
 margin: 100px auto;
}
img{
 border: none;
 display: block;
 position: absolute;
 top: 0;
}
img:nth-of-type(1){
 left: 0;
}
img:nth-of-type(2){
 left: 84px;
}
img:nth-of-type(3){
 left: 168px;
}
img:nth-of-type(4){
 left: 252px;
}
img:nth-of-type(5){
 left: 336px;
}
</style>
<div class="box">
 <img src="http://tupian.enterdesk.com/2013/mxy/10/12/1/17.jpg">
 <img src="http://tupian.enterdesk.com/2013/mxy/07/0715/1/7.jpg">
 <img src="https://cache.yisu.com/upload/information/20200622/114/78117.jpg">
 <img src="https://cache.yisu.com/upload/information/20200622/114/78118.jpg">
 <img src="https://cache.yisu.com/upload/information/20200622/114/78119.gif">
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
var lefts;
var idx;
var imgL; 
$("img").each(function(){
 $(this).mouseenter(function(e) {
 idx = $(this).index();
  imgL = "img:lt(" + idx + ")"
 lefts = idx * 35;
 //當前圖片的變化
 $(this).stop(true).animate({"left" : idx * 35}, 1000);
  $(imgL).each(function(){
 $(this).stop(true).animate({"left" : ($(this).index()) * 35}, 1000)
 })
 });
})

這樣奇跡就出現了~~ 同樣的道理，右側也是同樣的方法。

最終代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
<style type="text/css">
div{
 width: 420px;
 height: 186px;
 border: 2px solid #ccc;
 overflow: hidden;
 position: relative;
 margin: 100px auto;
}
img{
 width:280px;
 height:186px;
 border: none;
 display: block;
 position: absolute;
 top: 0;
}
img:nth-of-type(1){
 left: 0;
}
img:nth-of-type(2){
 left: 84px;
}
img:nth-of-type(3){
 left: 168px;
}
img:nth-of-type(4){
 left: 252px;
}
img:nth-of-type(5){
 left: 336px;
}
</style>
<div class="box">
 <img src="http://tupian.enterdesk.com/2013/mxy/10/12/1/17.jpg">
 <img src="http://tupian.enterdesk.com/2013/mxy/07/0715/1/7.jpg">
 <img src="https://cache.yisu.com/upload/information/20200622/114/78117.jpg">
 <img src="https://cache.yisu.com/upload/information/20200622/114/78118.jpg">
 <img src="https://cache.yisu.com/upload/information/20200622/114/78119.gif">
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
//精簡之后的方法
var lefts;
var idx;
var imgL; 
var imgR;
$("img").each(function(){
 $(this).mouseenter(function(e) {
 idx = $(this).index();
 imgL = "img:lt(" + idx + ")" //獲取當前左側的所有圖片，如果直接用 $("img:lt(idx)")，idx會被當做字符串，獲取不到對應的值
 imgR = "img:gt(" + idx + ")" //獲取當前右側的所有圖片
 lefts = idx * 35;
 //當前圖片的變化
 $(this).stop(true).animate({"left" : idx * 35}, 1000);
 //左側圖片的變化
 $(imgL).each(function(){
 $(this).stop(true).animate({"left" : ($(this).index()) * 35}, 1000)
 })
 //右側圖片的變化
 $(imgR).each(function(){
 $(this).stop(true).animate({"left" : ($(this).index()+7) * 35}, 1000)
 })
 });
})
$("img").each(function(){
 $(this).mouseleave(function(){
 $("img").each(function(){
 $(this).stop(true).animate({"left" : ($(this).index())*84}, 1000);
 })
 });
})
</script>
</body>
</html>

鼠標移出效果，就是恢復到最開始的狀態，就不在敘述了。

方法可能不是最簡單的方法，說的也可能不甚詳盡，希望大神多多指教，我也多多學習~~~

ps：圖片不知道怎么加上來，稍后看下再改吧。歡迎各位加入交流學習前端群 466039913

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持億速云！

向AI問一下細節

亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

jquery實現百葉窗效果

猜你喜歡

亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

jquery實現百葉窗效果

猜你喜歡

最新資訊

相關推薦

相關標簽