jquery實現(xiàn)百葉窗效果

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

十余年專注成都網(wǎng)站制作，企業(yè)網(wǎng)站制作，個人網(wǎng)站制作服務，為大家分享網(wǎng)站制作知識、方案，網(wǎng)站設(shè)計流程、步驟,成功服務上千家企業(yè)。為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計及定制高端網(wǎng)站建設(shè)服務,專注于企業(yè)網(wǎng)站制作,高端網(wǎng)頁制作,對假山制作等多個方面，擁有豐富的網(wǎng)站推廣經(jīng)驗。

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

基本原理就是，將圖片都絕對定位到盒子里，然后分別定位，平分整個盒子，圖片就會顯示一種層疊效果了（本案例是通過left值控制位置）；然后通過jq控制，當鼠標經(jīng)過某張圖片的時候這張圖片完全顯示（即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="/upload/otherpic55/78117.jpg">
 <img src="/upload/otherpic55/78118.jpg">
 <img src="/upload/otherpic55/78119.gif">
</div>
</body>
</html>

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

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

鼠標經(jīng)過時候：經(jīng)過的那張圖片完全顯示，即占據(jù)寬度280px（圖片的寬度是280px），剩余的寬度是  （盒子寬度-280px）/剩余的圖片數(shù)量，根據(jù)所得值確定各個圖片的終止位置，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="/upload/otherpic55/78117.jpg">
 <img src="/upload/otherpic55/78118.jpg">
 <img src="/upload/otherpic55/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()"方法寫出剩余部分的效果。這里有一個小小的坑，自己也是繞了半天，最后還是別人提醒的才繞出來。

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

<!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="/upload/otherpic55/78117.jpg">
 <img src="/upload/otherpic55/78118.jpg">
 <img src="/upload/otherpic55/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已經(jīng)不是變量了，所以無法獲取當前的 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="/upload/otherpic55/78117.jpg">
 <img src="/upload/otherpic55/78118.jpg">
 <img src="/upload/otherpic55/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)
 })
 });
})

這樣奇跡就出現(xiàn)了~~ 同樣的道理，右側(cè)也是同樣的方法。

最終代碼如下：

<!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="/upload/otherpic55/78117.jpg">
 <img src="/upload/otherpic55/78118.jpg">
 <img src="/upload/otherpic55/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 + ")" //獲取當前左側(cè)的所有圖片，如果直接用 $("img:lt(idx)")，idx會被當做字符串，獲取不到對應的值
 imgR = "img:gt(" + idx + ")" //獲取當前右側(cè)的所有圖片
 lefts = idx * 35;
 //當前圖片的變化
 $(this).stop(true).animate({"left" : idx * 35}, 1000);
 //左側(cè)圖片的變化
 $(imgL).each(function(){
 $(this).stop(true).animate({"left" : ($(this).index()) * 35}, 1000)
 })
 //右側(cè)圖片的變化
 $(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>

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

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

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

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持創(chuàng)新互聯(lián)！

文章標題：jquery實現(xiàn)百葉窗效果
本文鏈接：http://muchs.cn/article46/gjschg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、定制網(wǎng)站、網(wǎng)站收錄、網(wǎng)站維護、品牌網(wǎng)站設(shè)計、App設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

搜索引擎優(yōu)化