简单滑动门！~~~~

电玩女神 2022-08-23 14:49 110阅读 0赞

<!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
    *{ padding:0; margin:0;}
    .c{ text-align:center;}
    
    
    </style>
    </head>
    <body>
    <div id='c'></div>
    <div id='xx'></div>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    
    
    	(function(){
    		 window.calendar = function(){
    			this.init.apply(this,arguments)
    		}
    		var elm=null;
    		calendar.prototype = {
    			options : {
    			},
    			init : function(options){
    				$.extend(this,options||{});
    				
    				if(elm == null){
    					var html = [
    						"<div><div><a action='preY' href='#'>上一年</a> <a action='preM' href='#'>上一月</a> <a action='nextM' href='#'>下一月</a><a href='#' action='nextY'>下一年</a> <span id='txt'></span></div><table border=1><thead>",
    						"日一二三四五六".replace(/(.)/g,"<th>$1</th>"),
    						"</thead><tbody>",
    						new Array(7).join("<tr>"+new Array(8).join("<td></td>")+"</tr>"),
    						"</tbody></table></div>"
    					].join("");
    					
    					var self = this;
    					elm = $(html).bind("click",function(e){
    						var $dom = $(e.target),
    							action = $dom.attr("action");
    							
    						if(action){
    							self.action(action);
    						}	
    					});
    					this.$elm.html(elm);
    				}else{
    
    
    					this.$elm.append(elm);
    				}
    				this.render();
    			},
    			render : function(){
    				var date  = this.date,
    					year  = date.getFullYear(),
    					month = date.getMonth(),
    					n = new Date(year,month,1).getDay(),              //本月第一天是星期几
    					preDays = new Date(year,month,0).getDate(),       //上个月一共有多少天
    					days =  new Date(year,month+1,0).getDate();       //本月一共有多少天
    	
    				$("td",this.$elm).each(function(i,td){
    					if(i<n){
    						td.innerHTML = preDays - n+i+1;
    					}else if(i<days+n){
    						td.innerHTML = "<a href='#' style='color:#f00'>"+(i-n+1)+"</a>";
    					}else{
    						td.innerHTML = i -n - days + 1;
    					}
    				});
    				
    				$("#txt").html(date.toLocaleDateString());
    			},
    			action : function(action){
    				var date  = this.date,
    					day   = date.getDate(),
    					year  = date.getFullYear(),
    					month = date.getMonth();
    				if(action == "preY" || action == "nextY"){
    					year+=action == "preY"?-1:1; 
    				}
    				if(action == "preM" || action == "nextM"){
    					month+=action == "preM"?-1:1; 
    				}
    				
    				this.date = new Date(year,month,day);
    				this.render();
    			}
    		}
    	})();
    	
    	var xx = new calendar({
    		date : new Date(),
    		$elm : $("#c") 
    	});
    	
    	new calendar({
    		date : new Date('2012',4,4),
    		$elm : $("#xx") 
    	});	
    </script>
    </body>
    </html>

<!DOCTYPE html>  
<html lang="zh-cn">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title></title>  
<style type="text/css">  
\*\{ padding:0; margin:0;\}  
.c\{ text-align:center;\}  
  
  
</style>  
</head>  
<body>  
<div id='c'></div>  
<div id='xx'></div>  
<script type="text/javascript" src="jquery.js"></script>  
<script type="text/javascript">  
  
  
(function()\{  
 window.calendar = function()\{  
this.init.apply(this,arguments)  
\}  
var elm=null;  
calendar.prototype = \{  
options : \{  
\},  
init : function(options)\{  
$.extend(this,options||\{\});  
  
if(elm == null)\{  
var html = \[  
"<div><div><a action='preY' href='\#'>上一年</a> <a action='preM' href='\#'>上一月</a> <a action='nextM' href='\#'>下一月</a><a href='\#' action='nextY'>下一年</a> <span id='txt'></span></div><table border=1><thead>",  
"日一二三四五六".replace(/(.)/g,"<th>$1</th>"),  
"</thead><tbody>",  
new Array(7).join("<tr>"+new Array(8).join("<td></td>")+"</tr>"),  
"</tbody></table></div>"  
\].join("");  
  
var self = this;  
elm = $(html).bind("click",function(e)\{  
var $dom = $(e.target),  
action = $dom.attr("action");  
  
if(action)\{  
self.action(action);  
\}   
\});  
this.$elm.html(elm);  
\}else\{  
  
  
this.$elm.append(elm);  
\}  
this.render();  
\},  
render : function()\{  
var date  = this.date,  
year  = date.getFullYear(),  
month = date.getMonth(),  
n = new Date(year,month,1).getDay(),              //本月第一天是星期几  
preDays = new Date(year,month,0).getDate(),       //上个月一共有多少天  
days =  new Date(year,month+1,0).getDate();       //本月一共有多少天  
  
$("td",this.$elm).each(function(i,td)\{  
if(i<n)\{  
td.innerHTML = preDays - n+i+1;  
\}else if(i<days+n)\{  
td.innerHTML = "<a href='\#' style='color:\#f00'>"+(i-n+1)+"</a>";  
\}else\{  
td.innerHTML = i -n - days + 1;  
\}  
\});  
  
$("\#txt").html(date.toLocaleDateString());  
\},  
action : function(action)\{  
var date  = this.date,  
day   = date.getDate(),  
year  = date.getFullYear(),  
month = date.getMonth();  
if(action == "preY" || action == "nextY")\{  
year+=action == "preY"?-1:1;   
\}  
if(action == "preM" || action == "nextM")\{  
month+=action == "preM"?-1:1;   
\}  
  
this.date = new Date(year,month,day);  
this.render();  
\}  
\}  
\})();  
  
var xx = new calendar(\{  
date : new Date(),  
$elm : $("\#c")   
\});  
  
new calendar(\{  
date : new Date('2012',4,4),  
$elm : $("\#xx")   
\});   
</script>  
</body>

</html>

<!DOCTYPE html>
    <html>
        <head>
            <title>touch test </title>
            <style type="text/css">
                *{padding:0;margin:0}
    			input{height:100px; width:100%; display:block;}
    			#xx{
    				width:100%; height:200px; background-color:#00F; position:fixed; bottom:0;
                }
            </style>
        </head>
        <body>
        <div id="s"></div>
        <input type="button" value="up" id="up">
        <input type="button" value="down" id="down">
        <div id="xx"></div>    
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
    	
        	var m = {
    			elm : '',
    			d   : 10,
    			callBack : function(){},
    			tween: function(t,b,c,d,s){
    				return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
    			},			
    			start : function(options){
    				$.extend(this,options);
    				this.t = 0;
    				this.move();
    			},
    			move : function(){
    				if(this.t <= this.d){
    					var self = this,
    						lu= Math.round(self.tween(self.t,self.b,self.c,self.d));
    					$(this.elm).css("bottom",lu+"px");
    					self.t++;					
    					setTimeout(function(){						
    						self.move();
    					},16);										
    				}else{
    					this.callBack();
    				}
    			}
    		}
    		window.onload = function(){
    			$("#up").click(function(){
    				m.start({
    					elm : $("#xx"),	
    					b : -200,
    					c : 200,
    				});
    			})
    
    			$("#down").click(function(){
    				m.start({
    					elm : $("#xx"),	
    					b : 0,
    					c : -200
    				});									  
    
    			})
    
    		}
        </script>
        </body>
    </html>

adasdasd

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>iScroll demo: simple</title>
    
    <script type="text/javascript" src="../../src/iscroll.js"></script>
    
    <script type="text/javascript">
    
    var myScroll;
    function loaded() {
    	myScroll = new iScroll('wrapper');
    	
    	myScroll = new iScroll(document.getElementById("xx"));
    }
    
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    
    /* * * * * * * *
     *
     * Use this for high compatibility (iDevice + Android)
     *
     */
    document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
    /*
     * * * * * * * */
    
    
    /* * * * * * * *
     *
     * Use this for iDevice only
     *
     */
    //document.addEventListener('DOMContentLoaded', loaded, false);
    /*
     * * * * * * * */
    
    
    /* * * * * * * *
     *
     * Use this if nothing else works
     *
     */
    //window.addEventListener('load', setTimeout(function () { loaded(); }, 200), false);
    /*
     * * * * * * * */
    
    </script>
    
    <style type="text/css" media="all">
    body,ul,li {
    	padding:0;
    	margin:0;
    	border:0;
    }
    
    body {
    	font-size:12px;
    	-webkit-user-select:none;
        -webkit-text-size-adjust:none;
    	font-family:helvetica;
    }
    
    #header {
    	position:absolute; z-index:2;
    	top:0; left:0;
    	width:100%;
    	height:45px;
    	line-height:45px;
    	background-color:#d51875;
    	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
    	background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
    	background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
    	padding:0;
    	color:#eee;
    	font-size:20px;
    	text-align:center;
    }
    
    #header a {
    	color:#f3f3f3;
    	text-decoration:none;
    	font-weight:bold;
    	text-shadow:0 -1px 0 rgba(0,0,0,0.5);
    }
    
    #footer {
    	position:absolute; z-index:2;
    	bottom:0; left:0;
    	width:100%;
    	height:48px;
    	background-color:#222;
    	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
    	background-image:-moz-linear-gradient(top, #999, #666 2%, #222);
    	background-image:-o-linear-gradient(top, #999, #666 2%, #222);
    	padding:0;
    	border-top:1px solid #444;
    }
    
    #wrapper {
    	position:absolute; z-index:1;
    	
    	width:100%;
    	background:#aaa;
    	overflow:auto;
    }
    
    #scroller {
    	position:absolute; z-index:1;
    /*	-webkit-touch-callout:none;*/
    	-webkit-tap-highlight-color:rgba(0,0,0,0);
    	width:100%;
    	padding:0;
    }
    
    #scroller ul {
    	list-style:none;
    	padding:0;
    	margin:0;
    	width:100%;
    	text-align:left;
    }
    
    #scroller li {
    	padding:0 10px;
    
    	line-height:40px;
    	border-bottom:1px solid #ccc;
    	border-top:1px solid #fff;
    	background-color:#fafafa;
    	font-size:14px;
    }
    
    .w{background-color:#FFF; height:50px;}
    .bb{ background-color:#FF0; position:absolute; width:100%; height:300px;overflow: hidden;}
    .cc{position:absolute;width:100%;}
    </style>
    </head>
    <body>
    
    <div id="header"><a href="http://cubiq.org/iscroll">iScroll</a></div>
    <div style="position:absolute;top:45px; bottom:48px; left:0; width:100%;">
        <div id="wrapper" style="height:800px;">
            <div id="scroller" >
                <div class="w">123</div>
                <div id="xx" class="bb">
                    <div class="cc">
                        <div style="height:400px;">asdasdasdasd
                        </div>
                    </div>
                </div>  
            </div>
        </div>
    </div>
    <div id="footer"></div>
    
    </body>
    </html>