HTML&CSS:

 
  
  1. <style type="text/css">
    body {
     background-color:#FFF;
     }
    #annoyingAdvert {
     position:absolute;
     z-index:2;<!--占据同一位置的对象，显示z-index值大的-->
     display:none;<!--广告框隐藏-->
     width:100px;
     background-color:#FFC;
     padding:10px;
     margin:10px;
     border:5px solid yellow;
     }
    #closeBox {
     position: absolute;
     color:red;
     font-size:1.5em;
     top:0;
     right:0;
     }
    </style>
  2. <body>
  3. <div id="annoyingAdvert"> 
  4.     This is an incredibly annoying ad of the type you might find on some web sites. 
  5.     <div id="closeBox">&otimes;</div> 
  6. </div> 
  7. <p> 
  8. I am honored to be with you today at your commencement from one of the finest universities in the world. I never graduated form college.
  9. True be told, this is the closest I’ve ever gotten to a college graduation. Today I wan to tell you
  10. three stories from my life. That’s it.  No big deal. Just three stories. 
  11. </p> 
  12. <p> 
  13. The first story is about connecting the dots. 
  14. I dropped out of Reed College after the first 6 months, but then stayed around as a drop-in for 
  15. another 18 months or so before I really quit. So why did I drop out? 
  16. It started before I was born.  My biological mother was a young, unwed college graduate student, 
  17. and she decided to put me up for adoption. She felt very strongly that I should be adopted by 
  18. college graduates, so everything was all set for me to be adopted at birth by a lawyer and his 
  19. wife.Except that when I popped out they decided at the last minute that they really wanted a girl.
  20. So my parents, who were on a waiting list, got a call in the middle of the night asking:”We have an
  21. unexpected baby boy; do you want him?” They said:”Of course.” My biological mother later found out
  22. that my mother had never graduated from college and that my father had never graduated from high 
  23. school. She refused to sign the final adoption papers. She only relented a few months later when 
  24. my parents promised that I would someday go to college. 
  25. </p> 
  26. 。。。。。。。
  27. <body>
 
  
JavaScript代码：
 
  
 
  
  1. window.onload = initAdvert; 
  2. function initAdvert(){ 
  3.     var adBox = "annoyingAdvert"; 
  4.      
  5.     document.getElementById(adBox).style.display = "block"; //在加载页面之后显示广告框（之前隐藏）
  6.     document.getElementById(adBox).onmouseover = slide; //定义事件处理程序，当鼠标放上时移动
  7.     document.getElementById("closeBox").onclick = function(){//当鼠标点击时关闭（隐藏）广告框 
  8.         document.getElementById(adBox).style.display = "none";   
  9.     }    
  10. } 
  11.  
  12. function slide(){ 
  13.     var adBox = "annoyingAdvert"; 
  14.      
  15.     if(nextPos(adBox) <= (document.body.clientWidth-150)){ 
  16.         document.getElementById(adBox).style.left= nextPos(adBox) + "px"; 
  17.  //通过修改style.left属性，实现对象的移动。
  18.         setTimeout(slide,100); //每100毫秒，重复调用slide（），从而让框一直移动
  19.     } 
  20.      
  21.     function nextPos(elem){ //获取对象的下一个位置
  22.         return document.getElementById(elem).offsetLeft+1; 
  23.     } 
  24. } 
 
  
 
  
 
  
注：
 
  
offsetLeft
 
  
返回当前元素的左边界到它的包含元素的左边界的偏移量，以像素为单位。
 
  
offsetTop
 
  
返回当前元素的上边界到它的包含元素的上边界的偏移量，以像素为单位。 
 
  
offsetTop与style.top的区别（同样适用于offsetLeft）
 
  
一、offsetTop返回的是数字，而style.top返回的是字符串，除了数字外，还带有单位“px”。
 
  
二、offsetTop只读，而style.top可读可写。
 
  
三、如果没有给HTML元素指定过top样式，则style.top返回的是空字符串。