HTML中鼠标滚动图片飞入效果,js实现图片随鼠标滚动的成效

1,获取样式属性值

top 与顶部的距离

left 与左边的距离

right 与右边的距离

bottom 与下边的距离

zIndex 层叠层次

例子:获取左边的宽度,当css写在body标签中时

function init(){

var adverObj = document.getElementById("adver");

alert(adverObj.style.left);

}

当css写在head标签中时,在IE浏览器中获取方式是currentStyle

#adver{

position:absolute;

top:50px;

left:1000px;

z-index:2;

}

js代码;

function init(){

var adverObj = document.getElementById("adver");

alert(adverObj.currentStyle.left);

}

2,滚动属性的获取

scrollTop :与最顶端的距离

scrollLeft:与左边的距离

滚动距离的获取:

document.documentElement.scrollTop;

document.documentElement.scrollLeft;

这两句诗获取最左边的和顶部的滚动距离

3,页面事件

onscroll 用于滚动时

onload 页面加载时

4,  图片滚动效果;

a,获取对象层

b,页面加载时获取所在层的具体位置 ,top和left

c,当滚动条滚动时,获取距离top和left的距离,同时改变层顶部和左边的位置

js的关键代码;

var adverTop ;//顶部的距离

//var adverObj ;//获得的层对象

var adverLeft;//获取左边的距离

function init(){

var adverObj = document.getElementById("adver");

alert(adverObj.currentStyle.left);

//获取图片的top和left

if(adverObj.currentStyle){

adverTop = parseInt(adverObj.currentStyle.top);

adverLeft= parseInt(adverObj.currentStyle.left);

}else{

alert('请使用IE浏览器!');

}

}

function move(){

//js动态的修改图片的位置

adverObj.style.left = adverLeft + parseInt(document.documentElement.scrollLeft)+"px";

adverObj.style.top = adverTop + parseInt(document.documentElement.scrollTop)+"px";

}

window. οnlοad=init;

window.οnscrοll=move;