2017-04-27 72 views
0

我在Semplice論壇上問這個問題,但是他們被困在告訴我如何實現我想要的,所以我決定在這裏問。這似乎很簡單。我想使用此代碼:https://codepen.io/chrisboon27/pen/rEDIC並將其應用於我的背景圖片。Semplice-向網站添加Javascript;在mousemove上移動背景圖像

這裏是代碼我已經實現了我的網站:

.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可能會阻止它或什麼?

回答

0

能否請您查看此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"); 
    }); 
}); 

這是你真正想要的?

+0

此答案的內容更適合評論。 – Gnqz