jquery寫的一個小進度條

阿新 • • 發佈：2019-01-18

前兩天在知乎上看到有人問這種進度條的做法，就自己寫了寫。

百度了才知道設定float後要給子元素設定position為absolute或者relative才能使z-index有效。在css和jquery上都是有收穫的。
下面是程式碼，一開始設定display為fixed是我想提醒一下自己到實際應用中進度條都是fix在瀏覽器視窗上方的~~~
另外，多次使用!important改變css優先順序是不是不推薦的做法呢？改進方案有哪些呢？看來還是有很多東西需要改進。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd"> 

<html>
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
        #panel *{
            margin: 0;
            padding: 0;
            display: fixed;
        }
        .ball{
            height: 20px;
            width: 20px;
            background-color: gray 
;
            border-radius: 10px;
            float: left;
        }
        .line{
            margin-top: 6px !important;
            margin-left: -2px !important;
            margin-right: -2px !important;
            height: 8px;
            width: 104px;
            background-color: gray;
            float 
: left;
        }
        .smallBall{
            margin: 4px !important;
            display: none;
            height: 12px;
            width: 12px;
            border-radius: 6px;
            background-color: green;
        }
        .circle{
            margin: 2.5px !important;
            height: 6px;
            width: 6px;
            border:4px solid green;
            background-color: white;
            display: block;
        }
        .smallLine{
            margin-top: 2px !important;
            margin-left: -6px !important;
            margin-right: -6px !important;
            width: 0;
            height: 4px;
            background-color: green;
            position: absolute;
        }
        </style>
    </head>
    <body>
        <div id="panel">
            <div class="ball"><div class="smallBall circle"></div></div>
            <div class="line"><div class="smallLine"></div></div>
            <div class="ball"><div class="smallBall"></div></div>
            <div class="line"><div class="smallLine"></div></div>
            <div class="ball"><div class="smallBall"></div></div>
            <div class="line"><div class="smallLine"></div></div>
            <div class="ball"><div class="smallBall"></div></div>
            <div class="line"><div class="smallLine"></div></div>
            <div class="ball"><div class="smallBall"></div></div>
        </div>

        <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
        <script type="text/javascript">
        $(".ball").css("display","block");
        $(".ball").click(function(){
            var $smallBall = $(this).children(".smallBall");
            if($smallBall.hasClass("circle")){
                $smallBall.removeClass("circle");
                $smallBall.css("display","block");
                $(this).next().children(".smallLine").animate({width:"112px"},1000);
                $(this).next().next().children(".smallBall").addClass("circle");
            }
        });
        </script>
    </body>
</html>

jquery寫的一個小進度條

前兩天在知乎上看到有人問這種進度條的做法，就自己寫了寫。百度了才知道設定float後要給子元素設定position為absolute或者relative才能使z-index有效。在cs

開發 | 手把手，教你在小程式裡做一個圓形進度條

今天想把之前在微信小程式開發過程中，製作的一個圓形進度條做成一個元件，方便以後直接拿來用。建立自定義元件一、建立專案結構開啟微信開發者工具建立一個專案，新建與 pages 同級目錄 components，在 components 中新建一個目錄 circle ，circl

用Python寫一個小遊戲

python 小腳本剛學Python時間不長，但也知道了一點，看別人的參考寫了一個猜數字小遊戲，也算是禹學於樂吧。#!/usr/bin/env python #coding=utf-8

手把手教你實現一個 Vue 進度條組件！

內容分享圖片軟件 pen export padding eight 自己自動完成最近在個人的項目中，想對頁面之間跳轉的過程進行優化，想到了很多文檔或 npm 等都用到的頁面跳轉進度條，於是便想自己去實現一個，特此記錄。來看下 npm 搜索組件時候的效果： so

手把手教你實現一個 Vue 進度條元件！

最近在個人的專案中，想對頁面之間跳轉的過程進行優化，想到了很多文件或 npm 等都用到的頁面跳轉進度條，於是便想自己去實現一個，特此記錄。來看下 npm 搜尋元件時候的效果： so 下面咱們一起動手實現一下唄。定義使用方式想實現一個元件的前提，一定要想好你的需求是什麼，還要自己去定義一

用python寫一個小程式，解決買水果的問題？

問題：商店總共有三種水果，香蕉/蘋果/葡萄，單價分別為3.5/5.0/3.0元/500克。寫一個小程式實現： 1、輸出一個選單：列印每種水果的價格： 2、尋問客戶欲購買水果？ 3、客戶想購買的克數？

用Java語言如何寫一個小日曆

利用GregorianCalendar物件內部的get方法 getFirstDayweek方法獲得當地星期的起始日。我們不必知道GregorianCalendar類如何計算星期數與天數。掌握set與get，add方法。在這裡插入程式碼片 ```package

ssi(spring struts ibatis)框架下搭建一個新包寫一個小的系統理解

ssi(spring struts ibatis)框架下搭建一個新包寫一個小的系統理解不同公司有不同的結構,再此就本公司的結構簡要介紹一下: servers專案下放的是tomcat伺服器啟動的配置檔案 context.xml 中可以找到資料庫資訊 url

Android開發自定義控制元件實現一個圓形進度條【帶數值和動畫】

實現一個如下圖所示的自定義控制元件，可以直觀地展示某個球隊在某個賽季的積分數和勝場、負場、平局數首先對畫布進行區域劃分，整個控制元件分上下兩部分上邊是個大的圓環，圓環中間兩行文字，沒什麼難度，選好圓心座標和半徑後直接繪製即可，繪製文字也是如此。下部分是三個小的圓弧進

Java寫一個小日曆練習Calendar和Dated的用法

首先執行效果：附原始碼： package cn.henu.houyongkang_Calendar; import java.text.DateFormat; import java.text.ParseException; import java.text.Simp

用繼承來寫一個小故事

package com.zr.java.textam; public class TextAm {public static void main(String[] args) {// TODO Auto-generated method stubxigua axigua = new xigua();axigu

JQuery UI之(六)進度條——Progressbar

一、前言進度條可以向用戶顯示程式當前完成的百分比，讓使用者知道程式的進度，提高了使用者體驗。二、最簡單的例子首先引入樣式和js庫： <link type="text/css" rel="S

用Jquery 寫一個簡單的訊息提醒（帶聲音提示）

上週在公司做的一個Web聊天程式，需要一個即時訊息提醒並且帶有聲音提示的功能，在網上找了一下資料，Jquery有個一外掛 Jquery.Notify 這個運用比較廣，官網有他的詳細介紹（https://notifyjs.com/）我這邊只是依據我的需求簡單的運用了一下；對

Struts2寫一個小專案

寫一個Struts2的增刪改查的專案就以老師給的這道題目為例：首先分析一下這道題目需要什麼：這道題目完成查詢功能就可以了：單條件查詢就需要一個搜尋框，寫在view層（jsp頁面）多條件查詢就需要多個搜尋框了，寫一個類似這樣的介面好的開始寫這個頁面：

jquery書寫的等待進度條

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

基於Bmob後臺雲寫一個小程式

學習一段時間小程式後，想簡單的寫一個小程式，由於沒有伺服器，所以選擇了Bmob後臺雲，打算分成幾次記錄實現這個小程式所用到的知識點：主要如下：實現效果圖原始碼下載前期準備 1、Bmob賬號

用Jquery寫一個點選展示下拉選單，再點選收起來

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

Flash cs6 學習(二) 製作一個flash進度條

（一）簡單進度條製作 1，分別在第一幀和最後一幀繪製一大一小兩個矩形條。 2，在中間幀右鍵——建立補間形狀。執行，則生成具有進度條效果的動畫，如圖所示。不過此種方法制作的進度條不好看。實際中都是運用遮罩

jquery實現拖拽進度條並顯示百分比的特...

jQuery實現拖拽進度條並顯示百分比的特效。。。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> &

運用有道api介面寫一個小翻譯（簡單版）

package com.zhidi.zuoye; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStream; import java.io.InputStrea

jquery寫的一個小進度條

相關推薦