<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.img1 {
position: absolute;
top: 80px;
left: 10px;
}
.img2 {
position: absolute;
top: 80px;
right: 10px;
}
div {
1210px;
margin: 100px auto;
text-align: center;
font: 500 26px/35px "simsun";
color: red;
}
</style>
<script src="animate.js"></script>
<script>
window.onload = function () {
//需求：屏幕滚动多少，两侧的图片联动向下移动等距离。
//步骤：
//1.老三步
//2.获取被卷去的头部的值
//3.移动两个盒子。（缓动移动）
//1.老三步
var imgArr = document.getElementsByTagName("img");
window.onscroll = function () {
//2.获取被卷去的头部的值
var val = scroll().top;
//3.移动两个盒子。（缓动移动）
animate(imgArr[0],val+80);
animate(imgArr[1],val+80);
}
}
</script>
</head>
<body>
<img class="img1" src="images/aside.jpg"/>
<img class="img2" src="images/aside.jpg"/>
<div>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
水垢何曾相受，细看两俱无有，寄语揩背人，轻手，轻手，居士本来无垢.....<br>
</div>
</body>
</html>
//缓动动画封装
function animate(ele,target) {
clearInterval(ele.timer);
ele.timer = setInterval(function () {
var step = (target-ele.offsetTop)/10;
step = step>0?Math.ceil(step):Math.floor(step);
ele.style.top = ele.offsetTop + step + "px";
console.log(1);
if(Math.abs(target-ele.offsetTop)<Math.abs(step)){
ele.style.top = target + "px";
clearInterval(ele.timer);
}
},25);
}
/**
* Created by andy on 2015/12/8.
*/
function scroll() { // 开始封装自己的scrollTop
if(window.pageYOffset != null) { // ie9+ 高版本浏览器
// 因为 window.pageYOffset 默认的是 0 所以这里需要判断
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}
else if(document.compatMode === "CSS1Compat") { // 标准浏览器 来判断有没有声明DTD
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}
return { // 未声明 DTD
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
/**
* Created by Lenovo on 2016/9/2.
*/
/**
* 通过传递不同的参数获取不同的元素
* @param str
* @returns {*}
*/
function $(str){
var str1 = str.charAt(0);
if(str1==="#"){
return document.getElementById(str.slice(1));
}else if(str1 === "."){
return document.getElementsByClassName(str.slice(1));
}else{
return document.getElementsByTagName(str);
}
}
/**
* 功能：给定元素查找他的第一个元素子节点，并返回
* @param ele
* @returns {Element|*|Node}
*/
function getFirstNode(ele){
var node = ele.firstElementChild || ele.firstChild;
return node;
}
/**
* 功能：给定元素查找他的最后一个元素子节点，并返回
* @param ele
* @returns {Element|*|Node}
*/
function getLastNode(ele){
return ele.lastElementChild || ele.lastChild;
}
/**
* 功能：给定元素查找他的下一个元素兄弟节点，并返回
* @param ele
* @returns {Element|*|Node}
*/
function getNextNode(ele){
return ele.nextElementSibling || ele.nextSibling;
}
/**
* 功能：给定元素查找他的上一个兄弟元素节点，并返回
* @param ele
* @returns {Element|*|Node}
*/
function getPrevNode(ele){
return ele.previousElementSibling || ele.previousSibling;
}
/**
* 功能：给定元素和索引值查找指定索引值的兄弟元素节点，并返回
* @param ele 元素节点
* @param index 索引值
* @returns {*|HTMLElement}
*/
function getEleOfIndex(ele,index){
return ele.parentNode.children[index];
}
/**
* 功能：给定元素查找他的所有兄弟元素，并返回数组
* @param ele
* @returns {Array}
*/
function getAllSiblings(ele){
//定义一个新数组，装所有的兄弟元素，将来返回
var newArr = [];
var arr = ele.parentNode.children;
for(var i=0;i<arr.length;i++){
//判断，如果不是传递过来的元素本身，那么添加到新数组中。
if(arr[i]!==ele){
newArr.push(arr[i]);
}
}
return newArr;
}