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

 

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

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

现在只做了一个滑动的效果...还是点击后切换的效果和关闭的效果没做...当然了..还包括后台的数据交互.........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>

  

你可能感兴趣的:(iPhone)