我正在使用一个我想要搞乱的模板并学习它所涉及的编码。其中一些仍然是一个谜。我理解其中的大部分内容！你能告诉我这里我做错了什么吗？我试图在用户从一个区域移动到另一个区域时加载图像。我希望使用延迟加载，我在这里使用，但是如果我能找到一种方法来加载一旦你点击下一个箭头，那也是很棒的。当屏幕水平移动时，我正试图在两个部分之间运行一个人的GIF。我已经绘制了所有图像并制作了所有图像。它们在Chrome和Safari中完美运行，但不适用于Firefox。这就是让我懒惰的原因。但它似乎根本不起作用。我找不到任何理由为什么我的编码不起作用。另外，我不明白为什么当我尝试使用更新版本的Jquery时，它会被淘汰。我对这一切都比较陌生，但我理解并掌握了很多。以下是模板附带的index.html style.css和engine.js的代码。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Muse - Freelancers Creative Portfolio</title>
<meta name="description" content="Portfolio of Daniel Hellier, a 21 year old Web Designer and Front-end Developer from Essex, England." />
<link rel="stylesheet" href="assets/style.css" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Handlee|Exo:400,800' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
</head>
<body>
<div id="loading"></div>
<div class="container"></div>
<section id="intro">
<h1>Tommy Potatoe</h1>
<p>07837 488564 <a href="#" title="#">hello@danielhellier.com</a></p>
<img src="assets/picture.jpg" alt="alternative text">
<ul>
<li class="message">If it helps somewhat, here's a pic.</li>
<li class="big">I <b>design</b> & <b>code</b> for the internet</li>
<li class="medium">I'm a <strong>freelancer</strong> from <strong>Essex</strong>, <b>England</b></li>
<li class="small">With over <b>7 years</b> experience</li>
</ul>
</section>
<section id="portfolio">
<h2>Portfolio</h2>
<aside class="message">showcased work & skill sets etc.</aside>
<dl>
<dt>What I Offer</dt>
<dd>Photography</dd>
<dd><abbr title="Hypertext Markup Language">HTML</abbr> & <abbr title="Cascading Style Sheets">CSS</abbr></dd>
<dd>Web Design</dd>
<dd>PHP</dd>
<dd><abbr title="Search Engine Optimization">SEO</abbr></dd>
<dd>Wordpress & vBulletin intergration</dd>
</dl>
<div class="sc_menu_wrapper" style="overflow-x: hidden; overflow-y: hidden; ">
<div class="sc_menu gallery clearfix">
<a href="#"><img src="assets/thumb.gif" alt="alternative text"></a>
<a href="#"><img src="assets/thumb2.gif" alt="alternative text"></a>
<a href="#"><img src="assets/thumb3.gif" alt="alternative text"></a>
<a href="#"><img src="assets/thumb4.gif" alt="alternative text"></a>
<a href="#"><img src="assets/thumb5.gif" alt="alternative text"></a>
<a href="#"><img src="assets/thumb6.gif" alt="alternative text"></a>
<a href="#"><img src="assets/thumb7.gif" alt="alternative text"></a>
<a href="#"><img src="assets/thumb8.gif" alt="alternative text"></a>
<a href="#"><img src="assets/thumb9.gif" alt="alternative text"></a>
</div>
<div class="loading" style="display: none; ">Loading...</div></div>
</section>
<section id="about">
<h2>About Me</h2>
<aside class="message">21/m/uk</aside>
<span class="picture"><img src="assets/picture2.jpg" alt="alternative text"></span>
<p>Bonjour. I'm a 21 year old <strong>web developer</strong> living in England.</p>
<p>Tenderloin brisket <strong>pork belly</strong> beef ribs turkey andouille. Biltong meatloaf tenderloin, prosciutto <strong>flank frankfurter</strong> pancetta. Rump sausage <strong>bresaola cow</strong>, <strong>meatloaf speck</strong>. Short loin cow tenderloin.</p>
<p>I engulf a <b>friendly</b> eccentric atmosphere where productivity and efficiency are ensuring.</p>
<p>Ham speck strip steak, pig ball tip pork loin swine short ribs ground round shoulder pastrami corned beef boudin short loin salami. Hamburger jerky.</p>
<aside class="message1">I also like smelling petrol.</aside>
</section>
<section id="contact">
<h2>Hire Me!</h2>
<aside class="message">have your people contact my people and maybe we can do magic</aside>
<form>
<input type="text" name="emailaddress" style="display:none" />
<fieldset class="input"><label for="name">Your Name <b>*</b></label> <input type="text" id="name" name="name"></fieldset>
<fieldset class="input"><label for="email">Your Email <b>*</b></label> <input type="text" id="email" name="email"></fieldset>
<fieldset class="detail"><label for="message">Message <b>*</b></label> <textarea id="message" name="message"></textarea></fieldset>
<fieldset class="input"><label for="telephone">Phone Number</label> <input type="text" id="telephone" name="telephone"></fieldset>
<fieldset class="input"><label for="website">Website URL</label> <input type="text" id="website" name="website"></fieldset>
<fieldset class="input"><label>Required Service</label>
<ul>
<li><label><input type="checkbox" name="checkbox1" value="photography" /><span>Photography</span></label></li>
<li><label><input type="checkbox" name="checkbox2" value="web design" /><span>Web Design</span></label></li>
<li><label><input type="checkbox" name="checkbox3" value="programming" /><span>Programming</span></label></li>
<li><label><input type="checkbox" name="checkbox4" value="print design" /><span>Print Design</span></label></li>
</ul>
</fieldset>
<fieldset class="input"><label>Projected Budget</label>
<ul>
<li><label><input type="radio" name="budget" value="£600-£1900" /><span>$1000 - $3000</span></label></li>
<li><label><input type="radio" name="budget" value="£1900-£3800" /><span>$3000 - $6000</span></label></li>
<li><label><input type="radio" name="budget" value="£3800-£6300" /><span>$6000 - $10,000</span></label></li>
<li><label><input type="radio" name="budget" value="£6,300+" /><span>$10,000+</span></label></li>
</ul>
</fieldset>
<button>Send Email</button>
</form>
</section>
<ul id="toggle">
<li class="previous"><a href="#contact" id="test" style="display: none; "></a></li>
<li class="next"><a href="#portfolio" style="display: block; "></a></li>
</ul>
<div class="bt1">
<image class="lazy" src="blank.png" data-original="bt1.gif" width="1830" height="704">
</div>
<div class="bt2">
<img class="lazy" src="blank.png" data-original="bt2.gif" width="1354" height="704">
</div>
<div class="bt3">
<img class="lazy" src="blank.png" data-original="bt3.gif" width="1450" height="704">
</div>
<div class="bt4">
<img class="lazy" src="blank.png" data-original="bt4.gif" width="1929" height="704">
</div>
<div class="billboard">
<img src=billboard.png>
</div>
<div class="billboardoverlay">
<img src=billboard2.png>
</div>
<div class="bg">
</div>
<div class="btw">
<img class="lazy" src="blank.png" data-original="bts.png" width="2157" height="704">
</div>
<script src="assets/jquery.lazyload.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="assets/engine.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$("img").lazyload();
});
</script>
</body>
</html>
html { overflow:hidden }
h1, h2 { margin:0 }
img { border:none }
ul { list-style-type: none }
* {outline:none}
@font-face {
font-family: plazan;
src: url('http://xy.com/Plazan.TTF');
}
@font-face {
font-family: noteworthy;
src: url('http://xy.com/noteworthy.ttf');
}
body {
margin:0;
padding:0;
background: url('img/ct.png') no-repeat;
font-family: 'plazan', sans-serif;
}
p.custom_font{
font-family: plazan; /* no .ttf */
}
p.custom_font{
font-family: noteworthy; /* no .ttf */
}
#loading {
background: rgba(0,0,0,0.95) url('img/loading.gif') no-repeat center center;
display:block;
height:100%;
width:100%;
position:fixed;
z-index:100;
cursor:wait;
}
.bg {
background-color: #1f3a80
width:9778px;
z-index:0;
}
.bt1 {
width:1830px;
height:704px;
position:absolute;
top: 0px;
left: 1456px;
}
.bt2 {
width:1354px;
height:704px;
position:absolute;
top: 0px;
left: 3940px;
}
.bt3 {
width:1450px;
height:704px;
position:absolute;
top: 0px;
left: 5295px;
z-index:4;
}
.bt4 {
width:1929px;
height:704px;
position:absolute;
top: 0px;
left: 7800px;
}
.bts {
width:2157px;
height:704px;
position:absolute;
top: 0px;
left: 5255px;
z-index:4;
}
.billboard {
position:absolute;
top: -13px;
left: 5500px;
}
.billboardoverlay {
position:absolute;
top: -13px;
left: 5500px;
z-index:99;
}
/* BEGIN PORTFOLIO */
#intro h1 {
font-size:106px;
position:absolute;
z-index:4;
top:228px;
left:111px;
text-transform:uppercase;
color:#202020;
}
#intro p {
z-index:4;
font-size:30px;
margin:0;padding:0;
position:absolute;
left:432px;
top:210px;
color:#ccc3a8;
}
#intro p a {
color:#ccc3a8;
text-decoration:none;
margin-left:25px
}
#intro p a:hover { color:#B088E7 }
#intro ul {
margin:0;
padding:0;
position:absolute;
z-index:4;
top:381px;
left:345px;
}
#intro li {
color:#fffcec;
line-height:60px;
z-index:3;
position:relative;
}
#intro li b, #intro li strong {
color:#9ccaeb;
font-weight:normal
}
#intro .big { font-size:48px }
#intro .medium { font-size:36px }
#intro .small { font-size:30px }
#intro .message {
position:absolute;
left:-235px;
top:-53px;
font-family: 'Handlee', cursive;
color:#696047;
font-size:20px;
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
-ms-transform: rotate(1deg);
-o-transform: rotate(1deg);
}
#intro img {
position:absolute;
top:380px;
left:120px;
-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-moz-box-shadow:0 0 2px 5px rgba(0,0,0,0.2);
-o-box-shadow:0 0 2px 5px rgba(0,0,0,0.2);
-webkit-box-shadow:0 0 2px 5px rgba(0,0,0,0.2);
box-shadow:0 0 2px 5px rgba(0,0,0,0.2);
}
/* END OF INTRODUCTION
BEGIN PORTFOLIO */
#portfolio {
position:absolute;
left:2808px;
top:0;
padding:0;
margin:0;
height:100%;
width:821px;
z-index:4;
}
#portfolio h2 {
color:#fffcec;
font-size:44px;
font-weight:normal;
margin-top:65px;
padding-bottom:20px;
}
#portfolio .message {
font-family: 'Handlee', cursive;
color:#696047;
font-size:24px;
position:absolute;
top:33px;
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
}
#portfolio dt {
font-family: 'noteworthy', italic;
text-transform: uppercase;
letter-spacing:1px;
font-size:26px;
font-style: italic;
color:#CC0000;
margin:0;
padding-bottom:10px;
padding-left:40px;
width:195px
}
#portfolio dd {
font-family: 'handlee', italic;
font-size:12px;
font-style:italic;
color:#000000;
background:url('img/tick.png') no-repeat top left;
width:250px;
padding-left:20px;
margin:0
}
#portfolio dl {
position:relative;
right:16px;
background: url('img/fallbacks/skillset.jpg') repeat top left;
width:300px;
margin-top:60px;
padding:10px 0 10px 10px;
-moz-border-radius:10px;
-o-border-radius:0px;
-webkit-border-radius:0px;
border-radius:0px;
}
#portfolio dd acronym {
background:url('img/acronym.png') repeat;
border:none;
cursor: help;
}
#portfolio dd acronym:hover {
background-position: bottom left;
}
#portfolio div.sc_menu_wrapper {
position:absolute;
top:0;
left:480px;
height: 100%;
width: 362px;
overflow: auto
}
#portfolio .sc_menu {
width: 362px;
}
#portfolio img {
margin:15px;
position:relative;
z-index:-1;
display: block;
-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-moz-box-shadow:0 0 2px 5px rgba(0,0,0,0.2);
-o-box-shadow:0 0 2px 5px rgba(0,0,0,0.2);
-webkit-box-shadow:0 0 2px 5px rgba(0,0,0,0.2);
box-shadow:0 0 2px 5px rgba(0,0,0,0.2);
}
#portfolio .sc_menu a {
outline: none;
display: block;
margin-bottom: 5px;
width: 342px;
margin-right:5px
}
/* END OF PORTFOLIO
BEGIN ABOUT */
#about {
position:absolute;
left:5592px;
top:0;
width:851px;
height:500px;
margin:0;
padding:45px 0;
z-index:4;
}
#about h2 {
color:#CC3300;
font-size:48px;
padding-bottom:25px;
width:296px;
font-weight:normal;
margin:0;
}
#about .message {
font-family: 'Handlee', cursive;
color:#597BDE;
font-size:25px;
position:absolute;
top:110px;
text-transform:uppercase;
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
}
#about .picture {
float:right;
background-image: -webkit-linear-gradient(top, rgba(0,0,0,.2) 0, transparent 100%);
background-image: -moz-linear-gradient(top, rgba(0,0,0,.2) 0, transparent 100%);
background-image: -ms-linear-gradient(top, rgba(0,0,0,.2) 0, transparent 100%);
background-image: -o-linear-gradient(top, rgba(0,0,0,.2) 0, transparent 100%);
background-image: linear-gradient(top, rgba(0,0,0,.2) 0, transparent 100%);
-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
padding:8px;
}
#about img {
-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
#about p {
line-height:28px;
font-size:23px;
font-family: 'noteworthy', cursive;
width:609px;
color:#000000
}
#about b,#about strong {
font-family: 'noteworthy', cursive;
color:#6A8FFF;
font-weight:normal
}
#about .message1 {
font-family: 'Handlee', cursive;
color:#000000;
font-size:30px;
margin-top:-10px;
float:right;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-o-transform: rotate(5deg);
}
/* END OF ABOUT
BEGIN CONTACT */
#contact {
width:1000px;
height:0;
position:absolute;
top:0;
left:8346px;
margin:0;
padding:35px 0;
z-index:4;
}
#contact h2 {
color:#fffcec;
font-size:48px;
padding-top:25px;
width:700px;
font-weight:normal;
}
#contact .message {
font-family: 'Handlee', cursive;
color:#696047;
font-size:25px;
position:absolute;
top:30px;
}
#contact form {
width:1000px;
margin:0;
padding-top:55px
}
#contact form fieldset {
border:none;
margin:10px 25px 5px 0;
width:240px
}
#contact .input { float:left }
#contact form label b {
color:#fd5d5d;
font-weight:normal
}
#contact form label {
font-family: "Trebuchet MS";
text-transform: uppercase;
letter-spacing:1px;
font-size:14px;
color:#fff8d4;
display:block;
margin:0;
padding:0 0 7px 0
}
#contact form input[type="text"], #contact form textarea {
font-size: 18px;
background:white;
-moz-border-radius:5px;
-o-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
transition: background-color 0.2s ease; -webkit-transition: background-color 0.2s ease; -moz-transition: background-color 0.2s ease; -o-transition: background-color 0.2s ease;
display:block;
padding:8px;
height:18px;
width:213px;
color:#3b3b3b;
border:2px solid transparent;
font-family:arial;
}
#contact form input[type="text"]:focus, #contact form textarea:focus {
color:#363636;
border:2px solid #0dace8;
-moz-box-shadow:0px 0px 9px #0dace8;
-o-box-shadow:0px 0px 9px #0dace8;
-webkit-box-shadow:0px 0px 9px #0dace8;
box-shadow:0px 0px 9px #0dace8;
}
#contact .detail {
float:right;
position:relative;
width:360px;
}
#contact label[for="message"] {
margin-left:-10px;
}
#contact form textarea {
height:240px;
width:360px;
margin-bottom:50px;
margin-left:-10px;
}
.error {
border:2px solid #fb4d4f !important;
}
.error:focus {
box-shadow:0px 0px 9px #fb4d4f !important;
-moz-box-shadow:0px 0px 9px #fb4d4f !important;
-webkit-box-shadow:0px 0px 9px #fb4d4f !important;
-o-box-shadow:0px 0px 9px #fb4d4f !important;
}
#contact form ul {
margin:0;
padding:0
}
input[type="checkbox"],
input[type="radio"],
input + span,
input + span::before {
vertical-align: bottom;
font-family: "Trebuchet MS";
text-transform:none;
margin-bottom:1px;
display:block;
-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;
height:19px;
}
input[type="checkbox"],
input[type="radio"] {
position: absolute;
top:0;
zoom: 1;
filter: alpha(opacity=0);
opacity: 0;
}
input + span,
input + span::before {
cursor:pointer;
font-size:12px;
color:#fff;
background: url(img/checkbox.gif) no-repeat top left;
padding: 1px 0px 0px 30px;
}
input + span:hover {
color:#bee9ba;
}
input:checked + span {
background-position: bottom left;
color:#4abc54;
}
#contact button {
clear:both;
padding:6px 20px 5px 20px;
display:block;
font-size:15px;
font-weight:bold;
text-align:center;
-moz-border-radius:4px;
-o-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
font-family:'arial', sans-serif;
cursor:pointer;
background: #659fed;
background: -webkit-linear-gradient(top,#659fed,#357db5); background: -moz-linear-gradient(top,#659fed,#357db5); background: -o-linear-gradient(top,#659fed,#357db5); background: -ms-linear-gradient(top,#659fed,#357db5); background: linear-gradient(top,#659fed,#357db5);
border:none;
border-bottom:3px solid #1b5f94;
color:#fff;
text-shadow:#1b5f94 0 1px 1px;
margin-left:12px;
}
#contact button:hover {
zoom: 1;
filter: alpha(opacity=90);
opacity: 0.9;
}
#contact button:active {
border-bottom:1px solid #1b5f94;
background:#659fed;
padding-bottom:7px;
}
#contact .sent {
line-height:28px;
font-size:23px;
width:609px;
color:#fffcec;
margin-top:100px;
}
#contact .sent em {
color:#9ccaeb;
font-style:normal;
}
/* END OF CONTACT
BEGIN TOGGLE CONTROLS */
ul #toggle { margin:0 }
#toggle .previous {
position:fixed;
bottom:40px;
left:40px;
z-index:6
}
#toggle .next {
position:fixed;
bottom:40px;
right:40px;
z-index:6
}
#toggle .previous a {
background:url('img/previous-arrow.png') no-repeat;
display:block;
height:111px;
width:111px;
outline: none;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter:alpha(opacity=70);
opacity:0.7
}
#toggle .next a {
background:url('img/next-arrow.png') no-repeat;
display:block;
height:111px;
width:111px;
z-index:5;
outline: none;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter:alpha(opacity=70);
opacity:0.7
}
#toggle .previous a:hover {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity:0.3
}
#toggle .next a:hover {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity:0.3
}