2014-01-10 54 views
0

是我已經有了如何視差我剛開始學習視差這裏利潤率最高值

<!DOCTYPE HTML> 
<html> 
<head> 
    <title> test parallax </title> 
    <meta charset="UTF-8"> 
    <script src="jquery.js"></script> 
    <style type="text/css"> 
    body,ul,li,div,h1{ 
     margin: 0; 
      padding: 0; 
    } 

    body{ 
     background: url(2.jpg); 
    } 
    #kotakgede{ 
     width: 960px; 
     height: 2000px; 
     margin: auto; 
     position: relative; 
    } 

    .kotak1,.kotak2{ 
     width: 500px; 
     height: 300px 
    } 

    .kotak1{ 
     background: red; 
     position: absolute; 
     top: 200px; 
     display: inline-block; 
    } 

    .kotak2{ 
     background: blue; 
     top: 800px; 
     position: absolute; 
     right: 0; 
    } 

</style> 
</head> 
<body> 
    <div id="kotakgede" > 
    <div data-speed='10' class='kotak1 parallax'><h1>Kotak Satu</h1></div> 
    <div class='parallax kotak2' data-speed='100'><h1>Kotak Dua</h1></div> 
    </div> 

<script type="text/javascript"> 
    $('.parallax').each(function(){ 
    var $bgobj = $(this); 

    $(window).scroll(function() { 
     var posisi = -(($(window).scrollTop() - $bgobj.offset().top)/$bgobj.data('speed')); 

     var koordinat = '50% '+ posisi + 'px'; 

     $bgobj.css({ 'top': koordinat }); 
    }); 
}); 
</script> 
</body> 
</html> 

當我在DIV定義背景圖片和更改bgobj.css backgroundPosition其作品,但我要的就是讓我用「頂部」定位使用視差的小盒子,但現在它不工作

請幫助

回答

0

你把背景圖像中<body><div>和創建奇形怪狀的字符串變量: '50% '+ posisi + 'px'