Question

我正在尝试使用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跟着这封信，仍然没有响应代码。有人帮我弄清楚我错过了什么/做错了。

的编辑/格式化 的

Answer 1

您是否包含jquery库版本，如jquery1.6.js。

<!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>

由于

PLAX parallaxing无法正常工作

1 个答案: