-1

内部にグリッドのような多くの div があるメイン div があります。実は横スクロールが動いているのですが、【これ】【2】のようなスライド効果を作りたいです。

ここに画像の説明を入力

スライドは、div に依存するのではなく、画面サイズに従って行う必要があります。

私はこのようにしてみました

<!DOCTYPE html>
<html>

    <head>

        <!-- META -->
        <meta charset = "utf-8">
        <meta name = "viewport" content = "width=device-width, minimum-scale=1, maximum-scale=1">
        <meta name = "apple-mobile-web-app-capable" content = "yes" /> 

        <style type="text/css">
            .fluidHeight {
                position: relative;
                width: 800px;
                height: 800px;
            }

            /* 
             * below 900px, switch to percentage based responsive height.
             * padding of 33.333% is calculated by using the 
             * image ratio 300px/900px = .333 * 100% = 33.333% 
             */
            @media screen and (max-width: 900px) {

                .fluidHeight {
                    height: 0;
                    padding: 0 0 33.333% 0;
                }

            }

            .sliderContainer {
                position: absolute;
                width: 800px;
                height: 800px;
            }

            .iosSlider {
                width: 800px;
                height: 800px;
                background: #aaa;
            }

            .iosSlider .slider {
                width: 100%;
                height: 100%;
            }

            .iosSlider .slider img {
                position: relative;
                top: 0;
                left: 0;
                width: 800px;
                margin: 0 0 0 0;
            }
            .div-body_2_col {
                -moz-column-count:2; /* Firefox */
                -webkit-column-count:2; /* Safari and Chrome */
                column-count:2;
                padding:5px;    
                height: 800px;
                }
        </style>

        <!-- jQuery library -->
        <script type="text/javascript" src = "../../../_lib/jquery-1.4.min.js"></script>
        <script type="text/javascript" src = "../../../_lib/jquery.easing-1.3.js"></script>

        <!-- iosSlider plugin -->
        <script src = "../../../_src/jquery.iosslider.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {

                $('.iosSlider').iosSlider({
                    snapToChildren: true,
                    desktopClickDrag: true,
                    infiniteSlider: true
                });

            });
        </script>

        <title>Ex #12: Image Slides</title>

    </head>

    <body>

        <div class = 'fluidHeight'>

            <div class = 'sliderContainer'>

                <div class = 'iosSlider'>

                    <div class = 'slider'>
                        <div class="div-body_2_col">
                        <div class="newspaper"  id="newspaper1" onClick="fn('newspaper1');">

111.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">

2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div><div class="newspaper"  id="newspaper1" onClick="fn('newspaper1');">

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">

2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div><div class="newspaper"  id="newspaper1" onClick="fn('newspaper1');">

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">

2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div><div class="newspaper"  id="newspaper1" onClick="fn('newspaper1');">

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">

2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div><div class="newspaper"  id="newspaper1" onClick="fn('newspaper1');">

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">

2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div><div class="newspaper"  id="newspaper1" onClick="fn('newspaper1');">

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">

2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div><div class="newspaper"  id="newspaper1" onClick="fn('newspaper1');">

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">

2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div><div class="newspaper"  id="newspaper1" onClick="fn('newspaper1');">

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">

2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div><div class="newspaper"  id="newspaper1" onClick="fn('newspaper1');">

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">

2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div><div class="newspaper"  id="newspaper1" onClick="fn('newspaper1');">

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">

2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div><div class="newspaper"  id="newspaper1" onClick="fn('newspaper1');">

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">

2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div><div class="newspaper"  id="newspaper1" onClick="fn('newspaper1');">

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">

2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div><div class="newspaper"  id="newspaper1" onClick="fn('newspaper1');">

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">

2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div><div class="newspaper"  id="newspaper1" onClick="fn('newspaper1');">

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">

2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div><div class="newspaper"  id="newspaper1" onClick="fn('newspaper1');">

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">

2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div><div class="newspaper"  id="newspaper1" onClick="fn('newspaper1');">

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">

2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div><div class="newspaper"  id="newspaper1" onClick="fn('newspaper1');">

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">

2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div><div class="newspaper"  id="newspaper1" onClick="fn('newspaper1');">

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div>

                    </div>
                    </div>

                </div>

            </div>

        </div>

    </body>

</html>

誰でも私を助けることができます

前もって感謝します

4

1 に答える 1

0

すべての div を左に移動したい場合は、それらを外側のボックスに入れて、ボックス全体を左に移動します。1 つの div のみを移動する場合は、css 変換を使用できます。これは、レイアウトに影響を与えないためです (他の div をオーバーレイ/アンダーレイするだけです)。フローティング div があり、特定の div を 1 つだけ移動したい場合、他の div も移動しないようにするのは難しい場合があります (左に負のマージン、右に正のマージンを使用するとうまくいく場合があります)。

于 2013-07-17T05:49:02.840 に答える