移动端单面跳转
结构：
<section class="page db" id="welcome"><p>1、歡迎動畫</p></section>
<section class="page" id="s8">8 <input type="button" value="返回首页"/></section>
<section class="page" id="s7">7 <input type="button" value="點擊下一頁"/></section>
<section class="page" id="s6">6 <input type="button" value="點擊下一頁"/></section>
<section class="page" id="s5">5 <input type="button" value="點擊下一頁"/></section>
<section class="page" id="s4">4 <input type="button" value="點擊下一頁"/></section>
<section class="page" id="out">3、过渡跳轉層 自動跳轉......</section>
<section class="page db" id="index">2、首頁 <input type="button" value="點擊下一頁"/></section>CSS:切换一层隐藏一层
.page{ width: 100%; height: 100%; position: absolute; top: 0; left: 0;overflow: auto; background: #FFFFFF; display: none; font-size: 3rem; padding-top: 20px;}
.db{ display: block }
.page:nth-of-type(1) { z-index: 10 }
.page:nth-of-type(2) { z-index: 9 }
.page:nth-of-type(3) { z-index: 8 }
.page:nth-of-type(4) { z-index: 7 }
.page:nth-of-type(5) { z-index: 6 }
.page:nth-of-type(6) { z-index: 5 }
.page:nth-of-type(7) { z-index: 4 }
.page:nth-of-type(8) { z-index: 3 }注意：
//iphone默认按钮样式
input[type="button"], input[type="submit"], input[type="reset"] {
-webkit-appearance: none;
}
//去掉点击黑影
input{ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border: none;}
JS:切换利用transition、opacity实现过渡，
fnLoad()
//初始化
function fnLoad() {
var _w = document.getElementById('welcome')
var _time = new Date().getTime()
var _t = null;
_t = setInterval(function () {
if (new Date().getTime() - _time >= 3000) {
clearInterval(_t)
_w.style.opacity = 0;//此句不可省，用來觸發transitionend
_on(_w, 'transitionend', end)
_on(_w, 'WebkitTransitionend', end)
}
}, 1000)
function end() {
removeClass(_w, 'db')
fnIndex()
}
}
//首頁跳轉
function fnIndex() {
var _index = document.getElementById('index')
var _inp = _index.getElementsByTagName('input')[0]
_on(_inp, 'touchend', function () {
fnIndexOut()
})
}
//首頁跳轉過渡效果 _out層
function fnIndexOut() {
var _out = document.getElementById('out')
var _s4 = document.getElementById('s4')
var _index = document.getElementById('index')
addClass(_out, 'db')
addClass(_s4, 'db')
setTimeout(function () {
_out.style.opacity = 1;
_index.style.filter = _index.style.WebkitFilter = 'blur(5px)'
}, 14)
setTimeout(function () {
_s4.style.transition = '0.5s'
_out.style.opacity = 0;
_index.style.filter = _index.style.WebkitFilter = 'blur(0px)'
_s4.style.opacity = 1;
removeClass(_index, 'db')
removeClass(_out, 'db')
}, 2000)
}//模糊效果
_index.style.filter = _index.style.WebkitFilter = 'blur(5px)'
//測試代碼效率
var _time = new Date().getTime();
...
new Date().getTime() - _time 永遠>0//去掉默認事件；
bind(document,'touchmove', function (e) {
e.preventDefault();//去掉默认事件；
})示例二： 單面小示例二
有用提取：
模擬radio
<section class="tags" id="formTag">
<h2>给视频添加标签</h2>
<label>
<input type="radio" name="tags" id="" value="服务好"/>
<span>服务好</span>
</label>
<label>
<input type="radio" name="tags" id="" value="景色贊"/>
<span>景色贊</span>
</label>
.......tags {
padding: 0px 0 0 26px;
}
.tags label {
float: left;
margin-right: 17px;
margin-left: 3px;
padding-top: 10px;
margin-bottom: 10px;
line-height: 50px; }
.tags label input {
display: none; }
.tags label span {
float: left; border: 1px solid #cdd6e1;
padding: 0 24px; border-radius: 26px;
}
.tags input:checked + span {
border-color: #3c9bbb;
background-color: #3c9bbb;
color: #ffffff;
}See the Pen dGzKPK by elmok (@elmok) on CodePen.
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
波紋效果一
<a href="javascript:;" class="newsBtn1">
新闻
线索
<span></span>
<span></span>
<span></span>
</a>See the Pen RrZJrE by elmok (@elmok) on CodePen.
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
波紋效果二
<a href="javascript:;" class="newsBtn1">
新闻
线索
</a>See the Pen yeoEYa by elmok (@elmok) on CodePen.
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
上傳樣式:使用label包住,設置label外顯示，說明文字是span，再display:none掉input
<label>
<input type="file" name="" id=""/>
<span>导入视频</span>
</label>See the Pen YwxvGR by elmok (@elmok) on CodePen.
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
tab圖片滑動
<section id="tabPic">
<ul id="piclist">
<li><img src="img/1.jpg" alt=""/></li>
<li><img src="img/2.jpg" alt=""/></li>
<li><img src="img/3.jpg" alt=""/></li>
<li><img src="img/4.jpg" alt=""/></li>
<li><img src="img/5.jpg" alt=""/></li>
</ul>
<section class="picMask">
<p>西藏朝聖節</p>
<nav>
<a href="javascript:;" class="active"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</nav>
</section>
</section>*{margin:0;padding:0;}
ul,li{list-style:none;}
#tabPic { overflow: hidden; position: relative; }
#piclist { overflow: hidden; width: 500%; }
#piclist li { float: left; width: 20%; }
#piclist img { height: 341px; width: 100%; }
.picMask { height: 102px; position: absolute; left: 0; bottom: 0; width: 100%; background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .9), rgba(0, 0, 0, 0)); background: linear-gradient(bottom, rgba(0, 0, 0, .9), rgba(0, 0, 0, 0)); }
.picMask p { font-size: 29px; line-height: 120px; text-indent: 26px; color: #ffffff; }
.picMask nav { height: 10px; border-radius: 10px; right: 26px; top: 56px; position: absolute; }
.picMask nav a { float: left; width: 10px; height: 10px; border-radius: 5px; display: inline-block; background: #FFFFFF; opacity: .5; margin-left: 15px; }
.picMask nav a.active { opacity: 1 } fnTab()
function fnTab(){
var _tab = document.getElementById('tabPic')
var piclist = document.getElementById('piclist')
var nav = _tab.getElementsByTagName('nav')[0].children
var inow = 0;
var ix = 0;
var iw = document.documentElement.clientWidth;
var _t = 0;
var iStartTouchX = 0;
var iStartX = 0;
auto()
function auto(){
_t = setInterval(function () {
inow++
inow = inow%nav.length;
tab()
},2000)
}
bind(_tab,'touchstart',fnStart);
bind(_tab,'touchmove',fnMove);
bind(_tab,'touchend',fnEnd);
function fnStart(e){
piclist.style.transtion = 'none' //防止拖动时卡
e = e.changedTouches[0]
iStartTouchX = e.pageX; //当前坐标
iStartX = ix; //当前元素位置,move時元素的當前位置=這裏的位置+手指移動距離
clearInterval(_t);
}
function fnMove(e){
e = e.changedTouches[0]
var iDis = e.pageX - iStartTouchX //差值 == 当前手指与按下时的距离；
ix = iStartX + iDis //屏幕移动多少距离则元素的位置ix也移动多少距离,元素的位置如left设置需要加上本身的位置距离
piclist.style.WebkitTransform = piclist.style.transform = 'translateX('+ix+'px)'
}
function fnEnd(){
inow = ix / iw; //即有几屏；
inow = - Math.round(inow)
if(inow < 0 ){
inow = 0;
}
if(inow > nav.length - 1) {
inow = nav.length - 1;
}
tab()
auto()
}
function tab(){
ix = -inow * iw;
piclist.style.transition = '.5s'
piclist.style.transform='translateX('+ix+'px)'
piclist.style.WebkitTransition = '.5s'
piclist.style.WebkitTransform='translateX('+ix+'px)'
for(var i=0;i<nav.length;i++){
removeClass(nav[i],'active')
}
addClass(nav[inow],'active')
}
}
function addClass(obj, sClass) {
var aClass = obj.className.split(' ');
if (!obj.className) {
obj.className = sClass;
return;
}
for (var i = 0; i < aClass.length; i++) {
if (aClass[i] === sClass) return;
}
obj.className += ' ' + sClass;
}
function removeClass(obj, sClass) {
var aClass = obj.className.split(' ');
if (!obj.className) return;
for (var i = 0; i < aClass.length; i++) {
if (aClass[i] === sClass) {
aClass.splice(i, 1);
obj.className = aClass.join(' ');
break;
}
}
}
function bind(obj, ev, fn) {
if (obj.addEventListener) {
obj.addEventListener(ev, fn, false);
} else {
obj.attachEvent('on' + ev, function() {
fn.call(obj);
});
}
}