导航栏的js设置
<!--导航栏的滚动 --> <script type="text/javascript"> var myScroll, pullDownEl, pullDownOffset, pullUpEl, pullUpOffset, generatedCount = 0; /** * 滚动翻页 （自定义实现此方法） * myScroll.refresh(); // 数据加载完成后，调用界面更新方法 */ function pullUpAction () { setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production! var el, li, i; el = document.getElementById('thelist'); myScroll.refresh(); // 数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion) }, 1000); // <-- Simulate network congestion, remove setTimeout from production! } /** * 初始化iScroll控件 */ function loaded() { pullDownEl = document.getElementById('pullDown'); pullDownOffset = pullDownEl.offsetHeight; pullUpEl = document.getElementById('pullUp'); pullUpOffset = pullUpEl.offsetHeight; myScroll = new iScroll('wrapper', { scrollbarClass: 'myScrollbar', /* 重要样式 */ useTransition: false, /* 此属性不知用意，本人从true改为false */ topOffset: pullDownOffset, onRefresh: function () { }, onScrollMove: function () { if (this.y > 5 && !pullDownEl.className.match('flip')) { pullDownEl.className = 'flip'; this.minScrollY = 0; } else if (this.y < 5 && pullDownEl.className.match('flip')) { pullDownEl.className = ''; this.minScrollY = -pullDownOffset; } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) { pullUpEl.className = 'flip'; this.maxScrollY = this.maxScrollY; } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) { pullUpEl.className = ''; this.maxScrollY = pullUpOffset; } }, onScrollEnd: function () { if (pullUpEl.className.match('flip')) { pullUpEl.className = 'loading'; pullUpAction(); } } }); setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800); } //初始化绑定iScroll控件 document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); document.addEventListener('DOMContentLoaded', loaded, false); </script>
导航栏具体实现代码
<div id="wrapper"> <div id="scroller"> <div id="pullDown"> </div> <ul id="thelist"> <li id="tag1"><a href="#home" class="contentLink" onclick="switchTag('tag1','content1');this.blur();"><span class="selectspan1">1 </span></a></li> <li id="tag2"><a href="#home" onclick="switchTag('tag2','content2');this.blur();"><span>2</span></a></li> <li id="tag3"><a href="#home" onclick="switchTag('tag3','content3');this.blur();"><span>3</span> </a></li> <li><a href="#home" >4 </a></li> <li><a href="#home" class="contentLink">5 </a></li> <li><a href="#home" class="contentLink">6 </a></li> <li><a href="#home" class="contentLink">7 </a></li> <li><a href="#home" class="contentLink">8 </a></li> <li><a href="#home" class="contentLink">9 </a></li> <li><a href="#home" class="contentLink">10 </a></li> <li><a href="#home" class="contentLink">11 </a></li> <li><a href="#home" class="contentLink">12 </a></li> <li><a href="#home" class="contentLink">13 </a></li> <li><a href="#home" class="contentLink">14 </a></li> <li><a href="#home" class="contentLink">15 </a></li> <li><a href="#home" class="contentLink">16 </a></li> <li><a href="#home" class="contentLink">17 </a></li> </ul> <div id="pullUp"> </div> </div> </div>
导航栏的css
<style type="text/css" media="all"> #wrapper { position:absolute; z-index:1; left:0; width:10%; background:#555; overflow:auto; height: 490px; } #scroller { position:relative; /* -webkit-touch-callout:none;*/ -webkit-tap-highlight-color:rgba(0,0,0,0); float:left; width:100%; padding:0; height:auto; } #scroller ul { position:relative; list-style:none; padding:0; margin:0; width:100%; text-align:left; height:auto; } #scroller li { padding:0 10px; height:40px; line-height:40px; border-bottom:1px solid #ccc; border-top:1px solid #fff; background-color:#fafafa; font-size:14px; width: 100%; height:auto; } #scroller li > a { display:block; } /** * * 下拉样式 Pull down styles * */ @-webkit-keyframes loading { from { -webkit-transform:rotate(0deg) translateZ(0); } to { -webkit-transform:rotate(360deg) translateZ(0); } } </style>
文章页面的实现
<div id="content1" > <div id="outer"> <div id="inner"> <p> 游戏规则： 牌数合计144张 （1）包括万、饼、条、1-9各4张，共108张。 （2）字牌：东、南、西、北、中、白、发各4张，共28张 （3）花牌：春、夏、秋、冬、梅、兰、竹、菊各1张，共8张 四人一桌，玩家按照逆时针方向出牌，取牌是按开牌处顺时针方向取的，取牌每人一次取2墩即4张，每个玩家拿16张牌，都拿完后庄家牌头抓一张，开始按顺序补花。 注意事项： 1.定庄:系统随机选定一玩家做庄.连续游戏(一圈或几圈):庄家胡牌或臭庄(即流局),下一局可以连庄, 否则由庄家的下家做庄。 2.补花：抓牌结束后凡是摸到“梅、兰、竹、菊、春、夏、秋、冬”，从庄家开始牌尾补花，如果补花过程中仍摸进花牌，须等本轮四家都补过花牌后再行补牌，再次补花的顺序仍以庄为首。在游戏过程中若是摸花牌，也从排尾补花。补花是从开牌处（牌尾）按逆时针方向补的。 3.开“金”（财神）： 金牌：相当于混牌，百搭，其功能是可以替代除花牌之外的任何牌。白板可以替代这张金牌原来的功能。例如金牌是5万，则5万是金，同时白板可以当5万用。如有人打出白板，玩家可以当成5万吃，碰，及胡牌。如果金牌正好是白板，则白板本身就没有牌可代，当白板为金时，漳州人称为正金。 金牌如何产生：翻金，补花结束后庄家扔出两个骰子，根据点数从补花的跳牌处最后一张牌数，最后落在哪张上翻开即为金。如果翻金牌时翻起的牌为花牌，则放回，庄家重新扔骰子。重新开金。 金牌在游戏规则中是可以打出的，如果有人打出了金牌，别的玩家都不能胡该金牌（即没有胡金牌点炮的），也不能吃，碰该金牌。 4.分饼：开局后 庄家打出首张牌，若其他三家打出的第一张牌和庄一样，称为分饼，此时庄要给其他三家分红包 每家一底分。如果庄家打出第二张牌又被“分饼”则庄家要在第一次支付的基础上翻倍支付，以次类推。 5.臭庄（和局）：一般情况下最后留10墩牌，当有人有一花分（即四个花）或杠分则多留一墩。 最后可摸的4张牌（除去要剩的牌），若抓牌可胡的由系统自动胡牌。最后一手牌若有一家让其他三家任何一家胡牌，这局就让这一家承包所有要支付给赢家的分（所有的分包括当局的杠分和分饼等其他所有要支付的分）。若四家均未胡牌，即为和局。 在进入最后4张牌时，可以吃碰杠牌； </p> </div> </div> </div>
文章页面的js
<script type="text/javascript"> var startX,//触摸时的坐标 startY, x, //滑动的距离 y, aboveY=0; //设一个全局变量记录上一次内部块滑动的位置 var inner=document.getElementById("inner"); function touchSatrt(e){//触摸 e.preventDefault(); var touch=e.touches[0]; startY = touch.pageY; //刚触摸时的坐标 } function touchMove(e){//滑动 e.preventDefault(); var touch = e.touches[0]; y = touch.pageY - startY;//滑动的距离 //inner.style.webkitTransform = 'translate(' + 0+ 'px, ' + y + 'px)'; //也可以用css3的方式 inner.style.top=aboveY+y+"px"; //这一句中的aboveY是inner上次滑动后的位置 } function touchEnd(e){//手指离开屏幕 e.preventDefault(); aboveY=parseInt(inner.style.top);//touch结束后记录内部滑块滑动的位置 在全局变量中体现 一定要用parseInt()将其转化为整数字; }// document.getElementById("outer").addEventListener('touchstart', touchSatrt,false); document.getElementById("outer").addEventListener('touchmove', touchMove,false); document.getElementById("outer").addEventListener('touchend', touchEnd,false); </script>
文章页面的css
#outer{ 90%; height: 490px; margin: auto; overflow: hidden;float:left;}
#inner{90%; height: 2000px; background: darkgrey; margin: auto; position:relative; top:0; float:left; }
用到的js
