- <%@page contentType="text/html; charset=UTF-8"%>
- <html>
- <head>
- <style>
- #tlm{
- width: 200px;
- height: 400px;
- border : 2px solid #008000;
- position: absolute;
- right: -170px;
- top:50px;
- z-index: 7777777;
- background-p_w_picpath: url("<%=request.getContextPath() %>/pages/test/tuilamen.jpg");
- }
- </style>
- <script type="text/javascript" src="<%=request.getContextPath() %>/resources/base/tho/prototype/prototype.js"></script>
- <script type="text/javascript">
- var right=-170;
- var startFlag=true;//锁
- function moveRight(){
- right-=2;
- $('tlm').style.right=right+'px';
- }
- function moveLeft(){
- right+=2;
- $('tlm').style.right=right+'px';
- }
- function moveToRight(){
- moveRight();
- if(right>-170){
- setTimeout(moveToRight,1);
- }else{
- startFlag=false;
- }
- }
- function moveToLeft(){
- moveLeft();
- if(right<0){
- setTimeout(moveToLeft,1);
- }else{
- startFlag=false;
- }
- }
- function test(){
- if(right==0&&startFlag==true){
- moveToRight();
- }else if(right==-170&&startFlag==true){
- moveToLeft();
- }
- }
- function jiesuo(){//解锁
- startFlag=true;
- }
- </script>
- </head>
- <body style="white-space:nowrap;width:1003px;overflow:hidden; " οnclick="jiesuo()">
- <div id="tlm" οnmοusemοve="test()" >
- <ul>
- <li>11111111111</li>
- <li>22222222222</li>
- <li>33333333333</li>
- <li>44444444444</li>
- <li>55555555555</li>
- <li>66666666666</li>
- <li>77777777777</li>
- <li>88888888888</li>
- </ul>
- </div>
- </body>
- </html>
转载于:https://blog.51cto.com/zhangp210/574779