一、個人案例效果圖
二、代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/default.css" target="_blank" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="css/normalize.css" target="_blank" rel="external nofollow" />
</head>
<style>
body { margin: 0; padding: 0;}
section {
padding: 5% 15%;
margin: 0 auto;
background-color: white;
box-shadow: 0 2px 10px silver;
text-align: center;
}
.title{
font-family: supremeH;
font-size: 3vw;
}
.title_next{
font-size: 1vw;
font-family:supremeH;
}
@font-face {
font-family:supremeH;
src: url(fonts/Hasteristico.ttf);
}
</style>
<body>
<div class="img-holder" data-image="img/autumn_season-1600x900.jpg" data-width="1600" data-height="900" data-extra-height="50"></div>
<section>
<div class="title">Supreme H 案例示範</div>
<div class="title_next">
<h3>這裡是jquery.imageScroll.js插件</h3>
<h4>第一步：導入jquery.min.js和jquery.imageScroll.js</h4>
</div>
</section>
<div class="img-holder" data-image="img/german_landscapes-1600x900.jpg"></div>
<section>
<div class="title_next">
<h4>第二步：初始化$('.img-holder').imageScroll({})</h4>
<h4>第三步：導入完js後，可以添加在div中添加 class="img-holder" data-image="img/autumn_season-1600x900.jpg" data-width="1600" data-height="900" data-extra-height="50"</h4>
<h4>第四步：在初始化中選擇的什麼類在第三步中就應該是什麼類。比如在第二步中是.img-holder，在第三部中應該在div中加入img-holder類</h4>
</div>
</section>
<div class="img-holder" data-image="img/japan_digital_nature-1680x1050.jpg"></div>
<section>
<div class="title_next">
<h4>第五步：如果想進一步了解可以參考我的源代碼</h4>
</div>
</header>
</section>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.imageScroll.js"></script>
<script>
$('.img-holder').imageScroll({
// image: null,
// imageAttribute: 'image',
// container: $('body'),
// windowObject: $(window),
// speed:.2,
// coverRatio:.75,
// coverRatio:1,
// holderClass: 'imageHolder',
// imgClass: 'img-holder-img',
// holderMinHeight: 200,
// holderMaxHeight: null,
// extraHeight: 50,
// mediaWidth: 1600,
// mediaHeight: 900,
// parallax: true,
// touch: false
});
</script>
</body>
</html>