HTML滚动背景图片视觉差特效——jquery.imageScroll.js

最新推荐文章于 2022-06-25 18:09:43 发布

Kinghiee

最新推荐文章于 2022-06-25 18:09:43 发布

阅读量1.8k

点赞数 1

文章标签： jquery.imageScroll.js 前端 css js

本文链接：https://blog.csdn.net/qq_42683219/article/details/99689627

版权

一、个人案例效果图
在这里插入图片描述

二、代码

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