当前位置 : 首页 > 代码 > 网页特效 > 其它特效 > jquery快捷方式图标视差效果代码

VIP商用 jquery快捷方式图标视差效果代码

jquery实现快捷方式图标按钮布局鼠标移动图标视差滚动效果,利用jquery判断XY轴随便鼠标移动而移动。 结构清晰简单,下载即可使用。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权保护,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

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>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

推荐标签

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了