Question

我的javascript和/或jquery需要一些帮助。我是一名设计师，我正在努力创造一些很酷的动画效果。具体来说，根据滚动位置，我想改变一个图像。我正在处理的HTML：

javascript：

<script type="text/javascript">
var yPos;
function yScroll(){
yPos = window.pageYOffset;
if(yPos < 20){
    $("#phone").attr("src", "assets/img/phone-right.png");
    } if(yPos < 40) {
      $("#phone").attr("src", "assets/img/phone-front.png");
    } if(yPos > 41){
      $("#phone").attr("src", "assets/img/phone-left.png");
    }
window.addEventListener("scroll", yScroll);}
</script>

再次，我是一名设计师，希望通过javascript和/或jquery实现一些很酷的效果。有人可以帮忙吗？

Answer 1

以下是一些可以使用的代码

    $(document).ready(function(){

    var containerHeight = $('#container').height();

    $(window).scroll(function(){
       var scrollPosition = $(window).scrollTop();
        if (scrollPosition > (containerHeight / 2))
        {
            $('img').attr("src", "http://www.cosplay.com/i/costumes/200/313779.jpg");   
        }
        else if (scrollPosition < (containerHeight / 2))
        {
            $('img').attr("src", "http://www.unikgamer.com/characters/face/ryu-street-fighter-85.jpg"); 
        }

    }) // scroll function

})// end document

我所做的是创建一个足够大的容器以便可滚动并测试代码。然后使用.height（）我得到了容器的高度（1200px）。现在创建一个在窗口使用$（window）.scroll（）

滚动时触发的函数

最后在此函数中创建另一个变量，用于跟踪使用$（window）.scrollTop（）滚动的像素。

如果窗口滚动大于容器高度的一半大小，请将img src属性更改为另一个图像。

如果窗口滚动小于容器高度的一半大小，则将img src属性更改为原始图像。这是小提琴。我希望这有帮助

https://jsfiddle.net/PatoSalazarC/72pg342w/3/

根据滚动位置更改图像

1 个答案: