对联广告
Posted 北漂阿猫
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了对联广告相关的知识，希望对你有一定的参考价值。
<!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 { width: 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;
}
以上是关于对联广告的主要内容，如果未能解决你的问题，请参考以下文章