分享一个自已写的仿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>
