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>
?
?
?
?
?
?
?
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。