本來打算得個閑寫一個純手機端效果的展示性網站.覺得挺酷的....
.......看來最近是木有時間了...下面的代碼也只是開了個頭....有興趣的童鞋可以和我聯系一起搞.....
現在只做了一個滑動的效果...還是點擊后切換的效果和關閉的效果沒做...當然了..還包括后台的數據交互.........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>