根据浏览器窗口的大小向左移动图像

moving an image left depending on the size of the browser window

本文关键字：左移 移动 图像 浏览器 窗口      更新时间：2023-09-26

我正在尝试使用jquery cycle来旋转页面上的一些图像。图像的宽度为 1400px，这意味着对于屏幕分辨率较小的人，图像的右侧最终会消失。

我想使图像在图像

的两侧损失相等的数量，从而使图像的中心保持在观察窗口的中心。

如果您查看 http://renegadeox.com/并调整浏览器窗口的大小，您就会明白我的意思。

如何使用 javascript 相对于容器向左移动图像，从而使图像保持居中？

以下是完整性的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
</head>
<body>
    <script type="text/javascript">
    $(document).ready(function() {
        $('.slideshowWrap').cycle({
            fx: 'fade', // http://malsup.com/jquery/cycle/ Background rotater
        });
    });
    </script>
    <div style="margin: 0 auto" class="slideshowWrap">
        <div class="homeslideshow">
            <img src="background_01.jpg" alt="" />    
        </div>
        <div class="homeslideshow">
            <img src="background_02.jpg" alt="" />    
        </div>
        <div class="homeslideshow">
            <img src="background_03.jpg" alt="" />    
        </div>
    </div>
</body>
</html>

您可以使用循环插件中的自定义转换，定义自己的方法，计算正确的左值，您可以使用此代码

编辑

我尝试了这段代码并且它有效，但是这仅适用于加载事件，它不适用于调整大小，如果将整个函数绑定到 resize 事件，您可能会获得所需的效果

您还必须添加一点 CSS：

<style>
.slideshowWrap{
    width:100% !important;
    overflow:hidden;
}
</style>

这是对我有用的js： 

$(document).ready(function() {
var leftVal = 0;
    if($(window).width()<1400){
        leftVal = ((1400 - $(window).width())/2)*-1;
    }
    $('.slideshowWrap').cycle({
        fx:      'custom',
        cssBefore: { 
            left: leftVal, 
            top:  0,  
            opacity: 1,
    display: 'block'
        },
        animOut: { 
            opacity: 0 
        },
        animIn: { 
            left: leftVal, 
            top: 0, 
        },
        cssAfter: { 
            zIndex: 0
        },
    cssFirst: {
    left: leftVal
    },
        delay: -3000
    });
});
</script>

我相信上面的代码会给你想要的效果，如果不是至少知道如何完成这个，希望它有帮助！！这是循环自定义FX的完整文档的链接 http://jquery.malsup.com/cycle/adv.html

你需要有图像吗，你能使用背景图像吗？为什么不直接使用 css？

它将是响应式的，但是如果您想使插件在用户更改浏览器大小时自行调整大小 - 则需要在窗口调整大小事件中更新它。

否则，如果具有低分辨率尖叫声的人打开页面，滑块将始终占其屏幕的 100%，并且图像将居中（并"裁剪"）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
    <style type="text/css">
        .slideshowWrap {
            width: 100%;
            height: 500px;
        }
        .homeslideshow {
            height: 100%;
            width: 100%;
        }
        .slide1 {
            background: url(background_01.jpg) no-repeat 50% 50%;
        }
        .slide2 {
            background: url(background_02.jpg) no-repeat 50% 50%;
        }
        .slide3 {
            background: url(background_03.jpg) no-repeat 50% 50%;
        }
        .homeslideshow img {  display: none; }
    </style>
</head>
<body>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.slideshowWrap').cycle({
                fx: 'fade',
                slideResize: 0
            });
        });
    </script>
    <div style="margin: 0 auto" class="slideshowWrap">
        <div class="homeslideshow slide1">
            <img src="background_01.jpg" alt="" />    
        </div>
        <div class="homeslideshow slide2">
            <img src="background_02.jpg" alt="" />    
        </div>
        <div class="homeslideshow slide3">
            <img src="background_03.jpg" alt="" />    
        </div>
    </div>
</body>
</html>
相关文章：