真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

jquery怎樣實(shí)現(xiàn)百葉窗效果

這篇文章主要介紹了jquery怎樣實(shí)現(xiàn)百葉窗效果，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)建站專注于蛟河企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計(jì),商城開發(fā)。蛟河網(wǎng)站建設(shè)公司,為蛟河等地區(qū)提供建站服務(wù)。全流程按需搭建網(wǎng)站，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務(wù)

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

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

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

  Documentdiv{ 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;}

布局很簡(jiǎn)單，接下來(lái)就是jq控制各個(gè)圖片相對(duì)位置的變化了。

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

鼠標(biāo)經(jīng)過時(shí)候：經(jīng)過的那張圖片完全顯示，即占據(jù)寬度280px（圖片的寬度是280px），剩余的寬度是（盒子寬度-280px）/剩余的圖片數(shù)量，根據(jù)所得值確定各個(gè)圖片的終止位置，left值；

感覺自己說的好復(fù)雜，先看下鼠標(biāo)講過某張圖的時(shí)候的動(dòng)畫效果：

  Documentdiv{ 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;}

當(dāng)前圖片能夠愉快的玩耍了，接下來(lái)的重點(diǎn)就是其余圖片怎么運(yùn)動(dòng)。

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

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

  Documentdiv{ 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;}

var lefts;var idx;$("img").each(function(){ $(this).mouseenter(function(e) { idx = $(this).index(); lefts = idx * 35; //當(dāng)前圖片的變化 $(this).stop(true).animate({"left" : idx * 35}, 1000); $(“img:lt( idx )“).each(function(){ $(this).stop(true).animate({"left" : ($(this).index()) * 35}, 1000) }) });})

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

因此更改后如下：

  Documentdiv{ 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;}     var lefts;var idx;var imgL; $("img").each(function(){ $(this).mouseenter(function(e) { idx = $(this).index(); imgL = "img:lt(" + idx + ")" lefts = idx * 35; //當(dāng)前圖片的變化 $(this).stop(true).animate({"left" : idx * 35}, 1000); $(imgL).each(function(){ $(this).stop(true).animate({"left" : ($(this).index()) * 35}, 1000) }) });})

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

最終代碼如下：

  Documentdiv{ 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;}     //精簡(jiǎn)之后的方法var lefts;var idx;var imgL; var imgR;$("img").each(function(){ $(this).mouseenter(function(e) { idx = $(this).index(); imgL = "img:lt(" + idx + ")" //獲取當(dāng)前左側(cè)的所有圖片，如果直接用 $("img:lt(idx)")，idx會(huì)被當(dāng)做字符串，獲取不到對(duì)應(yīng)的值 imgR = "img:gt(" + idx + ")" //獲取當(dāng)前右側(cè)的所有圖片 lefts = idx * 35; //當(dāng)前圖片的變化 $(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); }) });})

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“jquery怎樣實(shí)現(xiàn)百葉窗效果”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

本文名稱：jquery怎樣實(shí)現(xiàn)百葉窗效果
當(dāng)前URL：http://weahome.cn/article/pschii.html