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

最新推荐文章于 2024-02-04 17:30:00 发布

最新推荐文章于 2024-02-04 17:30:00 发布 · 2.3k 阅读

文章标签：

#JavaScript #属性获取 #滚动属性的获取 #页面加载 #图片滚动 #ViewUI

JavaScript基础专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何在网页中获取元素的样式属性值，包括位置和层叠顺序，并展示了如何实现图片随滚动条滚动的效果。此外，还涉及了页面事件如滚动和加载的处理。

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>