模仿Parallax写一个简单的视差效果

前言

之前写项目的时候一个需求效果是两个元素需要有一个视差特效，使用的是Jquery的Parallax插件，只是为了学习一下，主要原理就是通过监听鼠标移动事件，来修改指定元素的left,top值。样例如下：

代码

DOM结构

// 希望哪个元素有视差效果，就设置clss类为parallax_item，设置data-deep值越大，移动的幅度越小
<div id="div1" class="parallax_item" data-deep="10"></div>
<div id="div2" class="parallax_item" data-deep="5"></div>
<script type="text/javascript" src="index.js"></script>
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>

 // index.js
var bigData = []
function getData() {
  var lists = getClass(".parallax_item") //元素集合
  lists.each(function (i) {
    // console.log($(this)[0].id)//获取data属性上的值
    // 先记录下每个参与视差效果元素的起始位置或属性
    bigData[i] = {}
    bigData[i].id = ''
    bigData[i].old = {}
    bigData[i].deep = ''
    bigData[i].new = {}
    //这里获取到的number类型的数据，如果是通过$(this).css('left')获取记得转化数据类型
    bigData[i].old.left = $(this).position().left 
    bigData[i].old.top = $(this).position().top
    bigData[i].deep = parseInt($(this)[0].dataset.deep)
    bigData[i].id = $(this)[0].id
  })
  return bigData
}
getData()
//绑定鼠标移动事件onmousemove,只要鼠标移动就会不断接受事件
$(document).mousemove(function (e) {
  var mouClientX = e.clientX
  var mouClientY = e.clientY
  // var bigData = getData()
  for (var i = 0, len = bigData.length; i < len; i++) {
    var deep = bigData[i].deep;
    var id = bigData[i].id
   var newtop = bigData[i].old.top +mouClientY / deep + 'px'
    var newleft = bigData[i].old.left +mouClientX / deep + 'px'
    if ($('#' + id).attr("data-deep") == deep) {
      $('#' + id).css({
        left: newleft,
        top: newtop
      })
    }
  }
})
function getClass(className) {
  return $(className);
}

遇到一些效果时，尽可能地去想自己写的话该怎么实现，先用自己能想到的方法实现，再一步一步优化。