javascript - PLAX视差不起作用

我正在尝试使用Cameron McEfee的PLAX jQuery plugin在标头中包含的静态背景上获得2张透明图像视差。看起来像这样：

头

<script type="text/javascript" src="/js/plax.js"></script>
<script>
$(document).ready(function () {
$('#anotherWrapperForSomeReason img').plaxify()
$.plax.enable()
})
</script>

身体

<div class="container">
<div class="wrapper">
            <div class="superfluousWrapper">
            <div id="anotherWrapperForSomeReason">
                    <div id="crosses">
                    <img id="crosses1" src="images/crossesover1.png" data-xrange="40" data-yrange="40" data-invert="false">
                    <img id="crosses2" src="images/crossesover2.png" data-xrange="20" data-yrange="20" data-invert="false">
                    <img id="stars1" src="images/starsover1.png" data-xrange="10" data-yrange="10" data-invert="true">
                    </div>
            </div>
            </div>
</div>
</div>

的CSS

.container {
    position: relative;
    top: -2px;
    }
.wrapper {
    position: relative;
    max-width: 100%;
    padding: 0 0px 0px 0px;
    overflow: hidden;
    }
.superfluousWrapper {
    position: relative;
    z-index: 4;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    }
#anotherWrapperForSomeReason {
    position: relative;
    z-index: 4;
    width: 100%;
    height: 500px;
    background-size: 100% auto;
    background-attachment: fixed;
    background: url(images/aboutheader.png) center center no-repeat;
    }
#crosses {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 496px;
    overflow: hidden;
        }
#crosses1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6;
    }
#crosses2 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    }
#stars1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    }

我在<head>中链接了plax和jQuery js，并在the directions后面加上了字母，但仍然没有任何响应。请有人帮我弄清楚我所缺少/做错了什么。

编辑/重新格式化

最佳答案

您是否包括了jquery1.6.js之类的jquery库版本。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="plax.js"></script>
<script>
$(document).ready(function()
{
$('#crosses1').plaxify({"xRange":40,"yRange":40})
$('#crosses2').plaxify({"xRange":20,"yRange":20,"invert":true})
$.plax.enable({ "activityTarget": $('.container')})
});
</script>
<style type="text/css">
.container {
    position: relative;
    top: -2px;
    }
.wrapper {
    position: relative;
    max-width: 100%;
    padding: 0 0px 0px 0px;
    overflow: hidden;
    }
.superfluousWrapper {
    position: relative;
    z-index: 4;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    }
.anotherWrapperForSomeReason {
    position: relative;
    z-index: 4;
    width: 100%;
    height: 500px;
    background-size: 100% auto;
    background-attachment: fixed;
    background: url(images/aboutheader.png) center center no-repeat;
    }
#crosses {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 496px;
    overflow: hidden;
        }
#crosses1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6;
    }
#crosses2 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    }
</style>
</head>

<body>
<div class="container">
<div class="wrapper">
            <div class="superfluousWrapper">
            <div class="anotherWrapperForSomeReason">
                    <div id="crosses">
                    <img id="crosses1" src="crossover-1.png">
                    <img id="crosses2" src="crossover-2.png">
                    </div>
            </div>
            </div>
</div>
</div>
</body>
</html>

谢谢

关于javascript - PLAX视差不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22125319/

Plax

javascript - PLAX视差不起作用