jquery快捷方式圖標視差效果代碼

jquery實現快捷方式圖標按鈕布局鼠標移動圖標視差滾動效果，利用jquery判斷XY軸隨便鼠標移動而移動。結構清晰簡單，下載即可使用。

使用方法：

1、head引入css文件

<link href="css/style.css" rel="stylesheet" type="text/css"/>

2、head引入js文件

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

3、body引入HTML代碼

<div class="industry-box">
	<div class="industry-head">
		<h2>多行業成熟App模版 一鍵使用極速制作</h2>
	</div>
	<div class="industry-wrap">
		<div class="industry-image">
			<div class="bg bg-1" data-offset="true" data-offsetx="40" data-offsety="10"></div>
			<div class="bg bg-2" data-offset="true" data-offsetx="50" data-offsety="20"></div>
			<div class="bg bg-3" data-offset="true" data-offsetx="60" data-offsety="30"></div>
			<ul data-offset="true" data-offsetx="60" data-offsety="30">
				<li class="type-1">
					<a href="javascript:;" title="">
						<img src="images/app-in01.png" alt="">
						<br>旅游
					
					</a>
				</li>
				<li class="type-2">
					<a href="javascript:;" title="">
						<img src="images/app-in02.png" alt="">
						<br>本地生活
					
					</a>
				</li>
				<li class="type-3">
					<a href="javascript:;" title="">
						<img src="images/app-in03.png" alt="">
						<br>在線商城
					
					</a>
				</li>
				<li class="type-4">
					<a href="javascript:;" title="">
						<img src="images/app-in04.png" alt="">
						<br>同城服務
					
					</a>
				</li>
				<li class="type-5">
					<a href="javascript:;" title="">
						<img src="images/app-in05.png" alt="">
						<br>家裝
					
					</a>
				</li>
				<li class="type-6">
					<a href="javascript:;" title="">
						<img src="images/app-in06.png" alt="">
						<br>教育
					
					</a>
				</li>
				<li class="type-7">
					<a href="javascript:;" title="">
						<img src="images/app-in07.png" alt="">
						<br>品牌
					
					</a>
				</li>
				<li class="type-8">
					<a href="javascript:;" title="">
						<img src="images/app-in08.png" alt="">
						<br>婚慶
					
					</a>
				</li>
				<li class="type-9">
					<a href="javascript:;" title="">
						<img src="images/app-in09.png" alt="">
						<br>新聞資訊
					
					</a>
				</li>
				<li class="type-10">
					<a href="javascript:;" title="">
						<img src="images/app-in10.png" alt="">
						<br>金融
					
					</a>
				</li>
			</ul>
		</div>
		<div class="industry-btn">
			<a href="#">   更多模板   </a>
			<a href="#">   立即制作   </a>
		</div>
	</div>
</div>

<script type="text/javascript" src="js/script.js"></script>

使用聲明

1. 本站所有素材（未指定商用），僅限學習交流。
2. 會員在本站下載的原創商用和VIP素材后，只擁有使用權，著作權歸原作者及17素材網所有。
3. 原創商用和VIP素材，未經合法授權，請勿用于商業用途，會員不得以任何形式發布、傳播、復制、轉售該素材，否則一律封號處理。
4. 本平臺織夢模板僅展示和個人非盈利用途，織夢系統商業用途請預先授權。

查看演示下載資源

0 8866 55

軟件 Dreamweaver
格式 HTML
作者歪秀
版權 ? 原創商用（獨家） i

版權聲明

此作品是由17素材網簽約用戶上傳，17素材網擁有版權；未經17素材網書面授權，請勿作他用。人物肖像，字體及音頻如需商用需第三方額外授權；

17素材網尊重知識產權，如知識產權權利人認為平臺內容涉嫌侵權，可通過郵件：3264130392@qq.com提出書面通知，我們將及時處理。

網站提供的黨政主題相關內容（國旗、國徽、黨徽...），目的在于配合國家政策宣傳，僅限個人學習分享使用，禁止用于任何廣告和商用目的。