一、个人案例效果图
二、代码
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="css/default.css"><link rel="stylesheet" type="text/css" href="css/normalize.css" /></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>
