H5下拉刷新特效demo，動畫流暢

時間 2019-11-12
標籤 h5 下拉刷新特效 demo 動畫流暢简体版
原文原文鏈接
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui" />
    <title></title>
    <style>
        body {
            font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, Arial, 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
            color: #4C4747;
        }

        body, div, p {
            padding: 0px;
            margin: 0px;
        }

        .pull_drawing {
            position: absolute;
            top: -76px;
            width: 100%;
            padding-top: 22px;
            background: url(http://pic.c-ctrip.com/h5/tuan/load_text.png) no-repeat center 0;
            background-size: 172px 22px;
            height: 35px;
            line-height: 35px;
            text-align: center;
        }

        .loading_icon {
            position: absolute;
            margin-left: -25px;
            margin-top: 8px;
            width: 14px;
            height: 14px;
            border: 2px solid #54a5d4;
            border-radius: 50%;
            -webkit-animation: roll 1s linear infinite;
            animation: roll 1s linear infinite;
            clip: rect(0,15px,18px,0);
            line-height: 35px;
            text-align: center;
        }

        @-webkit-keyframes roll {
            0% {
                -webkit-transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
            }
        }

        @keyframes roll {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
        .main {
            width: 100%;
            border: solid 1px #0094ff;
        }
        .textbg {
            width: 100%;
            line-height: 30px;
            background-color: #F2F2F2;
            font-size: 17px;
            font-family: 'Adobe Garamond Pro';
        }
        .textbg p{
            text-indent: 30px;
        }
    </style>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body style="background-color: #f5f5f5">

    <div id="main" class="main">
        <p class="pull_drawing">
            <i class="loading_icon"></i>
            <span class="loading_text">下拉刷新中</span>
        </p>
        <div class="textbg">
            <p>
            攜程是一個在線票務服務公司，創立於1999年，總部設在中國上海。攜程旅行網擁有國內外六十萬餘家會員酒店可供預訂，是中國領先的酒店預訂服務中心。攜程旅行網已在北京、廣州、深圳、成都、杭州、廈門、青島、瀋陽、南京、武漢、南通、三亞等17個城市設立分公司，員工超過25000人。2003年12月，攜程旅行網在美國納斯達克成功上市。
            </p>
            <p>
            攜程旅行網成功整合了高科技產業與傳統旅遊行業，向超過9000萬會員提供集酒店預訂、機票預訂、度假預訂、商旅管理、特惠商戶及旅遊資訊在內的全方位旅行服務。攜程旅行網除了在自身網站上提供豐富的旅遊資訊外，還委託出版了旅遊叢書《攜程走中國》，並委託發行旅遊月刊雜誌《攜程自由行》。
            </p>
            <p>
            2015年10月26日攜程網和去哪兒宣佈合併，百度將經過此交易完成前擁有的178,702,519股去哪兒網A類普通股1和11,450,000股去哪兒B類普通股置換成11,488,381股攜程增發的普通股。[1]  2016年4月21日，攜程網和東航集團在上海簽定戰略合做框架協議，宣佈雙方及其下屬各級控股投資公司將在業務、股權、資本市場等領域開展合做。
            </p>
            <h3>旅遊度假產品</h3>
            <p>
            攜程度假提供數百條度假產品線路，包括「三亞」、「雲南」、「港澳」、「泰國」、「歐洲」「名山」、「都市」、「自駕遊」等20餘個度假專賣店，每一個「專賣店」內擁有不一樣產品組合線路多條。客人可選擇由北京、上海、廣州、深圳、杭州、成都、瀋陽、南京、青島、廈門、武漢十一地出發。
                
            </p>
            <h3>酒店預訂服務</h3>
            <p>
            攜程旅行網擁有中國領先的酒店預訂服務中心，爲會員提供即時預訂服務，合做酒店超過32000家，遍及全球138個國家和地區的5900餘個城市，有2000餘家酒店保留房。
            <h3>
            高鐵代購服務
            </h3>
            <p>
            攜程於2011年7月5日推出高鐵頻道，爲消費者提供高鐵和動車的預訂服務，「暫只提供上海市、江蘇省、浙江省、安徽省配送服務。暫提供7天內的高鐵及動車票的代購服務。」
            </p>
            <h3>攜程信用卡,功能與服務</h3>     
            <p>
            金穗攜程旅行信用卡是中國農業銀行股份有限公司（如下簡稱：中國農業銀行）與攜程旅行網合做發行的金穗系列品牌貸記卡，該卡集金穗貸記卡金融功能以及攜程VIP會員卡功能於一體，秉承中國農業銀行與攜程旅行網的優質服務。
            </p>
            <h3>主要特色</h3>       
            <p>
            1.金穗攜程旅行信用卡，便是攜程VIP會員卡，又是農行金穗貸記卡。在攜程旅行網消費既可累積攜程積分，同時還能夠累積信用卡積分（其中「攜程積分」爲：電話或網上預訂積分系數爲1，無線預訂積分系數爲2 ）。
            </p><p>
            </p><p>
            2.使用金穗攜程旅行信用卡，便可享有「金融帳戶+銀行積分+攜程積分+旅行儲備金」4個專享帳戶。
            </p><p>
            3.持金穗攜程旅行信用卡，便可預訂全球134個國家的28000餘家2-5星級酒店。
            </p><p>
            4.持金穗攜程旅行信用卡，便可實現國內、國際航線機票信息查詢；異地出發，本地訂票、取票。更能夠享受攜程獨家推出的電子機票服務。
            </p><p>
            5.憑此卡便可享受攜程VIP會員各類優惠禮遇，專享酒店折扣、機票折扣、度假折扣，其中包括千餘條度假、旅遊優惠線路以及全國3000餘家特約商戶專享餐飲娛樂高額消費折扣。
            </p>
            <h3>攜程禮品卡</h3>    
            <p>
            介紹
            </p><p>
            攜程旅行網自2011年推出代號爲「遊票」的預付卡產品，並逐步深度優化產品的用戶體驗及支付範圍，2013年，正式定名「攜程禮品卡」。已有「任我行」、「任我遊」兩類產品供選擇。
            <h3>功能用途</h3>
            <p>
            攜程禮品卡(任我行)可預訂預付費類酒店、惠選酒店、機票、旅遊度假產品、火車票產品、團購產品。(注：自由機+酒產品、門票類產品、代駕租車產品及銀行專享類旅遊度假產品等暫不支持禮品卡支付。)
            </p><p>
            攜程禮品卡(任我遊)可預訂預付費類酒店、惠選酒店、旅遊度假產品、團購產品。
            </p><p>
            攜程寶是攜程旅行網自2013年起獨家推出的禮品卡優惠套餐產品。擁有「任我行」和「任我遊」兩個系列，每一個系列分別包含 「90天」、「180天」及「月月返」三款產品。攜程寶提倡有計劃的科學出行理念。用戶可根據本身的出行需求提早規劃本身的預算，選購最適合的攜程寶產品，獲取最大的優惠。[7-8]
            <h3>票價比價</h3>
            <p>    攜程網推出的機票、火車票同時預訂功能在國內在線旅遊行業中尚屬首次出現。該功能來源於對用戶行爲習慣的深刻觀察，創新性地將機票和火車票放在同一頁面進行價格上的對比，改變了傳統火車票單一的訂票頁面模式，解決了因價格選擇難的問題。

            </p>
        </div>
    </div>

    <script>

        var slidePlug = function (target, height, loading_text, loading_icon, className, callback) {
            var _hasPhone = navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i);
            var _hasTouch = 'ontouchstart' in window;
            var _pulldownConfig = { normalStatus: "下拉便可刷新", maxStatus: "鬆開便可刷新", releaseStatus: "努力刷新中…" };
            var _start = 0,_end = 0;
            var $target = $(target),$loading_text = $(loading_text),$loading_icon = $(loading_icon);
            var _TransitionObj = {
                translate: function (height) {
                    $target.css({ "-webkit-transform": "translate(0," + height + "px)", "transform": "translate(0," + height + "px)" });
                },
                translitionTime: function (time) {
                    $target.css({ "-webkit-transition": "all " + time + "s", "transition": "all " + time + "s" });
                },
                goDefault: function () {
                    _TransitionObj.translitionTime(0.5);
                    _TransitionObj.translate(0);
                }
            };
            var _bindTouchEvents = function () {
                $target.bind("touchstart", _touchstartHandler);
                $target.bind("touchmove", _touchmoveHandler);
                $target.bind("touchend", _touchendHandler);
            };
            var _touchstartHandler = function (e) {
                $loading_icon.removeClass(className);
                var even = typeof event == "undefined" ? e : event;
                //保存當前鼠標Y座標
                _start = _hasTouch ? even.touches[0].pageY : even.pageY;
                if ($target.scrollTop() > 0) {
                    console.log($target.scrollTop());
                    //消除滑塊動畫時間
                    _TransitionObj.translitionTime(0);
                }
            };
            var _touchmoveHandler = function (e) {
                var even = typeof event == "undefined" ? e : event;
                //保存當前鼠標Y座標
                _end = _hasTouch ? even.touches[0].pageY : even.pageY;
                if (_end - _start > height) {
                    $loading_text.html(_pulldownConfig.maxStatus);
                } else {
                    $loading_text.html(_pulldownConfig.normalStatus);
                }
                even.preventDefault();
                //消除滑塊動畫時間
                _TransitionObj.translitionTime(0);
                _TransitionObj.translate(_end - _start);
            };
            var _touchendHandler = function (e) {
                //判斷滑動距離是否大於等於指定值
                if (_end - _start >= height) {
                    $loading_icon.addClass(className);
                    //設置滑塊回彈時間
                    _TransitionObj.translitionTime(1);
                    //保留提示部分
                    _TransitionObj.translate(0);
                    //執行回調函數
                    if (typeof callback == "function") {
                        callback.call(_TransitionObj, e);
                    }
                } else {
                    //返回初始狀態
                    _TransitionObj.goDefault();
                }
            }
            var exports = {
                _unbindTouchEvents : function () {
                    $target.unbind("touchstart", _touchstartHandler);
                    $target.unbind("touchmove", _touchmoveHandler);
                    $target.unbind("touchend", _touchendHandler);
                }
            }
            _bindTouchEvents();
            return exports;
        }

        var slideObj = new slidePlug(document.getElementById('main'),
            60,
            document.getElementsByClassName("loading_text"),
            document.getElementsByClassName("loading_icon"),
            "loading_icon"
            );
    </script>
</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。