1. <%@page contentType="text/html; charset=UTF-8"%>  
  2. <html>  
  3. <head>  
  4. <style>  
  5.     #tlm{  
  6.         width: 200px;  
  7.         height: 400px;  
  8.         border : 2px solid #008000;  
  9.         position: absolute;  
  10.         right: -170px;  
  11.         top:50px;  
  12.         z-index: 7777777;  
  13.         background-p_w_picpath: url("<%=request.getContextPath() %>/pages/test/tuilamen.jpg");      
  14.     }  
  15. </style>  
  16. <script type="text/javascript" src="<%=request.getContextPath() %>/resources/base/tho/prototype/prototype.js"></script>  
  17. <script type="text/javascript">  
  18.     var right=-170;  
  19.     var startFlag=true;//锁  
  20.     function moveRight(){  
  21.             right-=2;  
  22.             $('tlm').style.right=right+'px';      
  23.     }  
  24.     function moveLeft(){  
  25.             right+=2;  
  26.             $('tlm').style.right=right+'px';  
  27.     }  
  28.       
  29.     function moveToRight(){  
  30.             moveRight();  
  31.             if(right>-170){  
  32.                 setTimeout(moveToRight,1);    
  33.             }else{  
  34.                 startFlag=false;  
  35.             }  
  36.               
  37.     }  
  38.     function moveToLeft(){  
  39.             moveLeft();  
  40.             if(right<0){  
  41.                 setTimeout(moveToLeft,1);     
  42.             }else{  
  43.                 startFlag=false;  
  44.             }  
  45.                   
  46.     }     
  47.     function test(){  
  48.             if(right==0&&startFlag==true){  
  49.                 moveToRight();  
  50.             }else if(right==-170&&startFlag==true){  
  51.                  moveToLeft();  
  52.             }  
  53.     }  
  54.     function jiesuo(){//解锁  
  55.         startFlag=true;  
  56.     }  
  57. </script>  
  58. </head>  
  59. <body style="white-space:nowrap;width:1003px;overflow:hidden; " οnclick="jiesuo()">  
  60.     <div id="tlm" οnmοusemοve="test()" >  
  61.         <ul>  
  62.             <li>11111111111</li>  
  63.             <li>22222222222</li>  
  64.             <li>33333333333</li>  
  65.             <li>44444444444</li>  
  66.             <li>55555555555</li>  
  67.             <li>66666666666</li>  
  68.             <li>77777777777</li>  
  69.             <li>88888888888</li>          
  70.         </ul>         
  71.     </div>  
  72. </body>  
  73. </html>