- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>div_gogogo!</title>
- <style type="text/CSS">
- <!--
- #text {
- height: 5px;
- width: 100%;
- background-color: #FF0000;
- top:0px;
- z-index:98;
- }
- #texty {
- background-color: #FF0000;
- height: 200%;
- width: 5px;
- z-index:99;
- }
- -->
- </style>
- <script type="text/javascript">
- document.onmousemove=function(e){//这里如果不加e,只有IE能用,火狐不能用;
- var e = e || window.event;//这一句话不知道是否是必须的,有兴趣的童鞋可以删掉测试一下,为了保险,我还是加上了;
- var divx=e.clientX;//IE和火狐居然都支持clientX/Y,这个真是难得,所以大家不用费心去用pageX/Y了;
- var divy=e.clientY+document.documentElement.scrollTop+document.body.scrollTop;
- //这里的document.documentElement.srcollTop是在IE下的滑轮下滑距离,document.body.scrollTop是在FF下的距离,下面有个按钮可以调用go函数,大家可以测试。
- var divmove=document.getElementById('text');
- var divmovey=document.getElementById('texty');
- if(!divmove){
- return false;
- }
- divmovey.style.left=divx-10+'px';//这里如果不加px的话,在IE下能正常,在FF下不能;
- divmove.style.top=divy-10+'px';
- }
- function go(){//这个函数用来测试滑轮距离;
- alert('ie:'+document.documentElement.scrollTop+'ff:'+document.body.scrollTop);
- }
- function change(){
- var xx=document.getElementById('text');
- var yy=document.getElementById('texty');
- if(xx.style.display!='none'){
- xx.style.display='none';
- yy.style.display='none';
- }else{
- xx.style.display='inline';
- yy.style.display='inline';
- }
- }
- </script>
- </head>
- <body>
- <input id='c' type='button' value='点击我,让十字消失/显示' onclick='change();'/>
- <div id="texty" style="position:absolute"></div>
- <div id="text" style="position:absolute"></div>
- a<br/>
- a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<input type='button' name='go' id='go' value='go' onclick='go();'/><br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>
- <!--位置一定要设置成absolute-->
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/210820135278.html
来源: http://www.codesnippet.cn/detail/210820135278.html