オルガン切り替え効果

オルガン画像の切り替え効果は、簡単な効果で、もともと考えられなかったが、自分の思考と試みを通じて、完全に実現した.よく書くという小さな効果に自信がつくようです.
スタイル:
スタイル的には難易度はなく、主に絶対位置決め+nth-childを使用します.2つの注意点:

.wrapはoverflow:hiddenを使っていますが、画像がスライドするとスクロールバーが出てきます.親要素relative

を設定していないので

はjQueryでIE 8及び以下を互換nth-child

とする.

用PIE.htcは、border-radiusが設定要素cssにborder-radiusが追加される限り、IE 6-8をbehavior:url(PIE.htc);に互換化する.

はIE 6-8をrgbaに互換させ、主に以下の文を加えた:filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);のうちの7 Fはalpha 255を16進*に変換し、通常のrgbaとIEでのfilter値の変換:rgba透明値:0.1 0.20.3 0.4 0.5 0.6 0.7 0.9 IEでのfilter値:19 33 4 c 667 f 99 b 2 c 8 e 5参考博文

実現構想:

考え方1:移入するときは、次のページを移動して開くか、次のページを移動して開く可能性があります.移動本が開いている可能性もあります.エラー:前の数枚も動く必要があるかもしれません.

考え方2:移入する際にleft値を判断することで、前に移動するか、後ろに移動するか、すなわち前の画像を動かす必要があるか、後ろの画像を動かす必要があるかを判断する.正しい

実現ポイント:

はposition().leftで現在のleftを取得する、index()で現在のインデックス値

を取得する.

はnextAll()で全ての後の元素を取得する、slice(1,$(this).index()+1)で2枚目から現在の枚までの全ての元素

を取得する.

each()で

を巡る

はanimateでアニメーション

を実現する.

キーコードは、

です.

    $(document).ready(function(){
        //nth-child:   IE8   
        $(".wrap .item:nth-child(2)").css("left","120px");
        $(".wrap .item:nth-child(3)").css("left","240px");
        $(".wrap .item:nth-child(4)").css("left","360px");
        $(".wrap .item:nth-child(5)").css("left","480px");

        //        
        $(".wrap .item").click(function(){
            var imgLeft=$(this).position().left;  //       left 
            var targetLeft=$(this).index()*120; //       left 
            if(imgLeft==targetLeft){  //              
                $(this).nextAll().each(function(){ //             
                    $(this).animate({
                        left:$(this).index()*120+600+"px" //600          
                    })
                })
            }else{  //  ，            （     ）
                $(".wrap .item").slice(1,$(this).index()+1).each(function(){
                    $(this).animate({
                        left:$(this).index()*120+"px"
                    })
                })
            }
        })
    })

互換性:
Chrome、Firefox、IE 6以上対応