├── .gitignore ├── icon-font ├── fonts │ ├── icomoon.eot │ ├── icomoon.ttf │ ├── icomoon.woff │ └── icomoon.svg ├── Read Me.txt ├── demo-files │ ├── demo.js │ └── demo.css ├── style.css └── demo.html ├── README.md ├── css ├── print.css ├── ie.css └── ppt.css ├── sass ├── print.scss ├── ie.scss └── ppt.scss ├── config.rb ├── index.html └── js └── ppt.js /.gitignore: -------------------------------------------------------------------------------- 1 | log/* 2 | .sass-cache/ -------------------------------------------------------------------------------- /icon-font/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/ppt.js/master/icon-font/fonts/icomoon.eot -------------------------------------------------------------------------------- /icon-font/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/ppt.js/master/icon-font/fonts/icomoon.ttf -------------------------------------------------------------------------------- /icon-font/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/ppt.js/master/icon-font/fonts/icomoon.woff -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ppt.js 2 | 3 | 基于jquery的图片显示效果,可翻页全屏显示自定义宽高 4 | 5 | DEMO: http://www.daiwei.org/components/ppt/ 6 | -------------------------------------------------------------------------------- /css/print.css: -------------------------------------------------------------------------------- 1 | /* Welcome to Compass. Use this file to define print styles. 2 | * Import this file using the following HTML or equivalent: 3 | * */ 4 | -------------------------------------------------------------------------------- /sass/print.scss: -------------------------------------------------------------------------------- 1 | /* Welcome to Compass. Use this file to define print styles. 2 | * Import this file using the following HTML or equivalent: 3 | * */ 4 | -------------------------------------------------------------------------------- /css/ie.css: -------------------------------------------------------------------------------- 1 | /* Welcome to Compass. Use this file to write IE specific override styles. 2 | * Import this file using the following HTML or equivalent: 3 | * */ 6 | -------------------------------------------------------------------------------- /sass/ie.scss: -------------------------------------------------------------------------------- 1 | /* Welcome to Compass. Use this file to write IE specific override styles. 2 | * Import this file using the following HTML or equivalent: 3 | * */ 6 | -------------------------------------------------------------------------------- /icon-font/Read Me.txt: -------------------------------------------------------------------------------- 1 | Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures. 2 | 3 | To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts 4 | 5 | You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects. 6 | 7 | You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection. 8 | -------------------------------------------------------------------------------- /config.rb: -------------------------------------------------------------------------------- 1 | require 'compass/import-once/activate' 2 | # Require any additional compass plugins here. 3 | 4 | # Set this to the root of your project when deployed: 5 | http_path = "/" 6 | css_dir = "css" 7 | sass_dir = "sass" 8 | images_dir = "images" 9 | javascripts_dir = "js" 10 | 11 | # You can select your preferred output style here (can be overridden via the command line): 12 | # output_style = :expanded or :nested or :compact or :compressed 13 | 14 | # To enable relative paths to assets via compass helper functions. Uncomment: 15 | # relative_assets = true 16 | 17 | # To disable debugging comments that display the original location of your selectors. Uncomment: 18 | # line_comments = false 19 | 20 | 21 | # If you prefer the indented syntax, you might want to regenerate this 22 | # project again passing --syntax sass, or you can uncomment this: 23 | # preferred_syntax = :sass 24 | # and then run: 25 | # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass 26 | -------------------------------------------------------------------------------- /icon-font/demo-files/demo.js: -------------------------------------------------------------------------------- 1 | if (!('boxShadow' in document.body.style)) { 2 | document.body.setAttribute('class', 'noBoxShadow'); 3 | } 4 | 5 | document.body.addEventListener("click", function(e) { 6 | var target = e.target; 7 | if (target.tagName === "INPUT" && 8 | target.getAttribute('class').indexOf('liga') === -1) { 9 | target.select(); 10 | } 11 | }); 12 | 13 | (function() { 14 | var fontSize = document.getElementById('fontSize'), 15 | testDrive = document.getElementById('testDrive'), 16 | testText = document.getElementById('testText'); 17 | function updateTest() { 18 | testDrive.innerHTML = testText.value || String.fromCharCode(160); 19 | if (window.icomoonLiga) { 20 | window.icomoonLiga(testDrive); 21 | } 22 | } 23 | function updateSize() { 24 | testDrive.style.fontSize = fontSize.value + 'px'; 25 | } 26 | fontSize.addEventListener('change', updateSize, false); 27 | testText.addEventListener('input', updateTest, false); 28 | testText.addEventListener('change', updateTest, false); 29 | updateSize(); 30 | }()); 31 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | PPT.js 6 | 7 | 8 | 9 | 43 | 44 |
45 |

基于jquery的ppt.js组件

46 |
47 |

48 | github: https://github.com/IFmiss/ppt.js 49 |

50 |
51 | 52 | 53 | 54 | 60 | -------------------------------------------------------------------------------- /icon-font/demo-files/demo.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0; 3 | margin: 0; 4 | font-family: sans-serif; 5 | font-size: 1em; 6 | line-height: 1.5; 7 | color: #555; 8 | background: #fff; 9 | } 10 | h1 { 11 | font-size: 1.5em; 12 | font-weight: normal; 13 | } 14 | small { 15 | font-size: .66666667em; 16 | } 17 | a { 18 | color: #e74c3c; 19 | text-decoration: none; 20 | } 21 | a:hover, a:focus { 22 | box-shadow: 0 1px #e74c3c; 23 | } 24 | .bshadow0, input { 25 | box-shadow: inset 0 -2px #e7e7e7; 26 | } 27 | input:hover { 28 | box-shadow: inset 0 -2px #ccc; 29 | } 30 | input, fieldset { 31 | font-family: sans-serif; 32 | font-size: 1em; 33 | margin: 0; 34 | padding: 0; 35 | border: 0; 36 | } 37 | input { 38 | color: inherit; 39 | line-height: 1.5; 40 | height: 1.5em; 41 | padding: .25em 0; 42 | } 43 | input:focus { 44 | outline: none; 45 | box-shadow: inset 0 -2px #449fdb; 46 | } 47 | .glyph { 48 | font-size: 16px; 49 | width: 15em; 50 | padding-bottom: 1em; 51 | margin-right: 4em; 52 | margin-bottom: 1em; 53 | float: left; 54 | overflow: hidden; 55 | } 56 | .liga { 57 | width: 80%; 58 | width: calc(100% - 2.5em); 59 | } 60 | .talign-right { 61 | text-align: right; 62 | } 63 | .talign-center { 64 | text-align: center; 65 | } 66 | .bgc1 { 67 | background: #f1f1f1; 68 | } 69 | .fgc1 { 70 | color: #999; 71 | } 72 | .fgc0 { 73 | color: #000; 74 | } 75 | p { 76 | margin-top: 1em; 77 | margin-bottom: 1em; 78 | } 79 | .mvm { 80 | margin-top: .75em; 81 | margin-bottom: .75em; 82 | } 83 | .mtn { 84 | margin-top: 0; 85 | } 86 | .mtl, .mal { 87 | margin-top: 1.5em; 88 | } 89 | .mbl, .mal { 90 | margin-bottom: 1.5em; 91 | } 92 | .mal, .mhl { 93 | margin-left: 1.5em; 94 | margin-right: 1.5em; 95 | } 96 | .mhmm { 97 | margin-left: 1em; 98 | margin-right: 1em; 99 | } 100 | .mls { 101 | margin-left: .25em; 102 | } 103 | .ptl { 104 | padding-top: 1.5em; 105 | } 106 | .pbs, .pvs { 107 | padding-bottom: .25em; 108 | } 109 | .pvs, .pts { 110 | padding-top: .25em; 111 | } 112 | .unit { 113 | float: left; 114 | } 115 | .unitRight { 116 | float: right; 117 | } 118 | .size1of2 { 119 | width: 50%; 120 | } 121 | .size1of1 { 122 | width: 100%; 123 | } 124 | .clearfix:before, .clearfix:after { 125 | content: " "; 126 | display: table; 127 | } 128 | .clearfix:after { 129 | clear: both; 130 | } 131 | .hidden-true { 132 | display: none; 133 | } 134 | .textbox0 { 135 | width: 3em; 136 | background: #f1f1f1; 137 | padding: .25em .5em; 138 | line-height: 1.5; 139 | height: 1.5em; 140 | } 141 | #testDrive { 142 | display: block; 143 | padding-top: 24px; 144 | line-height: 1.5; 145 | } 146 | .fs0 { 147 | font-size: 16px; 148 | } 149 | .fs1 { 150 | font-size: 32px; 151 | } 152 | .fs2 { 153 | font-size: 32px; 154 | } 155 | 156 | -------------------------------------------------------------------------------- /sass/ppt.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "compass/reset"; 3 | @import "compass/css3"; 4 | @import "compass/layout"; 5 | @import "compass/typography/text/ellipsis"; //超出提示省略号 6 | 7 | //ppt 8 | $config_bg: rgba(0,0,0,0.5); 9 | $config_bg_hover: rgba(0,0,0,0.8); 10 | .ppt_content{ 11 | position:relative; 12 | background:#fff; 13 | width: 100%; 14 | height: 100%; 15 | overflow:hidden; 16 | @include user-select(none); 17 | 18 | .tips-info{ 19 | position: absolute; 20 | top: 50%; 21 | left: 50%; 22 | @include translate(-50%, -50%); 23 | color: #aaa; 24 | font-size: 14px; 25 | max-width: 80%; 26 | z-index: 2; 27 | display: none; 28 | } 29 | .ppt_config{ 30 | position: absolute; 31 | left: 0; 32 | right: 0; 33 | bottom: 10px; 34 | height: 28px; 35 | line-height: 28px; 36 | text-align: center; 37 | z-index: 1; 38 | i, span{ 39 | vertical-align: middle; 40 | cursor: pointer; 41 | color: #fff; 42 | } 43 | .ppt_progress{ 44 | .ppt_prev{ 45 | @include inline-block; 46 | left: 0; 47 | width: auto; 48 | margin-right: 20px; 49 | padding: 5px; 50 | font-size: 14px; 51 | background: $config_bg; 52 | @include border-radius(50%); 53 | @include transition (background 0.3s); 54 | &:hover{ 55 | background: $config_bg_hover; 56 | } 57 | } 58 | .ppt_progress_detail{ 59 | @include inline-block; 60 | width: 80px; 61 | text-align: center; 62 | font-size: 0; 63 | background:$config_bg; 64 | @include border-radius(20px); 65 | @include transition (background 0.3s); 66 | &:hover{ 67 | background: $config_bg_hover; 68 | } 69 | .current{ 70 | @include inline-block; 71 | font-size: 14px; 72 | padding: 0 5px; 73 | } 74 | .p_center{ 75 | @include inline-block; 76 | font-size: 14px; 77 | padding: 0 5px; 78 | } 79 | .length{ 80 | @include inline-block; 81 | font-size: 14px; 82 | padding: 0 5px; 83 | } 84 | } 85 | .ppt_next{ 86 | @include inline-block; 87 | right:0; 88 | width: auto; 89 | margin-left: 20px; 90 | padding: 5px; 91 | font-size: 14px; 92 | background: $config_bg; 93 | @include border-radius(50%); 94 | @include transition (background 0.3s); 95 | &:hover{ 96 | background: $config_bg_hover; 97 | } 98 | } 99 | } 100 | .full_ppt{ 101 | background: $config_bg; 102 | position: absolute; 103 | bottom: 0; 104 | // margin-top: -7px; 105 | padding: 5px; 106 | right: 10px; 107 | font-size: 16px; 108 | @include border-radius(50%); 109 | @include transition (background 0.3s); 110 | &:hover{ 111 | background: $config_bg_hover; 112 | } 113 | } 114 | } 115 | .ptt_image_lists{ 116 | width: auto; 117 | height: 100%; 118 | min-width: 100%; 119 | position: relative; 120 | float: left; 121 | font-size: 0; 122 | @include transition(all 0.3s); 123 | .ppt_list{ 124 | display: inline-block; 125 | width: auto; 126 | height: 100%; 127 | } 128 | } 129 | } 130 | 131 | .ie-fullscreen{ 132 | position:fixed; 133 | top:0; 134 | left:0; 135 | bottom:0; 136 | right:0; 137 | width:100%!important; 138 | height:100%!important; 139 | z-index:2147483647; 140 | } 141 | -------------------------------------------------------------------------------- /icon-font/style.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'icomoon'; 3 | src: url('fonts/icomoon.eot?nhshz0'); 4 | src: url('fonts/icomoon.eot?nhshz0#iefix') format('embedded-opentype'), 5 | url('fonts/icomoon.ttf?nhshz0') format('truetype'), 6 | url('fonts/icomoon.woff?nhshz0') format('woff'), 7 | url('fonts/icomoon.svg?nhshz0#icomoon') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | [class^="icon-"], [class*=" icon-"] { 13 | /* use !important to prevent issues with browser extensions that change fonts */ 14 | font-family: 'icomoon' !important; 15 | speak: none; 16 | font-style: normal; 17 | font-weight: normal; 18 | font-variant: normal; 19 | text-transform: none; 20 | line-height: 1; 21 | 22 | /* Better Font Rendering =========== */ 23 | -webkit-font-smoothing: antialiased; 24 | -moz-osx-font-smoothing: grayscale; 25 | } 26 | 27 | .icon-bing:before { 28 | content: "\e93a"; 29 | } 30 | .icon-imgsetting:before { 31 | content: "\e939"; 32 | } 33 | .icon-canclefullscreen:before { 34 | content: "\e932"; 35 | } 36 | .icon-fullscreen:before { 37 | content: "\e933"; 38 | } 39 | .icon-github:before { 40 | content: "\e936"; 41 | } 42 | .icon-clown:before { 43 | content: "\e934"; 44 | } 45 | .icon-smile:before { 46 | content: "\e935"; 47 | } 48 | .icon-works:before { 49 | content: "\e937"; 50 | } 51 | .icon-about:before { 52 | content: "\e938"; 53 | } 54 | .icon-erji:before { 55 | content: "\e931"; 56 | } 57 | .icon-date:before { 58 | content: "\e92e"; 59 | } 60 | .icon-rank-list:before { 61 | content: "\e92f"; 62 | } 63 | .icon-fm:before { 64 | content: "\e930"; 65 | } 66 | .icon-list-circle-small:before { 67 | content: "\e92a"; 68 | } 69 | .icon-download:before { 70 | content: "\e92b"; 71 | } 72 | .icon-like:before { 73 | content: "\e92c"; 74 | } 75 | .icon-msg:before { 76 | content: "\e92d"; 77 | } 78 | .icon-playdetail:before { 79 | content: "\e925"; 80 | } 81 | .icon-pause-detail:before { 82 | content: "\e926"; 83 | } 84 | .icon-prevdetail:before { 85 | content: "\e927"; 86 | } 87 | .icon-nextdetail:before { 88 | content: "\e928"; 89 | } 90 | .icon-music-shunxu:before { 91 | content: "\e929"; 92 | } 93 | .icon-back:before { 94 | content: "\e924"; 95 | } 96 | .icon-edit-paper:before { 97 | content: "\e900"; 98 | } 99 | .icon-edit:before { 100 | content: "\e91b"; 101 | } 102 | .icon-delete:before { 103 | content: "\e923"; 104 | } 105 | .icon-add-project:before { 106 | content: "\e913"; 107 | } 108 | .icon-add:before { 109 | content: "\e921"; 110 | } 111 | .icon-list-music:before { 112 | content: "\e91d"; 113 | } 114 | .icon-night:before { 115 | content: "\e91e"; 116 | } 117 | .icon-day:before { 118 | content: "\e91f"; 119 | } 120 | .icon-community:before { 121 | content: "\e920"; 122 | } 123 | .icon-wangyi:before { 124 | content: "\e90e"; 125 | } 126 | .icon-share:before { 127 | content: "\e90f"; 128 | } 129 | .icon-play:before { 130 | content: "\e910"; 131 | } 132 | .icon-list-circle:before { 133 | content: "\e911"; 134 | } 135 | .icon-setting:before { 136 | content: "\e914"; 137 | } 138 | .icon-theme:before { 139 | content: "\e915"; 140 | } 141 | .icon-friend:before { 142 | content: "\e916"; 143 | } 144 | .icon-set-time:before { 145 | content: "\e917"; 146 | } 147 | .icon-lock:before { 148 | content: "\e918"; 149 | } 150 | .icon-car:before { 151 | content: "\e919"; 152 | } 153 | .icon-cloud:before { 154 | content: "\e91a"; 155 | } 156 | .icon-exit:before { 157 | content: "\e91c"; 158 | } 159 | .icon-place:before { 160 | content: "\e909"; 161 | } 162 | .icon-SHARE2:before { 163 | content: "\e90a"; 164 | } 165 | .icon-zuijinplay:before { 166 | content: "\e90b"; 167 | } 168 | .icon-diantai:before { 169 | content: "\e90c"; 170 | } 171 | .icon-collect:before { 172 | content: "\e90d"; 173 | } 174 | .icon-coin:before { 175 | content: "\e908"; 176 | } 177 | .icon-market:before { 178 | content: "\e901"; 179 | } 180 | .icon-menu:before { 181 | content: "\e902"; 182 | } 183 | .icon-message:before { 184 | content: "\e903"; 185 | } 186 | .icon-music:before { 187 | content: "\e904"; 188 | } 189 | .icon-search:before { 190 | content: "\e905"; 191 | } 192 | .icon-vip:before { 193 | content: "\e906"; 194 | } 195 | .icon-wangyiyun:before { 196 | content: "\e907"; 197 | } 198 | .icon-close:before { 199 | content: "\e912"; 200 | } 201 | .icon-down:before { 202 | content: "\e922"; 203 | } 204 | .icon-left:before { 205 | content: "\e940"; 206 | } 207 | .icon-pause:before { 208 | content: "\e955"; 209 | } 210 | .icon-right:before { 211 | content: "\e963"; 212 | } 213 | .icon-up:before { 214 | content: "\e978"; 215 | } 216 | .icon-volume-medium:before { 217 | content: "\ea27"; 218 | } 219 | -------------------------------------------------------------------------------- /css/ppt.css: -------------------------------------------------------------------------------- 1 | /* line 5, D:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ 2 | html, body, div, span, applet, object, iframe, 3 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 4 | a, abbr, acronym, address, big, cite, code, 5 | del, dfn, em, img, ins, kbd, q, s, samp, 6 | small, strike, strong, sub, sup, tt, var, 7 | b, u, i, center, 8 | dl, dt, dd, ol, ul, li, 9 | fieldset, form, label, legend, 10 | table, caption, tbody, tfoot, thead, tr, th, td, 11 | article, aside, canvas, details, embed, 12 | figure, figcaption, footer, header, hgroup, 13 | menu, nav, output, ruby, section, summary, 14 | time, mark, audio, video { 15 | margin: 0; 16 | padding: 0; 17 | border: 0; 18 | font: inherit; 19 | font-size: 100%; 20 | vertical-align: baseline; 21 | } 22 | 23 | /* line 22, D:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ 24 | html { 25 | line-height: 1; 26 | } 27 | 28 | /* line 24, D:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ 29 | ol, ul { 30 | list-style: none; 31 | } 32 | 33 | /* line 26, D:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ 34 | table { 35 | border-collapse: collapse; 36 | border-spacing: 0; 37 | } 38 | 39 | /* line 28, D:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ 40 | caption, th, td { 41 | text-align: left; 42 | font-weight: normal; 43 | vertical-align: middle; 44 | } 45 | 46 | /* line 30, D:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ 47 | q, blockquote { 48 | quotes: none; 49 | } 50 | /* line 103, D:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ 51 | q:before, q:after, blockquote:before, blockquote:after { 52 | content: ""; 53 | content: none; 54 | } 55 | 56 | /* line 32, D:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ 57 | a img { 58 | border: none; 59 | } 60 | 61 | /* line 116, D:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ 62 | article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { 63 | display: block; 64 | } 65 | 66 | /* line 10, ../sass/ppt.scss */ 67 | .ppt_content { 68 | position: relative; 69 | background: #fff; 70 | width: 100%; 71 | height: 100%; 72 | overflow: hidden; 73 | -moz-user-select: -moz-none; 74 | -ms-user-select: none; 75 | -webkit-user-select: none; 76 | user-select: none; 77 | } 78 | /* line 18, ../sass/ppt.scss */ 79 | .ppt_content .tips-info { 80 | position: absolute; 81 | top: 50%; 82 | left: 50%; 83 | -moz-transform: translate(-50%, -50%); 84 | -ms-transform: translate(-50%, -50%); 85 | -webkit-transform: translate(-50%, -50%); 86 | transform: translate(-50%, -50%); 87 | color: #aaa; 88 | font-size: 14px; 89 | max-width: 80%; 90 | z-index: 2; 91 | display: none; 92 | } 93 | /* line 29, ../sass/ppt.scss */ 94 | .ppt_content .ppt_config { 95 | position: absolute; 96 | left: 0; 97 | right: 0; 98 | bottom: 10px; 99 | height: 28px; 100 | line-height: 28px; 101 | text-align: center; 102 | z-index: 1; 103 | } 104 | /* line 38, ../sass/ppt.scss */ 105 | .ppt_content .ppt_config i, .ppt_content .ppt_config span { 106 | vertical-align: middle; 107 | cursor: pointer; 108 | color: #fff; 109 | } 110 | /* line 44, ../sass/ppt.scss */ 111 | .ppt_content .ppt_config .ppt_progress .ppt_prev { 112 | display: inline-block; 113 | vertical-align: middle; 114 | *vertical-align: auto; 115 | *zoom: 1; 116 | *display: inline; 117 | left: 0; 118 | width: auto; 119 | margin-right: 20px; 120 | padding: 5px; 121 | font-size: 14px; 122 | background: rgba(0, 0, 0, 0.5); 123 | -moz-border-radius: 50%; 124 | -webkit-border-radius: 50%; 125 | border-radius: 50%; 126 | -moz-transition: background 0.3s; 127 | -o-transition: background 0.3s; 128 | -webkit-transition: background 0.3s; 129 | transition: background 0.3s; 130 | } 131 | /* line 54, ../sass/ppt.scss */ 132 | .ppt_content .ppt_config .ppt_progress .ppt_prev:hover { 133 | background: rgba(0, 0, 0, 0.8); 134 | } 135 | /* line 58, ../sass/ppt.scss */ 136 | .ppt_content .ppt_config .ppt_progress .ppt_progress_detail { 137 | display: inline-block; 138 | vertical-align: middle; 139 | *vertical-align: auto; 140 | *zoom: 1; 141 | *display: inline; 142 | width: 80px; 143 | text-align: center; 144 | font-size: 0; 145 | background: rgba(0, 0, 0, 0.5); 146 | -moz-border-radius: 20px; 147 | -webkit-border-radius: 20px; 148 | border-radius: 20px; 149 | -moz-transition: background 0.3s; 150 | -o-transition: background 0.3s; 151 | -webkit-transition: background 0.3s; 152 | transition: background 0.3s; 153 | } 154 | /* line 66, ../sass/ppt.scss */ 155 | .ppt_content .ppt_config .ppt_progress .ppt_progress_detail:hover { 156 | background: rgba(0, 0, 0, 0.8); 157 | } 158 | /* line 69, ../sass/ppt.scss */ 159 | .ppt_content .ppt_config .ppt_progress .ppt_progress_detail .current { 160 | display: inline-block; 161 | vertical-align: middle; 162 | *vertical-align: auto; 163 | *zoom: 1; 164 | *display: inline; 165 | font-size: 14px; 166 | padding: 0 5px; 167 | } 168 | /* line 74, ../sass/ppt.scss */ 169 | .ppt_content .ppt_config .ppt_progress .ppt_progress_detail .p_center { 170 | display: inline-block; 171 | vertical-align: middle; 172 | *vertical-align: auto; 173 | *zoom: 1; 174 | *display: inline; 175 | font-size: 14px; 176 | padding: 0 5px; 177 | } 178 | /* line 79, ../sass/ppt.scss */ 179 | .ppt_content .ppt_config .ppt_progress .ppt_progress_detail .length { 180 | display: inline-block; 181 | vertical-align: middle; 182 | *vertical-align: auto; 183 | *zoom: 1; 184 | *display: inline; 185 | font-size: 14px; 186 | padding: 0 5px; 187 | } 188 | /* line 85, ../sass/ppt.scss */ 189 | .ppt_content .ppt_config .ppt_progress .ppt_next { 190 | display: inline-block; 191 | vertical-align: middle; 192 | *vertical-align: auto; 193 | *zoom: 1; 194 | *display: inline; 195 | right: 0; 196 | width: auto; 197 | margin-left: 20px; 198 | padding: 5px; 199 | font-size: 14px; 200 | background: rgba(0, 0, 0, 0.5); 201 | -moz-border-radius: 50%; 202 | -webkit-border-radius: 50%; 203 | border-radius: 50%; 204 | -moz-transition: background 0.3s; 205 | -o-transition: background 0.3s; 206 | -webkit-transition: background 0.3s; 207 | transition: background 0.3s; 208 | } 209 | /* line 95, ../sass/ppt.scss */ 210 | .ppt_content .ppt_config .ppt_progress .ppt_next:hover { 211 | background: rgba(0, 0, 0, 0.8); 212 | } 213 | /* line 100, ../sass/ppt.scss */ 214 | .ppt_content .ppt_config .full_ppt { 215 | background: rgba(0, 0, 0, 0.5); 216 | position: absolute; 217 | bottom: 0; 218 | padding: 5px; 219 | right: 10px; 220 | font-size: 16px; 221 | -moz-border-radius: 50%; 222 | -webkit-border-radius: 50%; 223 | border-radius: 50%; 224 | -moz-transition: background 0.3s; 225 | -o-transition: background 0.3s; 226 | -webkit-transition: background 0.3s; 227 | transition: background 0.3s; 228 | } 229 | /* line 110, ../sass/ppt.scss */ 230 | .ppt_content .ppt_config .full_ppt:hover { 231 | background: rgba(0, 0, 0, 0.8); 232 | } 233 | /* line 115, ../sass/ppt.scss */ 234 | .ppt_content .ptt_image_lists { 235 | width: auto; 236 | height: 100%; 237 | min-width: 100%; 238 | position: relative; 239 | float: left; 240 | font-size: 0; 241 | -moz-transition: all 0.3s; 242 | -o-transition: all 0.3s; 243 | -webkit-transition: all 0.3s; 244 | transition: all 0.3s; 245 | } 246 | /* line 123, ../sass/ppt.scss */ 247 | .ppt_content .ptt_image_lists .ppt_list { 248 | display: inline-block; 249 | width: auto; 250 | height: 100%; 251 | } 252 | 253 | /* line 131, ../sass/ppt.scss */ 254 | .ie-fullscreen { 255 | position: fixed; 256 | top: 0; 257 | left: 0; 258 | bottom: 0; 259 | right: 0; 260 | width: 100% !important; 261 | height: 100% !important; 262 | z-index: 2147483647; 263 | } 264 | -------------------------------------------------------------------------------- /js/ppt.js: -------------------------------------------------------------------------------- 1 | (function($, window) { 2 | $.fn.ppt = function(options) { 3 | var _this = this; 4 | var $this = $(this); 5 | return this.each(function() { 6 | var defaultValue = { 7 | activeIndex: 0, 8 | width: 500, 9 | height: 300, 10 | tipsTitle: '图片加载中 , 请稍等', 11 | imageUrl: [{ 12 | src: 'http://obzmf9yzp.bkt.clouddn.com/c146561cf4c44a8908ec24e79e9f5275_24.JPG' 13 | }, { 14 | src: 'http://obzmf9yzp.bkt.clouddn.com/7c3cfdd48929787935efb2ae4e2f87e0_25.JPG' 15 | }, { 16 | src: 'http://obzmf9yzp.bkt.clouddn.com/020d948db713fb8e87156951b5da0158_26.JPG' 17 | }, { 18 | src: 'http://obzmf9yzp.bkt.clouddn.com/73ef04ec5b8c502bb9da983ddc1e69c9_27.JPG' 19 | }, { 20 | src: 'http://obzmf9yzp.bkt.clouddn.com/f3c34c61f4b56d670e860c871c766ec9_28.JPG' 21 | }, { 22 | src: 'http://obzmf9yzp.bkt.clouddn.com/026aae9157b651a12d9f17d6b38324c1_29.JPG' 23 | }, ] 24 | } 25 | 26 | _this.opt = $.extend(defaultValue, options || {}); 27 | _this.isFull = false; 28 | _this.screenW = window.screen.width; 29 | _this.screenH = window.screen.height; 30 | 31 | // 初始化trans的距离 32 | _this.initTransW = 0; 33 | _this.initExitScreenW = 0; 34 | _this.initExitScreenH = 0; 35 | 36 | _this.intiDom = function() { 37 | _this.pptContent = $('
').css({ 38 | width: _this.opt.width, 39 | height: _this.opt.height 40 | }).appendTo($this); 41 | _this.pptTips = $('
' + _this.opt.tipsTitle + '
').appendTo(_this.pptContent); 42 | _this.pptConfig = $('
').appendTo(_this.pptContent); 43 | _this.pptProgress = $('
').appendTo(_this.pptConfig); 44 | _this.pptFull = $('').appendTo(_this.pptConfig); 45 | _this.pptPrev = $('').appendTo(_this.pptProgress); 46 | _this.pptProgressDetail = $('
').appendTo(_this.pptProgress); 47 | _this.pptCurrentIndex = $('' + (_this.opt.activeIndex + 1) + '').appendTo(_this.pptProgressDetail); 48 | _this.pptSplitOf = $(' of ').appendTo(_this.pptProgressDetail); 49 | _this.pptLength = $('' + _this.opt.imageUrl.length + '').appendTo(_this.pptProgressDetail); 50 | _this.pptNext = $('').appendTo(_this.pptProgress); 51 | _this.pptImageList = $('
').css({ 52 | width: _this.opt.width * _this.opt.imageUrl.length, 53 | height: _this.opt.height 54 | }).appendTo(_this.pptContent); 55 | for (var i = 0; i < _this.opt.imageUrl.length; i++) { 56 | $('').css({ 57 | width: _this.opt.width, 58 | height: _this.opt.height 59 | }).appendTo(_this.pptImageList); 60 | } 61 | } 62 | 63 | 64 | _this.initEvent = function() { 65 | _this.pptPrev.on('click', function() { 66 | _this.opt.activeIndex--; 67 | _this.opt.activeIndex = _this.opt.activeIndex < 0 ? 0 : _this.opt.activeIndex 68 | _this.translateInfo(_this.opt.activeIndex) 69 | }) 70 | _this.pptNext.on('click', function() { 71 | _this.opt.activeIndex++; 72 | _this.opt.activeIndex = _this.opt.activeIndex > _this.opt.imageUrl.length - 1 ? _this.opt.imageUrl.length - 1 : _this.opt.activeIndex 73 | _this.translateInfo(_this.opt.activeIndex) 74 | }) 75 | _this.pptFull.on('click', function() { 76 | if (_this.isFull) { 77 | _this.exitFullscreen(); 78 | } else { 79 | _this.initExitScreenW = _this.pptContent.width(); 80 | _this.initExitScreenH = _this.pptContent.height(); 81 | _this.launchFullScreen(_this.pptContent[0]); 82 | } 83 | }) 84 | 85 | _this.screenChangeEvent() 86 | } 87 | 88 | _this.translateInfo = function(index, width) { 89 | // var initwidth = 0 90 | // if(_this.isIE910) { 91 | // var IEWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth 92 | // initwidth = IEWidth 93 | // } 94 | // initwidth = _this.isFull ? _this.screenW : this.opt.width 95 | var initwidth = width ? width : _this.initTransW || this.opt.width 96 | _this.initTransW = initwidth 97 | var trans = initwidth * index * -1 98 | _this.pptImageList.css({ 99 | '-webkit-transform': 'translate(' + trans + 'px, 0)', 100 | '-moz-transform': 'translate(' + trans + 'px, 0)', 101 | '-ms-transform': 'translate(' + trans + 'px, 0)', 102 | transform: 'translate(' + trans + 'px, 0)' 103 | }) 104 | _this.pptCurrentIndex.text(index + 1); 105 | } 106 | 107 | // isfull 是对于全屏的设置 108 | _this.setSize = function(width, height, isfull) { 109 | // 切换的时候初始化给全屏退出记录的最后一次宽度也得变化 110 | // _this.initExitScreenW = _this.pptContent.width(); 111 | // _this.initExitScreenH = _this.pptContent.height(); 112 | if (!isfull) { 113 | // 切换的时候初始化给全屏退出记录的最后一次宽度也得变化 114 | _this.initExitScreenW = _this.pptContent.width(); 115 | _this.initExitScreenH = _this.pptContent.height(); 116 | } 117 | 118 | _this.initTransW = height ? height : _this.initTransW 119 | var transWidth = width 120 | _this.pptContent.css({ 121 | width: width, 122 | height: height 123 | }) 124 | _this.pptImageList.css({ 125 | width: width * _this.opt.imageUrl.length, 126 | height: height 127 | }) 128 | 129 | _this.pptImageList.find('img').css({ 130 | width: width, 131 | height: height 132 | }) 133 | _this.initTransW = height 134 | 135 | // 更新translate的距离 136 | _this.translateInfo(this.opt.activeIndex, transWidth); 137 | } 138 | 139 | _this.setPPTImage = function(data) { 140 | _this.opt.imageUrl = data 141 | _this.pptLength.text(data.length) 142 | _this.pptImageList.children().remove(); 143 | for (var i = 0; i < data.length; i++) { 144 | $('').css({ 145 | width: _this.pptContent.width(), 146 | height: _this.pptContent.height() 147 | }).appendTo(_this.pptImageList); 148 | } 149 | this.opt.activeIndex = 0 150 | _this.setSize(_this.pptContent.width(), _this.pptContent.height()) 151 | } 152 | 153 | _this.launchFullScreen = function(element) { 154 | if (_this.isIE910) { 155 | this.launchFullScreenIE11L(); 156 | } else { 157 | // alert(screenChange) 158 | if (element.requestFullscreen) { 159 | element.requestFullscreen() 160 | } else if (element.mozRequestFullScreen) { 161 | element.mozRequestFullScreen() 162 | } else if (element.webkitRequestFullscreen) { 163 | element.webkitRequestFullscreen() 164 | } else if (element.msRequestFullscreen) { 165 | element.msRequestFullscreen() 166 | } 167 | _this.launchFullScreenStyle(element) 168 | } 169 | } 170 | 171 | _this.launchFullScreenIE11L = function() { 172 | _this.updateFullScreenState(true, true) 173 | var IEHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight 174 | var IEWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth 175 | _this.pptContent.addClass('ie-fullscreen') 176 | document.body.style.overflow = 'hidden' 177 | _this.setSize(IEWidth, IEHeight, true) 178 | } 179 | 180 | // 全屏下视频的样式 181 | _this.launchFullScreenStyle = function(element) { 182 | _this.updateFullScreenState(true) 183 | _this.setSize(_this.screenW, _this.screenH, true) 184 | } 185 | 186 | // 更新全屏和非全屏的状态 第一个bool 是设置是否全屏从而设置dom 第二个是是否是ie11一下的全屏设置 是的话则需要添加ie-fullscreen 187 | _this.updateFullScreenState = function(bool, iebool) { 188 | _this.isFull = bool || false 189 | // 全屏图标样式 190 | var iconClassName = _this.isFull ? 'full_ppt icon-canclefullscreen' : 'full_ppt icon-fullscreen' 191 | // 文案 192 | var title = _this.isFull ? '取消全屏' : '全屏' 193 | _this.pptFull.attr('class', iconClassName) 194 | _this.pptFull.attr('title', title) 195 | // 设置页面是否全屏的class 196 | var PPTClassName = _this.isFull ? 'ppt_content full' : 'ppt_content' 197 | 198 | PPTClassName = iebool ? PPTClassName + ' ie-fullscreen' : PPTClassName 199 | _this.pptContent.attr('class', PPTClassName) 200 | } 201 | 202 | _this.exitFullscreen = function() { 203 | if (this.isIE910) { 204 | // this.isFull = true 205 | this.exitFullscreenIE11L(); 206 | } else if (_this.browserV.indexOf('IE11') >= 0) { 207 | // ie 11 退出全屏 208 | this.exitFullScreenStyle() 209 | } else { 210 | // 正常的退出全屏 211 | if (document.exitFullscreen) { 212 | document.exitFullscreen(); 213 | } else if (document.mozExitFullScreen) { 214 | document.mozExitFullScreen(); 215 | } else if (document.webkitExitFullscreen) { 216 | document.webkitExitFullscreen(); 217 | } else if (document.msExitFullscreen) { 218 | document.msExitFullscreen(); 219 | } 220 | } 221 | } 222 | 223 | _this.exitFullscreenIE11L = function() { 224 | _this.updateFullScreenState(false) 225 | _this.pptContent.removeClass('ie-fullscreen') 226 | _this.setSize(_this.initExitScreenW, _this.initExitScreenH) 227 | document.body.style.overflow = 'auto' 228 | } 229 | 230 | _this.exitFullScreenStyle = function() { 231 | if (document.msExitFullscreen) { 232 | document.msExitFullscreen(); 233 | } 234 | _this.updateFullScreenState(false) 235 | _this.setSize(_this.initExitScreenW, _this.initExitScreenH) 236 | } 237 | 238 | // 屏幕全屏模式改变事件 包括ie 11 以下 239 | _this.screenChangeEvent = function(element) { 240 | var _this = this 241 | if (_this.browserV.indexOf('IE11') >= 0) { 242 | document.onkeyup = function(e) { 243 | var keyNum = window.event ? e.keyCode : e.which 244 | if (keyNum === 27 && _this.isFull) { 245 | // ie退出全屏 这里针对的是IE11 246 | _this.exitFullScreenStyle() 247 | } 248 | } 249 | } else if (_this.isIE910) { 250 | document.onkeyup = function(e) { 251 | var keyNum = window.event ? e.keyCode : e.which 252 | if (keyNum === 27 && _this.isFull) { 253 | // ie退出全屏 这里针对的是IE10 9 254 | _this.exitFullscreenIE11L() 255 | } 256 | } 257 | } else { 258 | var eventList = ['webkitfullscreenchange', 'mozfullscreenchange', 'fullscreenchange', 'msfullscreenchange'] 259 | for (var i = 0; i < eventList.length; i++) { 260 | document.addEventListener(eventList[i], function(e) { 261 | // if (e.target === _this.pptContent[0]) { 262 | // // 全屏显示的网页元素 263 | // var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement 264 | 265 | // // 判断网页是否处于全屏状态下 266 | // var isFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen || document.msIsFullScreen 267 | 268 | // if (!fullscreenElement) { 269 | // alert(1) 270 | // _this.exitFullScreenStyle() 271 | // } 272 | // } 273 | var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement 274 | 275 | // 判断网页是否处于全屏状态下 276 | var isFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen || document.msIsFullScreen 277 | 278 | if (!fullscreenElement) { 279 | if (_this.pptContent.hasClass('full')) { 280 | _this.exitFullScreenStyle() 281 | } 282 | } 283 | }) 284 | } 285 | } 286 | } 287 | 288 | _this.browserVersion = function() { 289 | var userAgent = navigator.userAgent, 290 | rMsie = /(msie\s|trident.*rv:)([\w.]+)/, 291 | rFirefox = /(firefox)\/([\w.]+)/, 292 | rOpera = /(opera).+version\/([\w.]+)/, 293 | rChrome = /(chrome)\/([\w.]+)/, 294 | rSafari = /version\/([\w.]+).*(safari)/; 295 | var browser; 296 | var version; 297 | var ua = userAgent.toLowerCase(); 298 | 299 | function uaMatch(ua) { 300 | var match = rMsie.exec(ua); 301 | if (match != null) { 302 | return { 303 | browser: "IE", 304 | version: match[2] || "0" 305 | }; 306 | } 307 | var match = rFirefox.exec(ua); 308 | if (match != null) { 309 | return { 310 | browser: match[1] || "", 311 | version: match[2] || "0" 312 | }; 313 | } 314 | var match = rOpera.exec(ua); 315 | if (match != null) { 316 | return { 317 | browser: match[1] || "", 318 | version: match[2] || "0" 319 | }; 320 | } 321 | var match = rChrome.exec(ua); 322 | if (match != null) { 323 | return { 324 | browser: match[1] || "", 325 | version: match[2] || "0" 326 | }; 327 | } 328 | var match = rSafari.exec(ua); 329 | if (match != null) { 330 | return { 331 | browser: match[2] || "", 332 | version: match[1] || "0" 333 | }; 334 | } 335 | if (match != null) { 336 | return { 337 | browser: "", 338 | version: "0" 339 | }; 340 | } 341 | } 342 | var browserMatch = uaMatch(userAgent.toLowerCase()); 343 | if (browserMatch.browser) { 344 | browser = browserMatch.browser; 345 | version = browserMatch.version; 346 | } 347 | return browser + version 348 | } 349 | 350 | _this.browserV = _this.browserVersion() 351 | _this.isIE910 = (_this.browserV.indexOf('IE10') >= 0 || _this.browserV.indexOf('IE9') >= 0) 352 | _this.intiDom(); 353 | _this.initEvent(); 354 | }) 355 | } 356 | })(jQuery, window); -------------------------------------------------------------------------------- /icon-font/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IcoMoon Demo 6 | 7 | 8 | 9 | 10 | 11 |
12 |

Font Name: icomoon (Glyphs: 64)

13 |
14 |
15 |

Grid Size: Unknown

16 |
17 |
18 | 19 | 20 | 21 | icon-bing 22 |
23 |
24 | 25 | 26 |
27 |
28 | liga: 29 | 30 |
31 |
32 |
33 |
34 | 35 | 36 | 37 | icon-imgsetting 38 |
39 |
40 | 41 | 42 |
43 |
44 | liga: 45 | 46 |
47 |
48 |
49 |
50 | 51 | 52 | 53 | icon-canclefullscreen 54 |
55 |
56 | 57 | 58 |
59 |
60 | liga: 61 | 62 |
63 |
64 |
65 |
66 | 67 | 68 | 69 | icon-fullscreen 70 |
71 |
72 | 73 | 74 |
75 |
76 | liga: 77 | 78 |
79 |
80 |
81 |
82 | 83 | 84 | 85 | icon-github 86 |
87 |
88 | 89 | 90 |
91 |
92 | liga: 93 | 94 |
95 |
96 |
97 |
98 | 99 | 100 | 101 | icon-clown 102 |
103 |
104 | 105 | 106 |
107 |
108 | liga: 109 | 110 |
111 |
112 |
113 |
114 | 115 | 116 | 117 | icon-smile 118 |
119 |
120 | 121 | 122 |
123 |
124 | liga: 125 | 126 |
127 |
128 |
129 |
130 | 131 | 132 | 133 | icon-works 134 |
135 |
136 | 137 | 138 |
139 |
140 | liga: 141 | 142 |
143 |
144 |
145 |
146 | 147 | 148 | 149 | icon-about 150 |
151 |
152 | 153 | 154 |
155 |
156 | liga: 157 | 158 |
159 |
160 |
161 |
162 | 163 | 164 | 165 | icon-erji 166 |
167 |
168 | 169 | 170 |
171 |
172 | liga: 173 | 174 |
175 |
176 |
177 |
178 | 179 | 180 | 181 | icon-date 182 |
183 |
184 | 185 | 186 |
187 |
188 | liga: 189 | 190 |
191 |
192 |
193 |
194 | 195 | 196 | 197 | icon-rank-list 198 |
199 |
200 | 201 | 202 |
203 |
204 | liga: 205 | 206 |
207 |
208 |
209 |
210 | 211 | 212 | 213 | icon-fm 214 |
215 |
216 | 217 | 218 |
219 |
220 | liga: 221 | 222 |
223 |
224 |
225 |
226 | 227 | 228 | 229 | icon-list-circle-small 230 |
231 |
232 | 233 | 234 |
235 |
236 | liga: 237 | 238 |
239 |
240 |
241 |
242 | 243 | 244 | 245 | icon-download 246 |
247 |
248 | 249 | 250 |
251 |
252 | liga: 253 | 254 |
255 |
256 |
257 |
258 | 259 | 260 | 261 | icon-like 262 |
263 |
264 | 265 | 266 |
267 |
268 | liga: 269 | 270 |
271 |
272 |
273 |
274 | 275 | 276 | 277 | icon-msg 278 |
279 |
280 | 281 | 282 |
283 |
284 | liga: 285 | 286 |
287 |
288 |
289 |
290 | 291 | 292 | 293 | icon-playdetail 294 |
295 |
296 | 297 | 298 |
299 |
300 | liga: 301 | 302 |
303 |
304 |
305 |
306 | 307 | 308 | 309 | icon-pause-detail 310 |
311 |
312 | 313 | 314 |
315 |
316 | liga: 317 | 318 |
319 |
320 |
321 |
322 | 323 | 324 | 325 | icon-prevdetail 326 |
327 |
328 | 329 | 330 |
331 |
332 | liga: 333 | 334 |
335 |
336 |
337 |
338 | 339 | 340 | 341 | icon-nextdetail 342 |
343 |
344 | 345 | 346 |
347 |
348 | liga: 349 | 350 |
351 |
352 |
353 |
354 | 355 | 356 | 357 | icon-music-shunxu 358 |
359 |
360 | 361 | 362 |
363 |
364 | liga: 365 | 366 |
367 |
368 |
369 |
370 | 371 | 372 | 373 | icon-back 374 |
375 |
376 | 377 | 378 |
379 |
380 | liga: 381 | 382 |
383 |
384 |
385 |
386 | 387 | 388 | 389 | icon-edit-paper 390 |
391 |
392 | 393 | 394 |
395 |
396 | liga: 397 | 398 |
399 |
400 |
401 |
402 | 403 | 404 | 405 | icon-edit 406 |
407 |
408 | 409 | 410 |
411 |
412 | liga: 413 | 414 |
415 |
416 |
417 |
418 | 419 | 420 | 421 | icon-delete 422 |
423 |
424 | 425 | 426 |
427 |
428 | liga: 429 | 430 |
431 |
432 |
433 |
434 | 435 | 436 | 437 | icon-add-project 438 |
439 |
440 | 441 | 442 |
443 |
444 | liga: 445 | 446 |
447 |
448 |
449 |
450 | 451 | 452 | 453 | icon-add 454 |
455 |
456 | 457 | 458 |
459 |
460 | liga: 461 | 462 |
463 |
464 |
465 |
466 | 467 | 468 | 469 | icon-list-music 470 |
471 |
472 | 473 | 474 |
475 |
476 | liga: 477 | 478 |
479 |
480 |
481 |
482 | 483 | 484 | 485 | icon-night 486 |
487 |
488 | 489 | 490 |
491 |
492 | liga: 493 | 494 |
495 |
496 |
497 |
498 | 499 | 500 | 501 | icon-day 502 |
503 |
504 | 505 | 506 |
507 |
508 | liga: 509 | 510 |
511 |
512 |
513 |
514 | 515 | 516 | 517 | icon-community 518 |
519 |
520 | 521 | 522 |
523 |
524 | liga: 525 | 526 |
527 |
528 |
529 |
530 | 531 | 532 | 533 | icon-wangyi 534 |
535 |
536 | 537 | 538 |
539 |
540 | liga: 541 | 542 |
543 |
544 |
545 |
546 | 547 | 548 | 549 | icon-share 550 |
551 |
552 | 553 | 554 |
555 |
556 | liga: 557 | 558 |
559 |
560 |
561 |
562 | 563 | 564 | 565 | icon-play 566 |
567 |
568 | 569 | 570 |
571 |
572 | liga: 573 | 574 |
575 |
576 |
577 |
578 | 579 | 580 | 581 | icon-list-circle 582 |
583 |
584 | 585 | 586 |
587 |
588 | liga: 589 | 590 |
591 |
592 |
593 |
594 | 595 | 596 | 597 | icon-setting 598 |
599 |
600 | 601 | 602 |
603 |
604 | liga: 605 | 606 |
607 |
608 |
609 |
610 | 611 | 612 | 613 | icon-theme 614 |
615 |
616 | 617 | 618 |
619 |
620 | liga: 621 | 622 |
623 |
624 |
625 |
626 | 627 | 628 | 629 | icon-friend 630 |
631 |
632 | 633 | 634 |
635 |
636 | liga: 637 | 638 |
639 |
640 |
641 |
642 | 643 | 644 | 645 | icon-set-time 646 |
647 |
648 | 649 | 650 |
651 |
652 | liga: 653 | 654 |
655 |
656 |
657 |
658 | 659 | 660 | 661 | icon-lock 662 |
663 |
664 | 665 | 666 |
667 |
668 | liga: 669 | 670 |
671 |
672 |
673 |
674 | 675 | 676 | 677 | icon-car 678 |
679 |
680 | 681 | 682 |
683 |
684 | liga: 685 | 686 |
687 |
688 |
689 |
690 | 691 | 692 | 693 | icon-cloud 694 |
695 |
696 | 697 | 698 |
699 |
700 | liga: 701 | 702 |
703 |
704 |
705 |
706 | 707 | 708 | 709 | icon-exit 710 |
711 |
712 | 713 | 714 |
715 |
716 | liga: 717 | 718 |
719 |
720 |
721 |
722 | 723 | 724 | 725 | icon-place 726 |
727 |
728 | 729 | 730 |
731 |
732 | liga: 733 | 734 |
735 |
736 |
737 |
738 | 739 | 740 | 741 | icon-SHARE2 742 |
743 |
744 | 745 | 746 |
747 |
748 | liga: 749 | 750 |
751 |
752 |
753 |
754 | 755 | 756 | 757 | icon-zuijinplay 758 |
759 |
760 | 761 | 762 |
763 |
764 | liga: 765 | 766 |
767 |
768 |
769 |
770 | 771 | 772 | 773 | icon-diantai 774 |
775 |
776 | 777 | 778 |
779 |
780 | liga: 781 | 782 |
783 |
784 |
785 |
786 | 787 | 788 | 789 | icon-collect 790 |
791 |
792 | 793 | 794 |
795 |
796 | liga: 797 | 798 |
799 |
800 |
801 |
802 | 803 | 804 | 805 | icon-coin 806 |
807 |
808 | 809 | 810 |
811 |
812 | liga: 813 | 814 |
815 |
816 |
817 |
818 | 819 | 820 | 821 | icon-market 822 |
823 |
824 | 825 | 826 |
827 |
828 | liga: 829 | 830 |
831 |
832 |
833 |
834 | 835 | 836 | 837 | icon-menu 838 |
839 |
840 | 841 | 842 |
843 |
844 | liga: 845 | 846 |
847 |
848 |
849 |
850 | 851 | 852 | 853 | icon-message 854 |
855 |
856 | 857 | 858 |
859 |
860 | liga: 861 | 862 |
863 |
864 |
865 |
866 | 867 | 868 | 869 | icon-music 870 |
871 |
872 | 873 | 874 |
875 |
876 | liga: 877 | 878 |
879 |
880 |
881 |
882 | 883 | 884 | 885 | icon-search 886 |
887 |
888 | 889 | 890 |
891 |
892 | liga: 893 | 894 |
895 |
896 |
897 |
898 | 899 | 900 | 901 | icon-vip 902 |
903 |
904 | 905 | 906 |
907 |
908 | liga: 909 | 910 |
911 |
912 |
913 |
914 | 915 | 916 | 917 | icon-wangyiyun 918 |
919 |
920 | 921 | 922 |
923 |
924 | liga: 925 | 926 |
927 |
928 |
929 |
930 | 931 | 932 | 933 | icon-close 934 |
935 |
936 | 937 | 938 |
939 |
940 | liga: 941 | 942 |
943 |
944 |
945 |
946 | 947 | 948 | 949 | icon-down 950 |
951 |
952 | 953 | 954 |
955 |
956 | liga: 957 | 958 |
959 |
960 |
961 |
962 | 963 | 964 | 965 | icon-left 966 |
967 |
968 | 969 | 970 |
971 |
972 | liga: 973 | 974 |
975 |
976 |
977 |
978 | 979 | 980 | 981 | icon-pause 982 |
983 |
984 | 985 | 986 |
987 |
988 | liga: 989 | 990 |
991 |
992 |
993 |
994 | 995 | 996 | 997 | icon-right 998 |
999 |
1000 | 1001 | 1002 |
1003 |
1004 | liga: 1005 | 1006 |
1007 |
1008 |
1009 |
1010 | 1011 | 1012 | 1013 | icon-up 1014 |
1015 |
1016 | 1017 | 1018 |
1019 |
1020 | liga: 1021 | 1022 |
1023 |
1024 |
1025 |
1026 |

Grid Size: 16

1027 |
1028 |
1029 | 1030 | 1031 | 1032 | icon-volume-medium 1033 |
1034 |
1035 | 1036 | 1037 |
1038 |
1039 | liga: 1040 | 1041 |
1042 |
1043 |
1044 | 1045 | 1046 |
1047 |

Font Test Drive

1048 | 1053 | 1055 |
  1056 |
1057 |
1058 | 1059 |
1060 |

Generated by IcoMoon

1061 |
1062 | 1063 | 1064 | 1065 | 1066 | -------------------------------------------------------------------------------- /icon-font/fonts/icomoon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | --------------------------------------------------------------------------------