1. дома
  2. Вопрос и ответ
  3. Как сделать эффект слайда для одного div?

Как сделать эффект слайда для одного div?

2013-07-17 5 views
-1

У меня есть главный div, в котором есть множество div, подобных сетке. на самом деле в настоящее время горизонтальной прокрутки работает, но я хочу, чтобы сделать эффект слайд, как [это] [2]Как сделать эффект слайда для одного div?

enter image description here

скольжение должно быть сделано в соответствии с размером экрана не зависит от дел.

Я попытался как этот

<!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>

Может ли один помочь мне

Спасибо-х заранее

источник

2013-07-17 Shreesha S

+0

Пожалуйста, поделитесь своим кодом здесь. –

+0

@NeerajSingh, пожалуйста, см. Мой отредактированный вопрос –

+0

, у вас не должно быть нескольких элементов с одинаковыми идентификаторами. Проверьте [здесь] (http://css-tricks.com/the-difference-between-id-and-class). –

ответ

0

Если вы хотите, чтобы переместить все дивы влево вы можете просто положить их в наружной коробке и переместите весь блок влево. Если вы хотите переместить только один div, вы можете использовать css-перевод, потому что это не влияет на ваш макет (он просто накладывает/подкладывает другие div). Если у вас есть плавающие divs и вы хотите переместить только один конкретный div, это может быть сложно, чтобы другие не двигались (работа с отрицательным полем слева и положительным справа может работать здесь).

источник

2013-07-17 05:49:02

Смежные вопросы

 Смежные вопросы