jquery大气的移动营销介绍图文视差代码

jquery大气的移动营销介绍图文视差代码

收藏
jquery大气的移动营销介绍图文视差代码
jquery实现鼠标XY轴视差效果,默认页面滚动控制显示隐藏内容,适用于移动营销方式介绍图文布局代码。 说明:js效果一共俩个,第一实现背景随着鼠标流动,第二实现滚动显示隐藏的内容,判断浏览器的高度。 结构清晰,下载即可使用。
  • 软件 Dreamweaver
  • 格式 HTML
  • 作者 歪秀
  • 上传时间 7年前

使用方法:

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>

使用声明

1. 本站所有素材(未指定商用),仅限学习交流请勿用于商业用途。
2. 会员在本站下载的原创商用和VIP素材后,只拥有使用权,著作权归原作者及17素材网所有。
3. 原创商用和VIP素材,未经合法授权,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途,织梦系统商业用途请预先授权。