当前位置:首页 > 开发 > Web前端 > JavaScript > 正文

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

发表于: 2014-11-10   作者:百合不是茶   来源:转载   浏览:
摘要: 1,获取样式属性值 top 与顶部的距离 left 与左边的距离 right 与右边的距离 bottom 与下边的距离 zIndex 层叠层次     例子:获取左边的宽度,当css写在body标签中时 <div id="adver" style="position:absolute;top:50px;left:1000p

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>

 

 

 

 

 

 

 

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

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
效果: 代码: 1 <head runat="server"> 2 <title></title> 3 <style type="t
jquery导航目录实现图片左右滚动并放大效果 使用方法: 1.引入jQuery类库和相关css <link href="c
在很多网站上能看到图片跟随鼠标移动的JS特效,其实做法很简单,在这里与大家分享下。 在实现这个特
使用了网上的一个JS插件,配置起来相当灵活好用,效果如下: 下面整理下使用的过程: 1.在插件网站h
没事写了个图片滚动的效果,就是下图: 简单讲下: 插件是基于jQuery写的,主要实现的功能:自动播
在开始手动敲代码之前我们先谈谈js上下滚动效果的基本原理,上个图先: 恩,图好像画的有点丑。。。
才学jquery两天。代码可能比较杂,仅供参考。 引用 http://www.zhjie.net <!DOCTYPE html PUBLIC
才学jquery两天。代码可能比较杂,仅供参考。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr
才学jquery两天。代码可能比较杂,仅供参考。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr
今天不在状态,五一快到了,俺就特想玩了。好了,天色已晚,闲话不多说,看下用javaScript 实现的图
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号