jQuery带视差背景的搜索框页面代码

一款jQuery带视差背景的搜索框页面代码，鼠标在页面移动的时候，能看到背景图的位移变化，搜索框前面的图标可以自由替换，按钮文字也可以进行更换，喜欢的童鞋请收下吧。

分类：表单代码 > 搜索框难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需远程调用bootstrap.css样式文件，并引入一个style.css文件，代码如下：

<link type="text/css" rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
<link type="text/css" rel="stylesheet" href="css/style.css"/>

页面的body部分，主要将多个元素放入一个div容器里，代码如下：

<div id="top-image">
  <div id="content" class="container center-block">
    <div class="jumbotron">
      <div class="container">
        <h1>搜索框</h1>
        <p>带视差背景</p>
        <div class="input-group input-group-lg"> <span class="input-group-addon" id="sizing-addon1"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></span>
          <input type="text" class="form-control" placeholder="输入关键词" aria-describedby="sizing-addon1"/>
          <span class="input-group-btn">
          <button class="btn btn-default" type="button">搜 索</button>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

页面的底部，需要引入jQuery库和一个JS插件，然后启用该插件，代码如下：

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/ios-parallax.js"></script> 
<script type="text/javascript">
$(document).ready(function() {
  $('#top-image').iosParallax({
	movementFactor: 50
  });
});
</script>