jquery实现鼠标XY轴视差效果,默认页面滚动控制显示隐藏内容,适用于移动营销方式介绍图文布局代码。
说明:js效果一共俩个,第一实现背景随着鼠标流动,第二实现滚动显示隐藏的内容,判断浏览器的高度。 结构清晰,下载即可使用。
使用方法:
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 style="height:400px;"></div> <!-- 滚动显示 里面的内容 默认需要在“marketing-box”上面加上高度 需向下滑动 才可显示内容 -->
<div class="marketing-box">
<div class="marketing-head">
<h2>全方位移动营销时代,你准备好了吗?</h2>
<p>十年巨变!移动互联网已颠覆我们的时代,商业、社交、视频、新闻、工具等领域,移动应用渗透率已超过80%,在团购、旅游和零售业,移动端收入规模已经超越PC端,手机APP已经成为企业不可或缺的线上阵地。</p>
</div>
<div class="marketing-warp image">
<div class="marketing-bg"></div>
<div class="item-1" data-offset="true" data-offsetx="40" data-offsety="20"></div>
<div class="item-2" data-offset="true" data-offsetx="20" data-offsety="10"></div>
<div class="phone phone-1"><img src="images/info-iphone1.png" alt=""></div>
<div class="phone phone-2"><img src="images/info-iphone2.png" alt=""></div>
<div class="phone phone-3"><img src="images/info-iphone3.png" alt=""></div>
<div class="phone phone-4"><img src="images/info-iphone4.png" alt=""></div>
<div class="phone phone-5"><img src="images/info-iphone5.png" alt=""></div>
</div>
</div>
<script type="text/javascript" src="js/script.js"></script>