分享一个自已写的仿iphone手机滑动效果的JS代码....
<div id="cnblogs_post_body">本来打算得个闲写一个纯手机端效果的展示性网站.觉得挺酷的....
.......看来最近是木有时间了...下面的代码也只是开了个头....有兴趣的童鞋可以和我联系一起搞.....
现在只做了一个滑动的效果...还是点击后切换的效果和关闭的效果没做...当然了..还包括后台的数据交互.........and so on............hoho....
jquery.js链的是远程的url,以前做的一个项目,南京医药公司的........占个小小的请求...南京医药应该不会有意见吧嘎嘎.....(建议down下代码后还是链本地的吧..不道德啊... : )
<div class="cnblogs_Highlighter"><!DOCTYPE html><html><head><metacharset="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 - startXmovePanel(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>
页:
[1]