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>