Javascript 当我向下滚动页面时，如何放大并将图像推到屏幕外？_Javascript_Jquery_Html_Css

Javascript 当我向下滚动页面时，如何放大并将图像推到屏幕外？

javascript jquery html css

Javascript 当我向下滚动页面时，如何放大并将图像推到屏幕外？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在设计一个网站，我想在向下滚动时放大一幅图像，当我向下滚动时，图像将被推到屏幕的左侧或右侧（就像我向下滚动时图像将离开屏幕一样）。我已经完成了滚动时的放大，但我真的不知道如何在滚动时向左/向右移动。任何帮助都将不胜感激。多谢各位编辑：以下是我到目前为止所取得的成就，关于我希望能够在图像上做些什么 HTML: <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1

我正在设计一个网站，我想在向下滚动时放大一幅图像，当我向下滚动时，图像将被推到屏幕的左侧或右侧（就像我向下滚动时图像将离开屏幕一样）。我已经完成了滚动时的放大，但我真的不知道如何在滚动时向左/向右移动。任何帮助都将不胜感激。多谢各位

编辑：

以下是我到目前为止所取得的成就，关于我希望能够在图像上做些什么

HTML:

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<body>
     <img src="http://www.freepngimg.com/download/plants/6-2-plants-free-download-png.png" class = "zoom">

    <script>
        $(window).on("scroll", function() {
            var s = Math.min(400, $(document).scrollTop()) + 200;
            $(".zoom").width(s).height(s);
        });
    </script>
</body>

CSS转换将帮助您解决以下问题：

setTimeout（resizeAfterDelay，1500）
函数resizeAfterDelay（）{
$（'div'）.addClass（'move-left'））
设置超时（moveAwayAfterDelay，1500）
}
函数moveAwayAfterDelay（）{
$（'div'）.addClass（'move-away'））
}

div{
宽度：100%；
高度：250px；
背景：轻珊瑚；
过渡：全部。5s轻松进出；
过渡属性：宽度、高度、变换；
变换：translateX（0）；
}
左移{
宽度：20%；
高度：100px；
}
div.移开{
转换：translateX（-150px）；
}

CSS转换将帮助您解决以下问题：

setTimeout（resizeAfterDelay，1500）
函数resizeAfterDelay（）{
$（'div'）.addClass（'move-left'））
设置超时（moveAwayAfterDelay，1500）
}
函数moveAwayAfterDelay（）{
$（'div'）.addClass（'move-away'））
}

div{
宽度：100%；
高度：250px；
背景：轻珊瑚；
过渡：全部。5s轻松进出；
过渡属性：宽度、高度、变换；
变换：translateX（0）；
}
左移{
宽度：20%；
高度：100px；
}
div.移开{
转换：translateX（-150px）；
}

我举了一个例子。包括此html

<div class="wrapper">
<img class="image" src="https://www.mozilla.org/media/img/firefox/home/switch-
to-firefox.fb1c114dfd84.png">
</div>

和javacscript

var oldScrollTop=0;
var newScrollTop;
$(window).scroll(function(e){

if($(window).scrollTop() <=150){ // you can manage the height of viewport of image here

newScrollTop = $(window).scrollTop()
var step = newScrollTop - oldScrollTop


var imageHeight = $('.image').css('height');
var imageWidth = $('.image').css('width');
 var imageLeft = $('.image').css('left');

var NewimageHeight = parseInt($('.image').css('height')) - step;
 var NewimageWidth = parseInt($('.image').css('width')) - step;
 var NewimageLeft =  parseInt($('.image').css('left')) -step;

$('.image').css({"height":NewimageHeight ,"width":NewimageWidth,  
"left":NewimageLeft});
oldScrollTop = newScrollTop;
}
})

var oldScrollTop=0；
var Newscorltop；
$（窗口）。滚动（功能（e）{
if（$（window）.scrollTop（）我已经做了一个例子。包括这个html
<div class="wrapper">
<img class="image" src="https://www.mozilla.org/media/img/firefox/home/switch-
to-firefox.fb1c114dfd84.png">
</div>

和javacscript
var oldScrollTop=0;
var newScrollTop;
$(window).scroll(function(e){

if($(window).scrollTop() <=150){ // you can manage the height of viewport of image here

newScrollTop = $(window).scrollTop()
var step = newScrollTop - oldScrollTop


var imageHeight = $('.image').css('height');
var imageWidth = $('.image').css('width');
 var imageLeft = $('.image').css('left');

var NewimageHeight = parseInt($('.image').css('height')) - step;
 var NewimageWidth = parseInt($('.image').css('width')) - step;
 var NewimageLeft =  parseInt($('.image').css('left')) -step;

$('.image').css({"height":NewimageHeight ,"width":NewimageWidth,  
"left":NewimageLeft});
oldScrollTop = newScrollTop;
}
})

var oldScrollTop=0；
var Newscorltop；
$（窗口）。滚动（功能（e）{
如果（$（window）.scrollTop（）如果我正确理解了您试图实现的目标，这可能会有所帮助
$(window).on("scroll", function() {
  var scrollTop = $(document).scrollTop()
  var zoomAmount = Math.min(400, scrollTop) + 200

  $(".zoom").css({
    width: zoomAmount,
    height: zoomAmount,
    left: -scrollTop * 2,
  })
})

我还对您的代码进行了一些格式化；）
让我知道这是否是您想要实现的目标。
如果我正确理解了您想要实现的目标，也许这会有所帮助
$(window).on("scroll", function() {
  var scrollTop = $(document).scrollTop()
  var zoomAmount = Math.min(400, scrollTop) + 200

  $(".zoom").css({
    width: zoomAmount,
    height: zoomAmount,
    left: -scrollTop * 2,
  })
})

我还对您的代码进行了一些格式化；）
请告诉我您是否正试图实现这一目标。
请与我们共享您的代码，这样会更容易帮助：）编辑它。谢谢：请与我们共享您的代码，这样会更容易帮助：）编辑它。谢谢：谢谢。但是，我是否可以在它移动时将div移出屏幕？谢谢！这非常有用。谢谢。但是，我是否可以在它移动时将div移出屏幕？谢谢！这非常有用。啊！这正是我想要做的！谢谢！欢迎：）我我还建议大家看一下去抖动
和节流
函数，因为如果你有很多事件侦听器，那么在每个卷轴上触发回调可能会有点重。这里有一些资源可以帮助你开始。非常感谢你提供的额外信息！我很乐意帮助；）啊！这正是我想要做的NK YOU！不客气：）我还建议您看看去抖动
和节流
函数，因为如果您有许多事件侦听器，在每个滚动上触发回调可能会有点重。下面是一些资源，让您开始。非常感谢您提供的额外信息！我很乐意提供帮助；）