整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
騰訊優(yōu)圖，提供圖片整體文字的檢測(cè)和識(shí)別服務(wù)，返回文字框位置與文字內(nèi)容。支持多場(chǎng)景、任意版面下整圖文字的識(shí)別，以及中英文、字母、數(shù)字、常見字符的識(shí)別。
傳送門：https://open.youtu.qq.com//#/open/experience/content
百度文字識(shí)別，支持多場(chǎng)景下的文字檢測(cè)識(shí)別。
傳送門：https://cloud.baidu.com/product/ocr/general
OCRMaker，提供在線文字識(shí)別，文字提取等服務(wù)。
傳送門：http://www.ocrmaker.com
文字在線識(shí)別工具，提供圖像文字識(shí)別、提取圖片文字、pdf文字識(shí)別、掃描文件識(shí)別服務(wù)、pdf轉(zhuǎn)Word文檔等服務(wù)，輸出結(jié)果支持PDF、Word和Txt格式等。
傳送門：https://ocr.wdku.net
圖片轉(zhuǎn)文字，提供在線圖片轉(zhuǎn)換成文字，在線圖片識(shí)別文字等服務(wù)。
傳送門：http://www.pdfdo.com/image-to-txt.aspx
華為云在線圖片文字識(shí)別，提供快速提取圖片、表格中的文字信息，并支持一鍵導(dǎo)出等服務(wù)。
傳送門：https://www.huaweicloud.com/product/ocr/image-to-txt.html
掃描全能王，提供最智能的文檔管理方案。手機(jī)、平板、電腦變身隨身攜帶的掃描儀、文件庫，隨時(shí)隨心編輯文檔等服務(wù)。
傳送門：https://www.camscanner.com
白描，提供高準(zhǔn)確度的文字識(shí)別、表格識(shí)別轉(zhuǎn)Excel、批量識(shí)別、識(shí)別后翻譯、文件掃描等功能。
傳送門：https://baimiao.uzero.cn
Office Lens，可以將圖片轉(zhuǎn)換為 PDF、Word 和 PowerPoint 文件，甚至還可將圖片存到 OneNote 或 OneDrive上。
傳送門：https://www.microsoft.com/zh-cn/p/office-lens/9wzdncrfj3t8?activetab=pivot:overviewtab
段時(shí)間沒寫文章了，這段時(shí)間比較忙，很抱歉。
今天的這個(gè)手機(jī)登錄界面，使用了rem作為單位，自定義了字體，使用了模糊背景，半透明登陸框。效果是小編從網(wǎng)上看到的，就動(dòng)手實(shí)現(xiàn)了下，分享給在座的諸位。小編才疏學(xué)淺，如果有什么不對(duì)或許要改進(jìn)的地方，還望各位不吝賜教。
我們先來看下效果圖：
1、目錄簡(jiǎn)單介紹下
images 放圖片
fonts 字體、字體圖標(biāo)
css 樣式表文件
base.css 基礎(chǔ)樣式
login.css login界面樣式
image
js javascript文件
flexible.js rem轉(zhuǎn)換px文件
login.js login頁面的其他js
login.html 登錄頁面
2、base.css文件：我們?cè)?base.css 中定義字體、邊距、填充等，這里只指出一些關(guān)鍵點(diǎn)，想要源碼的話可以關(guān)注我們，然后再私信我們，我們會(huì)發(fā)給您。
① 通過效果圖，我們可以看到，placeholder提示文字是白色，所以在這里需要更改下：
input::-webkit-input-placeholder{
color:#fff;
}
② 定義字體，這里只用了ttf，因?yàn)槭謾C(jī)下大部分都是webkit內(nèi)核，webkit內(nèi)核是支持ttf格式的字體的。
@font-face {
font-family: 'PingFangSC-Regular';
src: url('../fonts/PingFangSC-Regular.ttf');
font-weight: normal;
font-style: normal;
}
③ 初始化字體大小，字體類型等
body,input{
font-size: .26rem;
font-family:'PingFangSC-Regular';
color:#fff;
}
注：1、其他的邊距、浮動(dòng)、flex等，就不在這里寫了，源碼里面的base.css文件寫的很清楚
2、rem單位，后面會(huì)有解釋
3、由于有 flexible.js ，這里的html設(shè)置的字體大小無需我們?cè)O(shè)置。
3、flexible.js 文件可以將rem轉(zhuǎn)換成px，自動(dòng)設(shè)置html的字體大小，這樣rem的值就會(huì)被瀏覽器根據(jù)html的字體大小實(shí)時(shí)解析成px，以適應(yīng)不同分辨率的手機(jī)。我們需要做兩步：
① 在頭部引入 flexible.js，讓它一上來就執(zhí)行：
<script type="text/javascript" src="./js/flexible.js"></script>
② 打開 flexible.js，找到最后一行，將兩個(gè)傳參改成設(shè)計(jì)稿的寬度，我這里設(shè)計(jì)稿是720，所以，修改如下：
;(function(designWidth, maxWidth) {
...
})(720, 720);
那么，在量出設(shè)計(jì)稿的像素值，在css中，除以100，就是rem。
4、新建login.html，放在根目錄，在header頭部加入下面的代碼，讓頁面寬度等于手機(jī)寬度，并且禁止縮放：
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
5、在login.html的header加入下面的代碼，禁止手機(jī)將頁面中的號(hào)碼格式化，否則影響美觀：
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
6、引入相關(guān)css、js，這里不多說了。
至此，準(zhǔn)備工作完成了，下面開始編寫頁面了。
背景高斯模糊，就不能直接設(shè)置到body上，否則body里面的內(nèi)容都會(huì)高斯模糊，所以單獨(dú)寫個(gè)section，來設(shè)置
<section class="bg"></section>
.bg{
background:url(../images/bg.jpg) no-repeat center/cover;
position: fixed;
z-index: 1;
top:0;
left:0;
right:0;
bottom:0;
filter:blur(15px);
}
效果圖如下：
出問題了，高斯模糊導(dǎo)致周邊變淡，玩過PS的都知道這個(gè)問題。我們只需要將背景容器放大點(diǎn)，超出body就行了，所以，修改后的css如下：
.bg{
background:url(../images/bg.jpg) no-repeat center/cover;
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
filter:blur(15px);
transform:scale(1.1);
}
效果圖如下：
注：因?yàn)楸尘岸ㄎ涣耍岳锩娴膬?nèi)容都要定位并且z-index都要比它高。
頁面的內(nèi)容上下居中，無論什么分辨率，內(nèi)容始終在中間：
1、給body掛上 flex flex-middle，這個(gè)是在base里面定義好的flex樣式
<body class="flex flex-middle">
2、既然要垂直居中，body的高度肯定要100%，html也要設(shè)置，否則，body的100%沒作用：
body,html{
height: 100%;
}
.wrap{
padding:0 .85rem;
position: relative;
z-index: 2;
}
3、這個(gè)wrap就是居中容器，所有的內(nèi)容都放里面：
<section class="wrap"></section>
header比較簡(jiǎn)單，要注意“Welcome”，有陰影，這里不能用盒子陰影box-shadow，而是用文字陰影text-shadow，它比box-shadow少個(gè)參數(shù)，即擴(kuò)展。根據(jù)UI，測(cè)量的尺寸都除以100就是rem的值，如130px，這里就寫1.3rem就可以了
.header h1{
font-weight: normal;
font-size: 1rem;
text-shadow: 0 0 4px rgba(0,0,0,.5);
text-align: center;
}
.header p{
font-size: .22rem;
text-align: center;
line-height: 1.8
}
<header class="header">
<h1>Welcome</h1>
<p>
Lorem ipsum sit amet,consectetur adipiscing dlit. Donec auctor neque sed pretium luctus.
</p>
</header>
效果如下
這個(gè)主要是頭像、輸入框和提交按鈕，都比較簡(jiǎn)單，就不多說了。邊框小編設(shè)置的粗細(xì)是0.5px，這里并不代表邊框粗細(xì)就是0.5px。因?yàn)楝F(xiàn)在手機(jī)大部分都是視網(wǎng)膜屏，物理分辨率都是邏輯分辨率的2倍多，這里設(shè)置的0.5px是邏輯分辨率，轉(zhuǎn)換成物理像素大概就是1px。
.avatar{
width: 1.5rem;
height: 1.5rem;
display: block;
margin: auto;
border-radius: 999px;
border:.5px solid #fff;
box-shadow: 0 0 4px 0 rgba(0,0,0,.3);
}
.row *{
height:.85rem;
line-height: .85rem;
width: 100%;
text-align: center;
border-radius: 999px;
box-shadow: 0 0 4px 0 rgba(0,0,0,.3);
}
.row .ipt{
background: transparent;
border:.5px solid #fff;
}
.row .submit{
background:linear-gradient(to bottom,#25af61,#149c4f);
border:0 none;
display: block;
border:.5px solid #33c773;
}
<section class="main mt110">
<img class="avatar" src="./images/avatar.jpg">
<section class="row mt25">
<input type="text" class="ipt" placeholder="User Name">
</section>
<section class="row mt25">
<input type="password" class="ipt" placeholder="Password">
</section>
<section class="row mt25">
<a href="javascript：;" class="submit">Login</a>
</section>
</section>
六、版權(quán)
這個(gè)沒什么好說的，居中，定位在底部
.copy{
position: absolute;
bottom: .2rem;
left: 0;
right: 0;
z-index: 2;
font-size: .23rem;
}
<footer class="copy tc mt40">
? 2019 IT學(xué)堂
</footer>
最終效果如下
想要源碼的話可以關(guān)注我們，然后再私信我們，我們會(huì)發(fā)給您。關(guān)注IT學(xué)堂，有更多干貨哦！
多特效代碼請(qǐng)?zhí)砑親TML5前端交流群581549454
廢話不多說上代碼！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery手機(jī)微信端手指觸摸圖片放大代碼</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css">
<style type="text/css">
/* styles unrelated to zoom */
* { border:0; margin:0; padding:0; }
p { position:absolute; top:3px; right:28px; color:#555; font:bold 13px/1 sans-serif;}
/* these styles are for the demo, but are not required for the plugin */
.zoom {
display:inline-block;
position: relative;
}
/* magnifying glass icon */
.zoom:after {
content:'';
display:block;
width:33px;
height:33px;
position:absolute;
top:0;
right:0;
background:url(img/icon.png);
}
.zoom img {
display: block;
}
.zoom img::selection { background-color: transparent; }
#ex2 img:hover { cursor: url(img/grab.cur), default; }
#ex2 img:active { cursor: url(img/grabbed.cur), default; }
</style>
</head>
<body>
<div>
<span id='ex1'>
<img src='img/design.jpg' width='555' height='320' alt='web design'>
<p>Hover</p>
</span>
<span id='ex2'>
<img src='img/women.jpg' width='290' height='320' alt='women'>
<p>Grab</p>
</span>
<span id='ex3'>
<img src='img/horse.jpg' width='555' height='320' alt='horse'>
<p>Click to activate</p>
</span>
<span id='ex4'>
<img src='img/women2.jpg' width='290' height='320' alt='women2'>
<p>Click to toggle</p>
</span>
</div>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src='js/jquery.zoom.js' type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#ex1').zoom();
$('#ex2').zoom({ on:'grab' });
$('#ex3').zoom({ on:'click' });
$('#ex4').zoom({ on:'toggle' });
});
</script>
</body>
</html>
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
