移动端单面跳转

结构：

<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.

波紋效果一

<a href="javascript:;" class="newsBtn1">
    新闻
    线索
<span></span>
<span></span>
<span></span>
</a>

See the Pen RrZJrE by elmok (@elmok) on CodePen.

波紋效果二

<a href="javascript:;" class="newsBtn1">
    新闻
    线索
</a>

See the Pen yeoEYa by elmok (@elmok) on CodePen.

上傳樣式:使用label包住,設置label外顯示，說明文字是span，再display:none掉input

<label>  
    <input type="file" name="" id=""/>
    <span>导入视频</span>
</label>

See the Pen YwxvGR by elmok (@elmok) on CodePen.

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);
            });
        }
    }

移动端单面跳转

最新文章

最近回复

分类

归档

其它