js实现图片随鼠标滚动的效果

1,获取样式属性值

top  与顶部的距离
left  与左边的距离
right 与右边的距离
bottom 与下边的距离
zIndex 层叠层次

 

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

<div id="adver" style="position:absolute;top:50px;left:1000px;z-index:2;"> <img src="shao4.jpg" > </div>
function init(){
     var adverObj  = document.getElementById("adver");
	 alert(adverObj.style.left);
}

 

 

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

<style type="text/css">
	#adver{
	position:absolute;
	top:50px;
	left:1000px;
	z-index:2;
	}

</style>

 

<div id="adver"> <img src="shao4.jpg" > </div>

 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的关键代码;

<script type="text/JavaScript">
 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. onload=init;
   window.onscroll=move;
   
</script>