Question

我在Semplice论坛上问过这个问题，但他们很难说我如何实现我想要的东西，所以我决定在这里问一下。看起来相当简单。我想使用此代码：https://codepen.io/chrisboon27/pen/rEDIC并将其应用于我的背景图片。

以下是我在我的网站中实施的代码：

    .cover-76 .cover-image {
    background:url('http://nicolebelcher.com/wp-
    content/uploads/2016/05/background1.jpg') -25px -50px;
    position:fixed ;
    top:0;
    width:100%;
    z-index:0;
    height:100%;
    background-size: calc(100% + 50px);
    }

的javascript：

    $(document).re`enter code here`ady(function() {
    var movementStrength = 70;
    var height = movementStrength / $(window).height();
    var width = movementStrength / $(window).width();
    $(".cover-76 .cover-image").mousemove(function(e){
          var pageX = e.pageX - ($(window).width() / 2);
          var pageY = e.pageY - ($(window).height() / 2);
          var newvalueX = width * pageX * -1 - 25;
          var newvalueY = height * pageY * -1 - 50;
          $('.cover-76 .cover-image').css("background-position", 
         newvalueX+"px     "+newvalueY+"px");
    });
    });

我可能做错了什么？我认为Semplice JS可能会阻止它或什么？

Answer 1

请你检查这个plunker

http://plnkr.co/edit/d5YmsgOwLwAll1h7zlsD?p=preview

$(document).ready(function() {
    var movementStrength = 70;
    var height = movementStrength / $(window).height();
    var width = movementStrength / $(window).width();
    $(".cover-image").mousemove(function(e){
          var pageX = e.pageX - ($(window).width() / 2);
          var pageY = e.pageY - ($(window).height() / 2);
          var newvalueX = width * pageX * -1 - 25;
          var newvalueY = height * pageY * -1 - 50;
          $('.cover-image').css("background-position", 
         newvalueX+"px     "+newvalueY+"px");
    });
});

这是你真的想要吗？

Semplice-将Javascript添加到网站;在mousemove上移动背景图像

1 个答案: