移動端滑動條（原生JS）

阿新 • • 發佈：2018-03-28

顏色 empty || 原生 pre border relative innerhtml 課程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>幹貨-課程-完成</title>
    <style>
    ul.lanren{
        margin:40px auto;

    }
    .scale_panel{
        color:#999;
        position:absolute;
        line-height:18px;
        left:60px;top: 
-0px;
    }
    .scale_panel>span:first-child{
        position: absolute;
        left: -50px;
        font-size: 20px;
    }
    .scale_panel>span:nth-child(2){
        position: absolute;
        right: -50px;
        font-size: 20px;
    }
    .scale>span{
        background-color: red;
        width:30px;
        height:30px;
        position:absolute;
        left: 
-2px;top:-15px;
        cursor:pointer;
        border-radius: 50%;
        font-size: 20px;
    }
    .scale{
        background-color: #eee;
        border-left: 1px #83BBD9 solid; 
        width: 430px; 
        height: 10px; 
        position: relative; 
        border-radius: 20px; 
    }
    .scale 
>div{ 
        background-repeat: repeat-x; 
        background-color: red; /*進度條顏色*/
        width: 0px; 
        position: absolute; 
        height: 10px; 
        width: 0; left: 0; bottom: 0; 
        border-radius: 20px;
    }
    .lanren>li{
        margin-left: 3.50px;
        position:relative;
        list-style:none;
        font-size: 30px;
    }
    #title{
        position: absolute;
        top: 20px;
        left: 30px;
    }
</style>
</head>
<body>
    <!-- 可拖拽進度條 -->
    <ul class="lanren">
        <li><span id="title">0</span>
            <div class="scale_panel">
                <div class="scale" id="bar">
                    <div></div>
                    <span id="btn"></span>
                </div>
            </div>
        </li>
    </ul>
    <script src="../lib/zepto.min.js?rev=@@hash"></script>
    <script>
// 進度條代碼
var scale = function (btn,bar,title){
    this.btn=document.getElementById(btn);
    this.bar=document.getElementById(bar);
    this.title=document.getElementById(title);
    this.step=this.bar.getElementsByTagName("div")[0];
    this.init();
};
scale.prototype={
    init:function (){
        var f=this,g=document,b=window,m=Math;
        f.btn.ontouchstart=function (e){
            var x=(e||b.event).touches[0].clientX;
            var l=this.offsetLeft;
            var max=f.bar.offsetWidth-this.offsetWidth;
            g.ontouchmove=function (e){
                var thisX=(e||b.event).touches[0].clientX;
                var to=m.min(max,m.max(-2,l+(thisX-x)));
                f.btn.style.left=to+‘px‘;
                f.ondrag(m.round(m.max(0,to/max)*100),to);
                b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();
            };
            g.ontouchend=new Function(‘this.onmousemove=null‘);
        };
    },
    ondrag:function (pos,x){
        this.step.style.width=Math.max(0,x)+‘px‘;
        this.title.innerHTML=pos+‘%‘;
    }
}
new scale(‘btn‘,‘bar‘,‘title‘);
// });
</script>
</body>
</html>

移動端滑動條（原生JS）

顏色 empty || 原生 pre border relative innerhtml 課程 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

做微信公眾號時，移動端滑動效果（swiper插件（display：none））顯示滑動問題

其中 display 顯示 width ren 按鈕沒有描述公眾號　微信公眾號的制作，其中缺少不了希望實現標題、內容、圖片的滑動效果，這時候可以選擇使用（swiper插件）實現相應效果，功能十分強大，鏈接：http://www.swiper.com.cn/

swiper的介紹以及使用（移動端滑動螢幕切換頁面案例）

一、swiper介紹 Swiper常用於移動端網站的內容觸控滑動 Swiper是純javascript打造的滑動特效外掛，面向手機、平板電腦等移動終端。 Swiper能實現輪播圖、觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。 Swiper開源、免費、穩定、使用

jsonp跨域寫淘寶搜索聯想詞（原生js）

div 註意 abs scrip 基礎屬性體驗 blur ext 一、主體 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset=

地址的三級聯動（原生js）

html： <select name="provlevel" id="provlevel" style="width: 120px;height:30px;"> <option>--請選擇省份--</option></select><select

移動端touch觸控效果原生js，獲取觸控座標

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="w

淺談前端移動端頁面開發（佈局篇）

前言的一些碎碎念：最近一直在寫移動端的頁面，不過一直是用的別人造好的輪子，很多時候並沒有想那是為什麼，那是怎麼樣要那麼寫，就跟著別人的文件去了。本以為自己對移動端的那一丟丟理解，結果很多東西都特麼有問題，所以，今天停下了手中的一些東西，來談下移動端的佈局方案吧內容有些

【前端庫】html 移動端適配（meta方法）

案例單擊我 js程式碼 ;(function(win, lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc.quer

移動端第三方登入（微信）java驗證並獲取使用者資訊

import java.io.IOException; import java.io.UnsupportedEncodingException; import java.net.URLEncoder; import java.nio.charset.Charset; import java.nio.char

簡單的選項卡製作（原生JS）

<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文件</title> <style> div{ width: 100p

移動端頁面開發（新手須知）

移動端頁面開發移動客戶端的開發型別（站在前端立場上來說），主要是三種：Native App（原生APP），也就是完全使用移動裝置系統語言寫的客戶端，iPhone iPad就是純Object-C，安卓就是純JAVA, 是效能最棒的開發方式，但靈活性不好。Web App,

（原生JS）圖片無縫滾動、圖片轉化、輪播圖、摺疊效果

1.圖片無縫滾動（原生JS）<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>無縫滾動</title&g

ASP.NET Repeater實現全選反選（原生JS）

ASPX： <input id="checkAll" name="checkAll" type="checkbox" checked="checked" onclick="ToggleChe

將ajax請求封裝為一個物件（原生js）

var AjaxUtil = { // 預設基礎選項 options : { method : "get", //預設提交的方法 url : "", //請求的路徑 required params : {}, //請求的引數 type : 'text',

【移動端適配方案二彈性佈局】Flex彈性佈局+rem實現移動端適配（JS+rem+viewport）

前端開發工程師根據UI設計師給的設計稿進行開發。為了保證在各種螢幕上的不失真，就要根據實際螢幕寬度做等比例換算，才能寫進CSS實現如下：1、設定width=device-width 也就是將layout viewport（佈局視口）的寬度設定為ideal viewport（

移動端rem配置（js動態改變和css @media配置）

一：js動態改變rem(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange'

原生移動端滑動js

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-U

H5移動端開發基礎（三）自定義滾動條、實戰-音悅臺

自定義滾動條、實戰-音悅臺自定義滾動條 js封裝 transform.js tween.js scrollBar.js 音悅臺適配樣式 html

PC和移動端判斷滑鼠（手指）滑動方向（touch方向）

//移動端 $(".demo").on("touchstart", function(e) { 　　　　e.preventDefault(); 　　　　startX = e.originalEvent.

跨域問題相關知識詳解（原生js和jquery兩種方法實現jsonp跨域）

syn con 加載 developer 兩種方法 ray exe 編寫分組 1、同源策略同源策略（Same origin policy），它是由Netscape提出的一個著名的安全策略。同源策略是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽

移動端滑動條（原生JS）

相關推薦