分享一个自已写的仿iphone手机滑动效果的JS代码....

最新推荐文章于 2020-12-28 09:53:33 发布

weixin_30675967

最新推荐文章于 2020-12-28 09:53:33 发布

阅读量158

点赞数

原文链接：http://www.cnblogs.com/playerlife/archive/2012/09/25/2701251.html

版权

本来打算得个闲写一个纯手机端效果的展示性网站.觉得挺酷的....

.......看来最近是木有时间了...下面的代码也只是开了个头....有兴趣的童鞋可以和我联系一起搞.....

现在只做了一个滑动的效果...还是点击后切换的效果和关闭的效果没做...当然了..还包括后台的数据交互.........and so on............hoho....

jquery.js链的是远程的url,以前做的一个项目,南京医药公司的........占个小小的请求...南京医药应该不会有意见吧嘎嘎.....(建议down下代码后还是链本地的吧..不道德啊... : )

<!DOCTYPE html>
<html>
<head>
<meta  charset="utf-8" />
<title>index</title>

<style>
* {margin:0; padding:0}
html, body { overflow:hidden; }
.base-con {
	top:0;
	position:absolute;
	border:2px solid #ccc;
}

.cont {
	width:1000px;
	height:400px;
	margin:0 auto;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-200px;
	margin-left:-500px;
}

.page1 ul li {
	width:212px;
	height:132px;
	background-color:green;
	border-radius:5px;
	float:left;
	margin:35px 19px;
	padding:0;
	color:#000;
}

.page2 ul li {
	width:212px;
	height:132px;
	background-color:blue;
	border-radius:5px;
	float:left;
	margin:35px 19px;
	padding:0;
	color:#000;
}


.page3 ul li {
	width:212px;
	height:132px;
	background-color:red;
	border-radius:5px;
	float:left;
	margin:35px 19px;
	padding:0;
	color:#000;
}


.rootContainer {
	position:absolute;	
}

.quene {
	position:absolute;
	text-align:center;
	bottom:100px;
	padding:5px;
	border:1px;
	width:100%;
}
</style>
<script src="http://style.cggol.com/js/jquery.min.js"></script>
<script>
	//disabled right mouse..
	 function disRightMouse()
	 {
		 $(document).bind("contextmenu",function(e){   
				 return false;   
		  });
	 }
	 disRightMouse();
</script>
</head>
<body>
	<div class="debug" style="padding-left:30px;">wating...........</div>
    <div class="rootContainer">
        <div class="base-con pos1" style="border:2px solid red">
             <div class="cont page1">
                <ul>
                    <li>page1</li>
                    <li>page2</li>
                    <li>page3</li>
                    <li>page4</li>
                    <li>page5</li>
                    <li>page6</li>
                    <li>page7</li>
                    <li>page8</li>
                </ul>
            </div>
        </div>
        <div class="base-con pos2" style="border:2px solid blue">
         <div class="cont page2">
                <ul>
                    <li>page1</li>
                    <li>page2</li>
                    <li>page3</li>
                    <li>page4</li>
                    <li>page5</li>
                    <li>page6</li>
                    <li>page7</li>
                    <li>page8</li>
                </ul>
            </div> 
        </div>
        <div class="base-con pos3" style="border:2px solid green">
         <div class="cont page3">
            <ul>
                <li>page1</li>
                <li>page2</li>
                <li>page3</li>
                <li>page4</li>
                <li>page5</li>
                <li>page6</li>
                <li>page7</li>
                <li>page8</li>
            </ul>
         </div>
        </div>
    </div>

<!--
############# 初使化的时候..当前页小图加载完后,,,ready事件中加载当前页对应的大图
############# 显示对象的容器宽高度写死.然后让它自适应每一个浏览器的显示分辨率，页面每次的滚动都是显示器的分辨的宽为基调212x132
############# 初使化3个容器.....一个可见..一个等待滑动.....当进行滑动后...ajax从后面取第3个容器的数据..并初使化..等待用户滑动进行..依次类推..
############# 始终保持3个容器等待状态
############# 后台返回一个json格式的数据...前台进行解析渲染
############# 前台根据滑动的索引来决定容器加载那些数据, 后台对数据进行分页，，，
############# 当前页的小图标加载完成后,,
############# 当滑动到当前页时...将加载对应的大图,用户点击时..不需要再次加载........
-->

<script>

	//高度自适应..宽度为显示器宽,设置容器的大小和位置
	
	function initContainer()
	{
		 window.winWidth = window.screen.width;
		var conList = $(".base-con");
		conList.css("width", winWidth);
		conList.css("height", "500px");
		var conLen = conList.length;
		for( var i = 0; i <conLen;i++) {
			var con = conList.eq(i);
			con.css("left", (i-1) * winWidth + "px");
		}
		
	}
	initContainer();

	$(document).ready(function(){
							   
			/**
			*拖动事件
			*/
			var startX, startY;
			var basePoint = 0; 
			var stargDis;
			var distance;
			var maxDistance = 300;
			var rootContainer = $(".rootContainer");;	
			var doc = $(document);	
			var debug = $(".debug");
			var animateSpeed = 500;
			var recoverSpeed = 100;
			
			doc.mousedown(function(event){debug.text("mouse...down...")	   
				startX = event.screenX;						 
				doc.bind("mousemove", moveHandler);	
				startX = event.screenX;
			});
			
			doc.mouseup(function(){ debug.text("mouse...up...");								   
			if(distance <maxDistance)
			{
				recoverPosition(distance);
			}
				doc.unbind("mousemove");			
			});
			
			function moveHandler(event)
			{
				debug.text(event.screenX + "===" +  event.screenY);
				distance = event.screenX - startX
				movePanel(distance);
				if(event.screenX - startX > maxDistance){
					doc.unbind("mousemove");	
					slideRight();
					return;
				}
				if (event.screenX - startX < -maxDistance) {
					doc.unbind("mousemove");	
					slideLeft();	
					return;
				}
			}
			
			function recoverPosition(dis)
			{
				if(dis<0)
				{
					rootContainer.animate({ 
					left: basePoint 
			 	 }, recoverSpeed )
					
				} else {
					rootContainer.animate({ 
					left: basePoint 
			 	 }, recoverSpeed );
				}
				dis = 0;
			}
			
			function movePanel(distance)
			{
				rootContainer.css("left", basePoint+distance)
			}
			
			
			
			function slideRight()
			{
				rootContainer.animate({ 
				left: basePoint+=winWidth 
			 	 }, animateSpeed );
			}
			
			function slideLeft()
			{				  
				rootContainer.animate({ 
				left: basePoint-=winWidth 
			 	 }, animateSpeed );
			}				   
	 })
</script>
<div class="quene">
1======== 2====== 3
</div>
</body>
</html>

转载于:https://www.cnblogs.com/playerlife/archive/2012/09/25/2701251.html