精图压缩网站源码.zip资源-CSDN文库

共8个文件

js：5个

css：2个

html：1个

版权申诉

71 浏览量 2022-06-17 17:26:53 上传评论收藏 60KB ZIP 举报

资源详情

资源评论

资源推荐

收起资源包目录

精图压缩网站源码.zip （8个子文件）

精图压缩网站源码

index.html 23KB

pic.css 8KB

scrollreveal.min.js 16KB

dist

css

style.css 53KB

jszip.min.js 100KB

FileSaver.js 5KB

main.min.js 878B

JCompressor.js 6KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>免费在线压缩图片 - 欧皇源码论坛 www.ohbbs.cn</title> <link href="./js/pic.css" rel="stylesheet"> <link rel="stylesheet" href="dist/css/style.css"> <script src="./js/scrollreveal.min.js"></script> <style> /* 删除上传按钮后面文字 */ input[type="file"] { color: transparent; } .inputstyle { width: 144px; height: 41px; cursor: pointer; font-size: 30px; outline: medium none; position: absolute; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0; left: 0px; top: 0px; } display: inline-block; max-width: 750px; } select{ border: solid 1px #888; border-radius: 5px; padding: 10px; } #fileinput{ border: solid 1px #888; width: 500px; border-radius: 5px; padding: 10px; } #downloadBtn{ background-color: #e6e6e6; border: solid 1px #e6e6e6; color: #FFF !important; display: inline-block; width: 150px; padding: 10px; border-radius: 5px; cursor: pointer; outline: none; } </style> </head> <body class="is-boxed has-animations"> <div class="body-wrap boxed-container"> <header class="site-header"> <div class="container"> <div class="site-header-large-bg"><span></span></div> <div class="site-header-inner"> <div class="brand header-brand"> <h1 class="m-0"> <a href="#"> <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>Holly</title> <defs> <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="logo-b"> <stop stop-color="#A8A3F6" offset="0%" /> <stop stop-color="#DAD8FF" offset="100%" /> </linearGradient> <path d="M27.098 7.53l-9.441 9.44a8.084 8.084 0 0 0-.625.702 8 8 0 0 0 12.173 10.377l9.24-9.24A16.02 16.02 0 0 1 39 23c0 8.837-7.163 16-16 16S7 31.837 7 23 14.163 7 23 7c1.416 0 2.79.184 4.098.53z" id="logo-a" /> <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="logo-d"> <stop stop-color="#DAD8FF" offset="0%" /> <stop stop-color="#857DF3" offset="100%" /> </linearGradient> <path d="M27.098 7.53l-9.441 9.44a8.084 8.084 0 0 0-.625.702 8 8 0 0 0 12.173 10.377l9.24-9.24A16.02 16.02 0 0 1 39 23c0 8.837-7.163 16-16 16S7 31.837 7 23 14.163 7 23 7c1.416 0 2.79.184 4.098.53z" id="logo-c" /> </defs> <g transform="translate(-7 -7)" fill="none" fill-rule="evenodd"> <use fill="url(#logo-b)" transform="rotate(45 23 23)" xlink:href="#logo-a" /> <use fill="url(#logo-d)" transform="scale(-1 1) rotate(45 0 -32.527)" xlink:href="#logo-c" /> </g> </svg> </a> </h1> </div> </div> </div> </header> <main> <section class="hero"> <div class="container"> <div class="hero-inner"> <div class="hero-copy"> <div class="container-sm"> <h1 class="hero-title h2-mobile mt-0 is-revealing">欧皇源码论坛</h1> <p class="hero-paragraph is-revealing">|无损压缩</p> <div> <div class="configuration"> <span>压缩比例：</span> <select id="quality"> <option value="0.8">20%</option> <option value="0.6">40%</option> <option value="0.4">60%</option> <option value="0.2">80%</option> </select>     <span>最大宽度：</span> <select id="maxwidth"> <option value="750">750</option> <option value="640">640</option> <option value="375">375</option> <option value="320">320</option> </select> px </div> <br /> </div> <div class="hero-form newsletter-form field field-grouped is-revealing"> <div class="control control-expanded"> <div class=" button button-primary button-block button-shadow"> <div class="">上传图片</div> <input type="file" class="inputstyle" multiple="multiple" id="fileinput" ref="input"> </div> </div> <div class="control"> <button type="button" id="downloadBtn" class=" button button-block button-shadow">下载</button> </div> </div> </div> <div id="loading"></div> <br> <div id="imgbox" class="frbkw"></div> </div> <div class="hero-illustration"> <div class="hero-squares hero-squares-1 is-revealing"> <svg width="124" height="64" viewBox="0 0 124 64" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient x1="0%" y1="50%" x2="114.418%" y2="50%" id="squares-1-a"> <stop stop-color="#6EFACC" offset="0%" /> <stop stop-color="#6EFACC" stop-opacity="0" offset="100%" /> </linearGradient> </defs> <path d="M0 0h4v4H0V0zm0 12h4v4H0v-4zm0 12h4v4H0v-4zm0 12h4v4H0v-4zm0 12h4v4H0v-4zm0 12h4v4H0v-4zM12 0h4v4h-4V0zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zM24 0h4v4h-4V0zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zM36 0h4v4h-4V0zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zM48 0h4v4h-4V0zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zM60 0h4v4h-4V0zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zM72 0h4v4h-4V0zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zM84 0h4v4h-4V0zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zM96 0h4v4h-4V0zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm12-60h4v4h-4V0zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm12-60h4v4h-4V0zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4z" fill="url(#squares-1-a)" fill-rule="evenodd" /> </svg> </div> <div class="hero-squares hero-squares-2 is-revealing"> <svg width="64" height="88" viewBox="0 0 64 88" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient x1="0%" y1="50%" x2="114.418%" y2="50%" id="squares-2-a"> <stop stop-color="#6EFACC" offset="0%" /> <stop stop-color="#6EFACC" stop-opacity="0" offset="100%" /> </linearGradient> </defs> <path d="M80 574h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm12-60h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm12-60h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm12-60h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm12-60h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm12-60h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm12-60h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm12-60h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4zm0 12h4v4h-4v-4z" transform="rotate(90 359 279)" fill="url(#squares-2-a)" fill-rule="evenodd" /> </svg> </div> <div class="hero-ball hero-ball-1 is-revealing">