Question

我的水平图像滚动有问题。某些解决方案存在许多威胁，但没有适合我的解决方案:(

以下是我图片库的链接： http://lichtspielfotografie.com/portrait/

我使用的CSS：

.photos {
         width:10000px;
         height:100%;   
         position:absolute;
         left:0;
         margin-left:0; 
         margin-top: 0; 
}
#scroll{ 
        position:absolute;  
        width:100%;   
        height:100%;  
        overflow-x:scroll; 
        overflow-y:hidden; 
        margin-left:0; 
        left:0;
        margin-top: -8,25%; }

和html / php：

         <div id="scroll">
            <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
            <script src="http://lichtspielfotografie.com/wp-content/themes/lichtspiel/js/jquery.mousewheel.js?ver=3.8.1"></script>
            <script type="text/javascript">
                    $(document).ready(function() {
                    $('html, body, *').mousewheel(function(e, delta) {
                    this.scrollLeft -= (delta * 20);
                    e.preventDefault();
                    });
                });
            </script>

            <div class="photos">
                <?php global $post; 
                $src = '';
                $breite='0px';
                $args = array( 
                'post_type' => 'attachment', 
                'numberposts' => -1, 
                'post_mime_type' => 'image', 
                'post_status' => null, 
                'post_parent' => $post->ID );
                $attachments = get_posts($args); ?>

                <?php
                if ($attachments) {
                    foreach ( $attachments as $attachment ) {
                        $src = wp_get_attachment_image_src( $attachment->ID, "attached-image");
                        if ($src) {
                            echo '<img src='.$src[0];'';
                            } 
                        echo ' height="100%"/img> &nbsp;';                          
                    }}
                ?>    
           </div> 
        </div>
    </main><!-- #main -->
</div><!-- #primary -->

我希望你能帮我把照片的宽度动态化。我对这个问题非常沮丧。

Answer 1

您可以尝试选择所有图像并迭代所有图像，获取它们的宽度，然后将其添加到容器中。另请注意，如果元素（图像）之间有一些余量，您也应该添加它。

// get all images in an html collection
var imgs = document.getElementsByTagName('img');
// initialize sum variable for holding all the images width sum
var sum = 0;
// iterate the html collection
for(var i = 0; i < imgs.length; i++) {
   // wait for images to load
   imgs[i].onload(function() {
      sum += imgs[i].width;
   });
}
// add the width to the parent element
document.getElementsByClassName('photos')[0].style.width = sum;

Answer 2

首先练习更多你的CSS样式和HTML。从照片中删除&nbsp并在它们之间留一个边距。你可以这样做：

.photos img {
    margin: 0 2px;
}

例如，在你的CSS中

。然后，要计算图像的总宽度，您需要使用javascript。

您需要遍历图像并获取每个图像的宽度。如果我们假设您接受了我的建议，并且已使用css样式（边距）替换了&nbsp，我们将使用.outerWidth。这将获得带有填充和边框宽度的图像宽度。如果我们这样说：.outerWidth(true)它也会得到边距。这就是我们需要的。要循环显示图像，我们将使用.each()。

我们走了：

var totalWidth = 0;

$('.photos > img').each(function() {
    totalWidth += $(this).outerWidth(true);
});

现在我们只需要将新宽度设置为images容器：

$('.photos').css('width', totalWidth + 'px');

如果您有其他问题，请随时提出。祝你好运：）

修改

你的html加载时必须这样做。您已在代码中使用了该功能。这是$(document).ready(function() {});。在这里，您可以在html加载后放置要执行的所有javascript代码。

所以在这种情况下你会这样做：

$(document).ready(function() { // ... other js code here ... var totalWidth = 0; $('.photos > img').each(function() { totalWidth += $(this).outerWidth(true); }); // ... other js code here ... });

您也可以将代码放入另一个js文件中，并将其加载到js库（如jQuery）下面。

水平div图像滚动动态宽度

2 个答案: