A JavaScript Fancier

伟大的javascript技术研究中...

  IT博客 :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  304 随笔 :: 0 文章 :: 479 评论 :: 0 Trackbacks

以前只是看别人写的鼠标跟随效果,感觉挺好玩,今天自己来了一个,兼容FF/IE哦 !!
Copy请用下面textarea中的代码。

<! 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"  xml:lang ="en"  lang ="en" >
< head >
  
< title ></ title >
  
< style  type ="text/css" >
    #level
{
      border
:  1px solid #ccc ;
      background
:  #CCFFCC ;
      width
: 100px ; height : 30px ;
      position
: absolute ;
    
}

  
</ style >
  
< script  type ="text/javascript" >
    
function  addEvent(elm, evType, fn, useCapture)
    {
          
if  (elm.addEventListener){
            elm.addEventListener(evType, fn, useCapture);
            
return   true ;
          } 
else   if  (elm.attachEvent){
            
var  r  =  elm.attachEvent( " on " + evType, fn);
            
return  r;
          } 
else  {
            alert(
" Handler could not be removed " );
          }
    }
    
var  x,y,t;
    
function  doit(evt){
        
var  event = evt || window.event;
        
var  level = document.getElementById( " level " );
        
/* 如果是第一次调用该函数level.style.left和level.style.top都为空,所以要初始化 */
        
if ( ! level.style.left)level.style.left = " 1px " ;
        
if ( ! level.style.top)level.style.top = " 1px " ;
        
// 用setTimeout函数调用该函数时event对象不存在,只有移动事件触发时event才存在
         if (event){x = (event.x || event.pageX)};
        
if (event){y = (event.y || event.pageY)};
        
var  theLeft = parseInt(level.style.left);
        
var  theTop = parseInt(level.style.top);
        
if (x != theLeft){
            
if (theLeft < x){
                level.style.left
= (theLeft + 1 ) + " px " ;
            }
else {
                level.style.left
= (theLeft - 1 ) + " px " ;
            }
        }

        
if (theTop != y){
            
if (theTop < y){
                level.style.top
= (theTop + 1 ) + " px " ;
            }
else {
                level.style.top
= (theTop - 1 ) + " px " ;
            }
        }
        
if (x != theLeft || y != theTop)
            setTimeout(
" doit() " , 100 );
    }
    addEvent(document,
" mousemove " ,doit);
  
</ script >
</ head >
< body >
< div  id ="level" >
content
</ div >
</ body >
</ html >

posted on 2006-06-26 17:05 Yemoo'S JS Blog 阅读(1584) 评论(1)  编辑 收藏 引用 所属分类: javascript个人作品

评论

# re: 写的一个跟随鼠标的层的效果(兼容FF/IE) 2007-07-30 11:23 xiong_song
很喜欢你的代码,xiong_song@126.com  回复  更多评论
  

只有注册用户登录后才能发表评论。