From 75f8d8615b1d994b9a49db7ec154abb8466bb690 Mon Sep 17 00:00:00 2001 From: hdw <496960745@qq.com> Date: 星期一, 26 十一月 2018 12:23:59 +0800 Subject: [PATCH] 添加图片拖动验证 --- gx_tieta/WebRoot/js/verify/fonts/icomoon.woff | 0 gx_tieta/WebRoot/js/verify/fonts/iconfont.ttf | 0 gx_tieta/WebRoot/js/verify/css/htmleaf-demo.css | 253 +++++++++++ gx_tieta/WebRoot/js/verify/fonts/iconfont.svg | 45 + gx_tieta/WebRoot/css/login_layout.css | 49 ++ gx_tieta/WebRoot/js/verify/js/verify.js | 733 +++++++++++++++++++++++++++++++ gx_tieta/WebRoot/js/verify/fonts/icomoon.ttf | 0 gx_tieta/WebRoot/js/verify/images/2.jpg | 0 gx_tieta/WebRoot/js/verify/fonts/icomoon.svg | 12 gx_tieta/WebRoot/js/verify/css/verify.css | 170 +++++++ gx_tieta/WebRoot/js/verify/fonts/iconfont.woff | 0 gx_tieta/WebRoot/js/verify/fonts/icomoon.eot | 0 gx_tieta/WebRoot/images/2.jpg | 0 gx_tieta/WebRoot/js/verify/fonts/iconfont.eot | 0 gx_tieta/WebRoot/login.jsp | 114 ++++ gx_tieta/WebRoot/js/verify/images/1.jpg | 0 gx_tieta/WebRoot/js/verify/js/verify.min.js | 2 gx_tieta/WebRoot/images/1.jpg | 0 18 files changed, 1,370 insertions(+), 8 deletions(-) diff --git a/gx_tieta/WebRoot/css/login_layout.css b/gx_tieta/WebRoot/css/login_layout.css index 0cbe516..4f72d2a 100644 --- a/gx_tieta/WebRoot/css/login_layout.css +++ b/gx_tieta/WebRoot/css/login_layout.css @@ -227,4 +227,53 @@ .container .bg-img img { width: 100%; height: 100%; +} + +.hdw-dialog { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: none; + z-index: 9999; +} + +.hdw-dialog.hdw-dialog-hide { + display: none; +} + +.hdw-dialog .hdw-dialog-container { + position: relative; + width: 100%; + height: 100%; + background-color: none; +} + +.hdw-dialog-bg { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #000000; + opacity: .1; + z-index: 0; +} +.hdw-dialog-content { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #FFFFFF; + z-index: 1; +} +.hdw-dialog-content.hdw-dialog-width500-300 { + width: 500px; + height: 300px; + left: 50%; + margin-left: -250px; + top: 50%; + margin-top: -150px; } \ No newline at end of file diff --git a/gx_tieta/WebRoot/images/1.jpg b/gx_tieta/WebRoot/images/1.jpg new file mode 100644 index 0000000..0fdb8dd --- /dev/null +++ b/gx_tieta/WebRoot/images/1.jpg Binary files differ diff --git a/gx_tieta/WebRoot/images/2.jpg b/gx_tieta/WebRoot/images/2.jpg new file mode 100644 index 0000000..6e73457 --- /dev/null +++ b/gx_tieta/WebRoot/images/2.jpg Binary files differ diff --git a/gx_tieta/WebRoot/js/verify/css/htmleaf-demo.css b/gx_tieta/WebRoot/js/verify/css/htmleaf-demo.css new file mode 100644 index 0000000..882bc75 --- /dev/null +++ b/gx_tieta/WebRoot/js/verify/css/htmleaf-demo.css @@ -0,0 +1,253 @@ +@font-face { + font-family: 'icomoon'; + src:url('../fonts/icomoon.eot?rretjt'); + src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'), + url('../fonts/icomoon.woff?rretjt') format('woff'), + url('../fonts/icomoon.ttf?rretjt') format('truetype'), + url('../fonts/icomoon.svg?rretjt#icomoon') format('svg'); + font-weight: normal; + font-style: normal; +} + +[class^="icon-"], [class*=" icon-"] { + font-family: 'icomoon'; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +body, html { font-size: 100%; padding: 0; margin: 0;} + +/* Reset */ +*, +*:after, +*:before { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ +.clearfix:before, +.clearfix:after { + content: " "; + display: table; +} + +.clearfix:after { + clear: both; +} + +body{ + font-weight: 500; + font-size: 1.05em; + font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif; +} +.htmleaf-links a{ color: rgba(255, 255, 255, 0.6);outline: none;text-decoration: none;-webkit-transition: 0.2s;transition: 0.2s;} +.htmleaf-links a:hover,.htmleaf-links a:focus{color:#74777b;text-decoration: none;} +.htmleaf-container{ + margin: 0 auto; +} + +.bgcolor-1 { background: #f0efee; } +.bgcolor-2 { background: #f9f9f9; } +.bgcolor-3 { background: #e8e8e8; }/*light grey*/ +.bgcolor-4 { background: #2f3238; color: #fff; }/*Dark grey*/ +.bgcolor-5 { background: #df6659; color: #521e18; }/*pink1*/ +.bgcolor-6 { background: #2fa8ec; }/*sky blue*/ +.bgcolor-7 { background: #d0d6d6; }/*White tea*/ +.bgcolor-8 { background: #3d4444; color: #fff; }/*Dark grey2*/ +.bgcolor-9 { background: #ef3f52; color: #fff;}/*pink2*/ +.bgcolor-10{ background: #64448f; color: #fff;}/*Violet*/ +.bgcolor-11{ background: #3755ad; color: #fff;}/*dark blue*/ +.bgcolor-12{ background: #3498DB; color: #fff;}/*light blue*/ +.bgcolor-20{ background: #494A5F;color: #D5D6E2;} +/* Header */ +.htmleaf-header{ + padding: 1em 190px 1em; + letter-spacing: -1px; + text-align: center; + background: #66677c; +} +.htmleaf-header h1 { + color: #D5D6E2; + font-weight: 600; + font-size: 2em; + line-height: 1; + margin-bottom: 0; +} +.htmleaf-header h1 span { + display: block; + font-size: 60%; + font-weight: 400; + padding: 0.8em 0 0.5em 0; + color: #c3c8cd; +} +/*nav*/ +.htmleaf-demo a{color: #fff;text-decoration: none;} +.htmleaf-demo{width: 100%;padding-bottom: 1.2em;} +.htmleaf-demo a{display: inline-block;margin: 0.5em;padding: 0.6em 1em;border: 3px solid #fff;font-weight: 700;} +.htmleaf-demo a:hover{opacity: 0.6;} +.htmleaf-demo a.current{background:#1d7db1;color: #fff; } +/* Top Navigation Style */ +.htmleaf-links { + position: relative; + display: inline-block; + white-space: nowrap; + font-size: 1.5em; + text-align: center; +} + +.htmleaf-links::after { + position: absolute; + top: 0; + left: 50%; + margin-left: -1px; + width: 2px; + height: 100%; + background: #dbdbdb; + content: ''; + -webkit-transform: rotate3d(0,0,1,22.5deg); + transform: rotate3d(0,0,1,22.5deg); +} + +.htmleaf-icon { + display: inline-block; + margin: 0.5em; + padding: 0em 0; + width: 1.5em; + text-decoration: none; +} + +.htmleaf-icon span { + display: none; +} + +.htmleaf-icon:before { + margin: 0 5px; + text-transform: none; + font-weight: normal; + font-style: normal; + font-variant: normal; + font-family: 'icomoon'; + line-height: 1; + speak: none; + -webkit-font-smoothing: antialiased; +} +/* footer */ +.htmleaf-footer{width: 100%;padding-top: 10px;} +.htmleaf-small{font-size: 0.8em;} +.center{text-align: center;} +/****/ +.related { + color: #fff; + background: #494A5F; + text-align: center; + font-size: 1.25em; + padding: 0.5em 0; + overflow: hidden; +} + +.related > a { + vertical-align: top; + width: calc(100% - 20px); + max-width: 340px; + display: inline-block; + text-align: center; + margin: 20px 10px; + padding: 25px; + font-family: "Microsoft YaHei","瀹嬩綋","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo; +} +.related a { + display: inline-block; + text-align: left; + margin: 20px auto; + padding: 10px 20px; + opacity: 0.8; + -webkit-transition: opacity 0.3s; + transition: opacity 0.3s; + -webkit-backface-visibility: hidden; + text-decoration: none; +} + +.related a:hover, +.related a:active { + opacity: 1; +} + +.related a img { + max-width: 100%; + opacity: 0.8; + border-radius: 4px; +} +.related a:hover img, +.related a:active img { + opacity: 1; +} +.related h3{font-family: "Microsoft YaHei", sans-serif;font-size: 1.2em} +.related a h3 { + font-size: 0.85em; + font-weight: 300; + margin-top: 0.15em; + color: #fff; +} +/* icomoon */ +.icon-htmleaf-home-outline:before { + content: "\e5000"; +} + +.icon-htmleaf-arrow-forward-outline:before { + content: "\e5001"; +} + +@media screen and (max-width: 1024px) { + .htmleaf-header { + padding: 2em 10% 2em; + } + .htmleaf-header h1 { + font-size:1.4em; + } + .htmleaf-links{font-size: 1.4em} +} + +@media screen and (max-width: 960px) { + .htmleaf-header { + padding: 2em 10% 2em; + } + .htmleaf-header h1 { + font-size:1.2em; + } + .htmleaf-links{font-size: 1.2em} + .related h3{font-size: 1em;} + .related a h3 { + font-size: 0.8em; + } +} + +@media screen and (max-width: 766px) { + .htmleaf-header h1 { + font-size:1.3em; + } + .htmleaf-links{font-size: 1.3em} +} + +@media screen and (max-width: 640px) { + .htmleaf-header { + padding: 2em 10% 2em; + } + .htmleaf-header h1 { + font-size:1em; + } + .htmleaf-links{font-size: 1em} + .related h3{font-size: 0.8em;} + .related a h3 { + font-size: 0.6em; + } +} \ No newline at end of file diff --git a/gx_tieta/WebRoot/js/verify/css/verify.css b/gx_tieta/WebRoot/js/verify/css/verify.css new file mode 100644 index 0000000..8a81218 --- /dev/null +++ b/gx_tieta/WebRoot/js/verify/css/verify.css @@ -0,0 +1,170 @@ +/*甯歌楠岃瘉鐮�*/ +.verify-code { + font-size: 20px; + text-align: center; + cursor: pointer; + margin-bottom: 5px; + border: 1px solid #ddd; +} + +.cerify-code-panel { + height:100%; + overflow:hidden; +} + +.verify-code-area { + float:left; +} + +.verify-input-area { + float: left; + width: 60%; + padding-right: 10px; + +} + +.verify-change-area { + line-height: 30px; + float: left; +} + +.varify-input-code { + display:inline-block; + width: 100%; + height: 25px; +} + +.verify-change-code { + color: #337AB7; + cursor: pointer; +} + +.verify-btn { + width: 200px; + height: 30px; + background-color: #337AB7; + color:#FFFFFF; + border:none; + margin-top: 10px; +} + + + + + + +/*婊戝姩楠岃瘉鐮�*/ +.verify-bar-area { + position: relative; + background: #FFFFFF; + text-align: center; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; + border: 1px solid #ddd; + -webkit-border-radius: 4px; +} + +.verify-bar-area .verify-move-block { + position: absolute; + top: 0px; + left: 0; + background: #fff; + cursor: pointer; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; + box-shadow: 0 0 2px #888888; + -webkit-border-radius: 1px; +} + +.verify-bar-area .verify-move-block:hover { + background-color: #337ab7; + color: #FFFFFF; +} + +.verify-bar-area .verify-left-bar { + position: absolute; + top: -1px; + left: -1px; + background: #f0fff0; + cursor: pointer; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; + border: 1px solid #ddd; +} + +.verify-img-panel { + margin:0; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; + border: 1px solid #ddd; + border-radius: 3px; + position: relative; +} + +.verify-img-panel .verify-refresh { + width: 25px; + height: 25px; + text-align:center; + padding: 5px; + cursor: pointer; + position: absolute; + top: 0; + right: 0; + z-index: 2; +} + +.verify-img-panel .icon-refresh { + font-size: 20px; + color: #fff; +} + +.verify-img-panel .verify-gap { + background-color: #fff; + position: relative; + z-index: 2; + border:1px solid #fff; +} + +.verify-bar-area .verify-move-block .verify-sub-block { + position: absolute; + text-align: center; + z-index: 3; + border: 1px solid #fff; +} + +.verify-bar-area .verify-move-block .verify-icon { + font-size: 18px; +} + +.verify-bar-area .verify-msg { + z-index : 3; +} + +/*瀛椾綋鍥炬爣鐨刢ss*/ +@font-face {font-family: "iconfont"; + src: url('../fonts/iconfont.eot?t=1508229193188'); /* IE9*/ + src: url('../fonts/iconfont.eot?t=1508229193188#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAaAAAsAAAAACUwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7kiSY21hcAAAAYAAAAB3AAABuM+qBlRnbHlmAAAB+AAAAnQAAALYnrUwT2hlYWQAAARsAAAALwAAADYPNwajaGhlYQAABJwAAAAcAAAAJAfeA4dobXR4AAAEuAAAABMAAAAYF+kAAGxvY2EAAATMAAAADgAAAA4CvAGsbWF4cAAABNwAAAAfAAAAIAEVAF1uYW1lAAAE/AAAAUUAAAJtPlT+fXBvc3QAAAZEAAAAPAAAAE3oPPXPeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/sM4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDxbwtzwv4EhhrmBoQEozAiSAwAw1A0UeJzFkcENgCAMRX8RjCGO4gTe9eQcnhzAfXC2rqG/hYsT8MmD9gdS0gJIAAaykAjIBYHppCvuD8juR6zMJ67A89Zdn/f1aNPikUn8RvYo8G20CjKim6Rf6b9m34+WWd/vBr+oW8V6q3vF5qKlYrPRp4L0Ad5nGL8AeJxFUc9rE0EYnTezu8lMsrvtbrqb3TRt0rS7bdOmdI0JbWmCtiItIv5oi14qevCk9SQVLFiQgqAF8Q9QLKIHLx48FkHo3ZNnFUXwD5C2B6dO6sFhmI83w7z3fe8RnZCjb2yX5YlLhskkmScXCIFRxYBFiyjH9Rqtoqes9/g5i8WVuJyqDNTYLPwBI+cljXrkGynDhoU+nCgnjbhGY5yst+gMEq8IBIXwsjPU67CnEPm4b0su0h309Fd67da4XBhr55KSm17POk7gOE/Shq6nKdVsC7d9j+tcGPKVboc9u/0jtB/ZIA7PXTVLBef6o/paccjnwOYm3ELJetPuDrvV3gg91wlSXWY6H5qVwRzWf2TybrYYfSdqoXOwh/Qa8RWIjBTiSI3h614/vKSNRhONOrsnQi6Xf4nQFQDTmJE1NKbhI6crHEJO/+S5QPxhYJRRyvBFBP+5T9EPpEAIVzzRQIrjmJ6jY1WTo+NXTMchuBsKuS8PRZATSMl9oTA4uNLkeIA0V1UeqOoGQh7IAxGo+7T83fn3T+voqCNPPAUazUYUI7LgKSV1Jk2oUeghYGhZ+cKOe2FjVu5ZKEY2VkE13AK1+jI4r1KLbPlZfrKiPhOXKPRj7q9sj9XJ7LFHNmrKJS3VCdhXGSdKrtmoQaWeMjQVt0KD6sGPOx0oH2fgtzoNROxtNq8F3tzYM/n+TjKSX5qf2jx941276TIr9FjXxKr8eX/6bK4yuopwo9py1sw8F9kdw4AmurRpLUM3tYx5ZnKpfHPi8dzz19vJ6MjyxYUrpqeb1uLs3eGV6vr21pSqpeWkqonAN9oUyIiXpv8XvlN5e3icY2BkYGAA4n0vN4fG89t8ZeBmYQCBa9wPPRH0/wcsDMwmQC4HAxNIFABAfAqaAHicY2BkYGBu+N/AEMPCAAJAkpEBFbABAEcMAm94nGNhYGBgfsnAwMKAigESnwEBAAAAAAAAdgCkANoBCAFsAAB4nGNgZGBgYGMIZGBlAAEmIOYCQgaG/2A+AwARSAFzAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgI2RiZGZkYWRlZGNkZ2BsYI1OSM1OZs1OSe/OJW1KDM9o4S9KDWtKLU4g4EBAJ79CeQ=') format('woff'), + url('../fonts/iconfont.ttf?t=1508229193188') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ + url('../fonts/iconfont.svg?t=1508229193188#iconfont') format('svg'); /* iOS 4.1- */ +} + +.iconfont { + font-family:"iconfont" !important; + font-size:16px; + font-style:normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-check:before { content: "\e645"; } + +.icon-close:before { content: "\e646"; } + +.icon-right:before { content: "\e6a3"; } + +.icon-refresh:before { content: "\e6a4"; } diff --git a/gx_tieta/WebRoot/js/verify/fonts/icomoon.eot b/gx_tieta/WebRoot/js/verify/fonts/icomoon.eot new file mode 100644 index 0000000..5d067ed --- /dev/null +++ b/gx_tieta/WebRoot/js/verify/fonts/icomoon.eot Binary files differ diff --git a/gx_tieta/WebRoot/js/verify/fonts/icomoon.svg b/gx_tieta/WebRoot/js/verify/fonts/icomoon.svg new file mode 100644 index 0000000..d17e910 --- /dev/null +++ b/gx_tieta/WebRoot/js/verify/fonts/icomoon.svg @@ -0,0 +1,12 @@ +<?xml version="1.0" standalone="no"?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" > +<svg xmlns="http://www.w3.org/2000/svg"> +<metadata>Generated by IcoMoon</metadata> +<defs> +<font id="icomoon" horiz-adv-x="1024"> +<font-face units-per-em="1024" ascent="960" descent="-64" /> +<missing-glyph horiz-adv-x="1024" /> +<glyph unicode=" " d="" horiz-adv-x="512" /> +<glyph unicode="󥀀" d="M949.845 492.032c-144.64 121.771-407.296 348.629-409.899 350.933l-27.947 24.021-27.819-24.021c-2.645-2.261-265.429-229.035-412.16-351.915-18.688-16.811-29.355-40.32-29.355-64.384 0-47.104 38.229-85.333 85.333-85.333h42.667v-256c0-47.104 38.229-85.333 85.333-85.333h512c47.104 0 85.333 38.229 85.333 85.333v256h42.667c47.104 0 85.333 38.229 85.333 85.333 0 25.515-11.733 49.536-31.488 65.365zM597.333 85.334h-170.667v213.333h170.667v-213.333zM768 426.667l0.085-341.333c-0.085 0-128.085 0-128.085 0v256h-256v-256h-128v341.333h-128.043c117.973 98.645 312.107 265.685 384.043 327.68 71.936-61.995 265.984-228.992 384-327.723 0 0-128 0-128 0.043z" /> +<glyph unicode="󥀁" d="M170.667 85.376c-4.096 0-8.149 0.64-12.203 1.792-18.091 5.376-30.464 22.016-30.464 40.875v42.667c0 204.8 144.256 378.197 341.333 417.963v72.704c0 22.784 8.875 44.203 24.96 60.331 32.256 32.299 88.533 32.256 120.704 0.043l268.288-264.661c8.149-8.021 12.715-18.901 12.715-30.379s-4.565-22.357-12.715-30.379l-268.501-264.832c-31.829-31.829-88.192-32.043-120.448 0.213-16.128 16.128-25.003 37.547-25.003 60.331v61.312c-106.453-8.576-192.981-42.027-262.997-148.651-8.107-12.288-21.547-19.328-35.669-19.328zM512 340.907c11.179 0 42.667 0.427 42.667 0.427v-149.291l237.909 234.667-237.909 234.496v-149.205c0 0-16.384 0.171-38.016-2.219-145.749-16.128-261.333-122.197-294.059-259.413 90.496 73.728 194.176 88.149 289.408 90.539z" /> +</font></defs></svg> \ No newline at end of file diff --git a/gx_tieta/WebRoot/js/verify/fonts/icomoon.ttf b/gx_tieta/WebRoot/js/verify/fonts/icomoon.ttf new file mode 100644 index 0000000..7ffeed1 --- /dev/null +++ b/gx_tieta/WebRoot/js/verify/fonts/icomoon.ttf Binary files differ diff --git a/gx_tieta/WebRoot/js/verify/fonts/icomoon.woff b/gx_tieta/WebRoot/js/verify/fonts/icomoon.woff new file mode 100644 index 0000000..b3470d3 --- /dev/null +++ b/gx_tieta/WebRoot/js/verify/fonts/icomoon.woff Binary files differ diff --git a/gx_tieta/WebRoot/js/verify/fonts/iconfont.eot b/gx_tieta/WebRoot/js/verify/fonts/iconfont.eot new file mode 100644 index 0000000..5076cf7 --- /dev/null +++ b/gx_tieta/WebRoot/js/verify/fonts/iconfont.eot Binary files differ diff --git a/gx_tieta/WebRoot/js/verify/fonts/iconfont.svg b/gx_tieta/WebRoot/js/verify/fonts/iconfont.svg new file mode 100644 index 0000000..6caff23 --- /dev/null +++ b/gx_tieta/WebRoot/js/verify/fonts/iconfont.svg @@ -0,0 +1,45 @@ +<?xml version="1.0" standalone="no"?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" > +<!-- +2013-9-30: Created. +--> +<svg> +<metadata> +Created by iconfont +</metadata> +<defs> + +<font id="iconfont" horiz-adv-x="1024" > + <font-face + font-family="iconfont" + font-weight="500" + font-stretch="normal" + units-per-em="1024" + ascent="896" + descent="-128" + /> + <missing-glyph /> + + <glyph glyph-name="x" unicode="x" horiz-adv-x="1001" +d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5 +t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5 +t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" /> + + + + <glyph glyph-name="check" unicode="" d="M887.904 597.792c-12.864 12.064-33.152 11.488-45.216-1.408L415.936 142.016l-233.12 229.696C170.208 384.128 149.952 384 137.536 371.392c-12.416-12.576-12.256-32.864 0.352-45.248l256.48-252.672c0.096-0.096 0.224-0.128 0.32-0.224 0.096-0.096 0.128-0.224 0.224-0.32 2.016-1.92 4.448-3.008 6.784-4.288 1.152-0.672 2.144-1.664 3.36-2.144 3.776-1.472 7.776-2.24 11.744-2.24 4.192 0 8.384 0.832 12.288 2.496 1.312 0.544 2.336 1.664 3.552 2.368 2.4 1.408 4.896 2.592 6.944 4.672 0.096 0.096 0.128 0.256 0.224 0.352 0.064 0.096 0.192 0.128 0.288 0.224l449.184 478.208C901.44 565.408 900.768 585.664 887.904 597.792z" horiz-adv-x="1024" /> + + + <glyph glyph-name="close" unicode="" d="M557.312 382.752l265.28 263.904c12.544 12.48 12.608 32.704 0.128 45.248-12.512 12.576-32.704 12.608-45.248 0.128l-265.344-263.936-263.04 263.84C236.64 704.416 216.384 704.48 203.84 692 191.328 679.52 191.296 659.264 203.776 646.72l262.976-263.776L201.6 119.2c-12.544-12.48-12.608-32.704-0.128-45.248 6.24-6.272 14.464-9.44 22.688-9.44 8.16 0 16.32 3.104 22.56 9.312l265.216 263.808 265.44-266.24c6.24-6.272 14.432-9.408 22.656-9.408 8.192 0 16.352 3.136 22.592 9.344 12.512 12.48 12.544 32.704 0.064 45.248L557.312 382.752z" horiz-adv-x="1024" /> + + + <glyph glyph-name="right" unicode="" d="M761.056 363.872c0.512 0.992 1.344 1.824 1.792 2.848 8.8 18.304 5.92 40.704-9.664 55.424L399.936 756.256c-19.264 18.208-49.632 17.344-67.872-1.888-18.208-19.264-17.376-49.632 1.888-67.872l316.96-299.84-315.712-304.288c-19.072-18.4-19.648-48.768-1.248-67.872 9.408-9.792 21.984-14.688 34.56-14.688 12 0 24 4.48 33.312 13.44l350.048 337.376c0.672 0.672 0.928 1.6 1.6 2.304 0.512 0.48 1.056 0.832 1.568 1.344C757.76 357.12 759.2 360.608 761.056 363.872z" horiz-adv-x="1024" /> + + + <glyph glyph-name="refresh" unicode="" d="M939.456 639.776c-16.672 5.984-34.976-2.72-40.896-19.36l-24.768-69.344c-28.992 65.312-74.784 122.72-133.088 165.92C555.328 854.272 291.296 816.768 152.32 633.344c-67.264-88.768-95.616-198.176-79.84-308.032 15.84-110.304 74.208-207.776 164.352-274.496 75.424-55.808 163.808-82.752 251.456-82.752 128.032 0 254.56 57.44 336.992 166.272 36.48 48.128 61.472 102.08 74.208 160.416 3.776 17.248-7.136 34.304-24.416 38.08-17.216 3.712-34.304-7.104-38.08-24.416-10.784-49.184-31.872-94.752-62.72-135.456-117.888-155.52-341.92-187.232-499.392-70.72-76.288 56.48-125.664 138.912-139.072 232.16-13.344 92.8 10.656 185.248 67.488 260.288 117.856 155.584 341.792 187.424 499.328 70.848 57.024-42.24 99.84-100.608 122.976-166.624l-109.984 42.944c-16.416 6.368-35.008-1.696-41.44-18.176-6.432-16.48 1.728-35.008 18.176-41.44l161.856-63.2c3.808-1.472 7.744-2.208 11.616-2.208 0.544 0 1.024 0.192 1.568 0.224 1.216-0.128 2.432-0.64 3.648-0.64 13.12 0 25.472 8.16 30.112 21.248l57.632 161.184C964.768 615.52 956.096 633.856 939.456 639.776z" horiz-adv-x="1024" /> + + + + + </font> +</defs></svg> diff --git a/gx_tieta/WebRoot/js/verify/fonts/iconfont.ttf b/gx_tieta/WebRoot/js/verify/fonts/iconfont.ttf new file mode 100644 index 0000000..568bb48 --- /dev/null +++ b/gx_tieta/WebRoot/js/verify/fonts/iconfont.ttf Binary files differ diff --git a/gx_tieta/WebRoot/js/verify/fonts/iconfont.woff b/gx_tieta/WebRoot/js/verify/fonts/iconfont.woff new file mode 100644 index 0000000..b9ec4fa --- /dev/null +++ b/gx_tieta/WebRoot/js/verify/fonts/iconfont.woff Binary files differ diff --git a/gx_tieta/WebRoot/js/verify/images/1.jpg b/gx_tieta/WebRoot/js/verify/images/1.jpg new file mode 100644 index 0000000..0fdb8dd --- /dev/null +++ b/gx_tieta/WebRoot/js/verify/images/1.jpg Binary files differ diff --git a/gx_tieta/WebRoot/js/verify/images/2.jpg b/gx_tieta/WebRoot/js/verify/images/2.jpg new file mode 100644 index 0000000..6e73457 --- /dev/null +++ b/gx_tieta/WebRoot/js/verify/images/2.jpg Binary files differ diff --git a/gx_tieta/WebRoot/js/verify/js/verify.js b/gx_tieta/WebRoot/js/verify/js/verify.js new file mode 100644 index 0000000..0a32563 --- /dev/null +++ b/gx_tieta/WebRoot/js/verify/js/verify.js @@ -0,0 +1,733 @@ +/*! Verify-v0.1.0 MIT License by 澶х唺*/ + + +;(function($, window, document,undefined) { + + //瀹氫箟Code鐨勬瀯閫犲嚱鏁� + var Code = function(ele, opt) { + this.$element = ele, + this.defaults = { + type : 1, + figure : 100, //浣嶆暟锛屼粎鍦╰ype=2鏃剁敓鏁� + arith : 0, //绠楁硶锛屾敮鎸佸姞鍑忎箻锛�0涓洪殢鏈猴紝浠呭湪type=2鏃剁敓鏁� + width : '200px', + height : '60px', + fontSize : '30px', + codeLength : 6, + btnId : 'check-btn', + ready : function(){}, + success : function(){}, + error : function(){} + }, + this.options = $.extend({}, this.defaults, opt) + }; + + var _code_chars = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']; + var _code_color1 = ['#fffff0', '#f0ffff', '#f0fff0', '#fff0f0']; + var _code_color2 = ['#FF0033', '#006699', '#993366', '#FF9900', '#66CC66', '#FF33CC']; + + //瀹氫箟Code鐨勬柟娉� + Code.prototype = { + init : function() { + + var _this = this; + + this.loadDom(); + this.setCode(); + + this.options.ready(); + + this.$element[0].onselectstart = document.body.ondrag = function(){ + return false; + }; + + //鐐瑰嚮楠岃瘉鐮� + this.$element.find('.verify-code, .verify-change-code').on('click', function() { + _this.setCode(); + }); + + //纭畾鐨勭偣鍑讳簨浠� + this.htmlDoms.code_btn.on('click', function() { + _this.checkCode(); + }) + + }, + + //鍔犺浇椤甸潰 + loadDom : function() { + var panelHtml = '<div class="cerify-code-panel"><div class="verify-code"></div><div class="verify-code-area"><div class="verify-input-area"><input type="text" class="varify-input-code" /></div><div class="verify-change-area"><a class="verify-change-code">鎹竴寮�</a></div></div></div>'; + this.$element.append(panelHtml); + + this.htmlDoms = { + code_btn : $('#'+this.options.btnId), + code : this.$element.find('.verify-code'), + code_area : this.$element.find('.verify-code-area'), + code_input : this.$element.find('.varify-input-code'), + }; + + this.htmlDoms.code.css({'width':this.options.width, 'height':this.options.height,'line-height':this.options.height, 'font-size':this.options.fontSize}); + this.htmlDoms.code_area.css({'width':this.options.width}); + }, + + + //璁剧疆楠岃瘉鐮� + setCode : function() { + + var color1Num = Math.floor(Math.random() * 3); + var color2Num = Math.floor(Math.random() * 5); + + this.htmlDoms.code.css({'background-color': _code_color1[color1Num], 'color': _code_color2[color2Num]}); + this.htmlDoms.code_input.val(''); + + var code = ''; + this.code_chose = ''; + + if(this.options.type == 1) { //鏅�氶獙璇佺爜 + for(var i = 0; i < this.options.codeLength; i++) { + var charNum = Math.floor(Math.random() * 52); + var tmpStyle = (charNum%2 ==0)? "font-style:italic;margin-right: 10px;":"font-weight:bolder;"; + tmpStyle += (Math.floor(Math.random() * 2) == 1)? "font-weight:bolder;":""; + + this.code_chose += _code_chars[charNum]; + code += '<font style="'+tmpStyle+'">'+_code_chars[charNum]+'</font>'; + } + }else { //绠楁硶楠岃瘉鐮� + + var num1 = Math.floor(Math.random() * this.options.figure); + var num2 = Math.floor(Math.random() * this.options.figure); + + if(this.options.arith == 0) { + var tmparith = Math.floor(Math.random() * 3); + } + + switch(tmparith) { + case 1 : + this.code_chose = parseInt(num1) + parseInt(num2); + code = num1 + ' + ' + num2 + ' = ?'; + break; + case 2 : + if(parseInt(num1) < parseInt(num2)) { + var tmpnum = num1; + num1 = num2; + num2 = tmpnum; + } + this.code_chose = parseInt(num1) - parseInt(num2); + code = num1 + ' - ' + num2 + ' = ?'; + break; + default : + this.code_chose = parseInt(num1) * parseInt(num2); + code = num1 + ' 脳 ' + num2 + ' = ?'; + break; + } + } + + this.htmlDoms.code.html(code); + + }, + + //姣斿楠岃瘉鐮� + checkCode : function() { + if(this.options.type == 1) { //鏅�氶獙璇佺爜 + var own_input = this.htmlDoms.code_input.val().toUpperCase(); + this.code_chose = this.code_chose.toUpperCase(); + }else { + var own_input = this.htmlDoms.code_input.val(); + } + + if(own_input == this.code_chose) { + this.options.success(); + }else { + this.options.error(); + this.setCode(); + } + } + }; + + + //瀹氫箟Slide鐨勬瀯閫犲嚱鏁� + var Slide = function(ele, opt) { + this.$element = ele, + this.defaults = { + + type : 1, + vOffset: 5, + vSpace : 5, + imgName : ['1.jpg', '2.jpg'], + imgSize : { + width: '400px', + height: '200px', + }, + blockSize : { + width: '50px', + height: '50px', + }, + barSize : { + width : '400px', + height : '40px', + }, + ready : function(){}, + success : function(){}, + error : function(){} + + }, + this.options = $.extend({}, this.defaults, opt) + }; + + + //瀹氫箟Slide鐨勬柟娉� + Slide.prototype = { + + init: function() { + var _this = this; + + //鍔犺浇椤甸潰 + this.loadDom(); + this.options.ready(); + + this.$element[0].onselectstart = document.body.ondrag = function(){ + return false; + }; + + //鎸変笅 + this.htmlDoms.move_block.on('touchstart', function(e) { + _this.start(e); + }); + + this.htmlDoms.move_block.on('mousedown', function(e) { + _this.start(e); + }); + + //鎷栧姩 + window.addEventListener("touchmove", function(e) { + _this.move(e); + }); + window.addEventListener("mousemove", function(e) { + _this.move(e); + }); + + //榧犳爣鏉惧紑 + window.addEventListener("touchend", function() { + _this.end(); + }); + window.addEventListener("mouseup", function() { + _this.end(); + }); + + //鍒锋柊 + _this.$element.find('.verify-refresh').on('click', function() { + _this.refresh(); + }); + }, + + //鍒濆鍖栧姞杞� + loadDom : function() { + this.img_rand = Math.floor(Math.random() * this.options.imgName.length); //闅忔満鐨勮儗鏅浘鐗� + + var panelHtml = ''; + var tmpHtml = ''; + + if(this.options.type != 1) { //鍥剧墖婊戝姩 + panelHtml += '<div class="verify-img-panel"><div class="verify-refresh"><i class="iconfont icon-refresh"></i></div><div class="verify-gap"></div></div>'; + tmpHtml = '<div class="verify-sub-block"></div>'; + } + + panelHtml += '<div class="verify-bar-area"><span class="verify-msg">鍚戝彸婊戝姩瀹屾垚楠岃瘉</span><div class="verify-left-bar"><span class="verify-msg"></span><div class="verify-move-block"><i class="verify-icon iconfont icon-right"></i>'+tmpHtml+'</div></div></div>'; + this.$element.append(panelHtml); + + this.htmlDoms = { + gap : this.$element.find('.verify-gap'), + sub_block : this.$element.find('.verify-sub-block'), + img_panel : this.$element.find('.verify-img-panel'), + bar_area : this.$element.find('.verify-bar-area'), + move_block : this.$element.find('.verify-move-block'), + left_bar : this.$element.find('.verify-left-bar'), + msg : this.$element.find('.verify-msg'), + icon : this.$element.find('.verify-icon'), + refresh :this.$element.find('.verify-refresh') + }; + + this.status = false; //榧犳爣鐘舵�� + this.setSize = this.resetSize(this); //閲嶆柊璁剧疆瀹藉害楂樺害 + + this.htmlDoms.gap.css({'width': this.options.blockSize.width, 'height': this.options.blockSize.height}); + this.htmlDoms.sub_block.css({'width': this.options.blockSize.width, 'height': this.options.blockSize.height}); + this.htmlDoms.img_panel.css({'width': this.setSize.img_width, 'height': this.setSize.img_height, 'background': 'url(images/'+this.options.imgName[this.img_rand]+')', 'background-size' : this.setSize.img_width + ' '+ this.setSize.img_height}); + this.htmlDoms.bar_area.css({'width': this.setSize.bar_width, 'height': this.options.barSize.height, 'line-height':this.options.barSize.height}); + this.htmlDoms.move_block.css({'width': this.options.barSize.height, 'height': this.options.barSize.height}); + this.htmlDoms.left_bar.css({'width': this.options.barSize.height, 'height': this.options.barSize.height}); + + this.randSet(); + }, + + //榧犳爣鎸変笅 + start: function(e) { + this.htmlDoms.msg.text(''); + this.htmlDoms.move_block.css('background-color', '#337ab7'); + this.htmlDoms.left_bar.css('border-color', '#337AB7'); + this.htmlDoms.icon.css('color', '#fff'); + e.stopPropagation(); + this.status = true; + + }, + + //榧犳爣绉诲姩 + move: function(e) { + if(this.status) { + if(!e.touches) { //鍏煎绉诲姩绔� + var x = e.clientX; + }else { //鍏煎PC绔� + var x = e.touches[0].pageX; + } + var bar_area_left = Slide.prototype.getLeft(this.htmlDoms.bar_area[0]); + var move_block_left = x - bar_area_left; //灏忔柟鍧楃浉瀵逛簬鐖跺厓绱犵殑left鍊� + + + if(this.options.type != 1) { //鍥剧墖婊戝姩 + if(move_block_left >= this.htmlDoms.bar_area[0].offsetWidth - parseInt(parseInt(this.options.blockSize.width)/2) - 2) { + move_block_left = this.htmlDoms.bar_area[0].offsetWidth - parseInt(parseInt(this.options.blockSize.width)/2) - 2; + } + + + + + + }else { //鏅�氭粦鍔� + if(move_block_left >= this.htmlDoms.bar_area[0].offsetWidth - parseInt(parseInt(this.options.barSize.height)/2) + 3) { + this.$element.find('.verify-msg:eq(1)').text('鏉惧紑楠岃瘉'); + move_block_left = this.htmlDoms.bar_area[0].offsetWidth - parseInt(parseInt(this.options.barSize.height)/2) + 3; + }else { + this.$element.find('.verify-msg:eq(1)').text(''); + } + } + + + if(move_block_left <= 0) { + move_block_left = parseInt(parseInt(this.options.blockSize.width)/2); + } + + //鎷栧姩鍚庡皬鏂瑰潡鐨刲eft鍊� + this.htmlDoms.move_block.css('left', move_block_left-parseInt(parseInt(this.options.blockSize.width)/2) + "px"); + this.htmlDoms.left_bar.css('width', move_block_left-parseInt(parseInt(this.options.blockSize.width)/2) + "px"); + } + }, + + //榧犳爣鏉惧紑 + end: function() { + + var _this = this; + + //鍒ゆ柇鏄惁閲嶅悎 + if(this.status) { + + if(this.options.type != 1) { //鍥剧墖婊戝姩 + + var vOffset = parseInt(this.options.vOffset); + if(parseInt(this.htmlDoms.gap.css('left')) >= (parseInt(this.htmlDoms.move_block.css('left')) - vOffset) && parseInt(this.htmlDoms.gap.css('left')) <= (parseInt(this.htmlDoms.move_block.css('left')) + vOffset)) { + this.htmlDoms.move_block.css('background-color', '#5cb85c'); + this.htmlDoms.left_bar.css({'border-color': '#5cb85c', 'background-color': '#fff'}); + this.htmlDoms.icon.css('color', '#fff'); + this.htmlDoms.icon.removeClass('icon-right'); + this.htmlDoms.icon.addClass('icon-check'); + this.htmlDoms.refresh.hide(); + this.htmlDoms.move_block.unbind('mousedown touchstart'); + this.options.success(); + }else{ + this.htmlDoms.move_block.css('background-color', '#d9534f'); + this.htmlDoms.left_bar.css('border-color', '#d9534f'); + this.htmlDoms.icon.css('color', '#fff'); + this.htmlDoms.icon.removeClass('icon-right'); + this.htmlDoms.icon.addClass('icon-close'); + + setTimeout(function () { + _this.htmlDoms.move_block.animate({'left':'0px'}, 'fast'); + _this.htmlDoms.left_bar.animate({'width': '40px'}, 'fast'); + _this.htmlDoms.left_bar.css({'border-color': '#ddd'}); + + _this.htmlDoms.move_block.css('background-color', '#fff'); + _this.htmlDoms.icon.css('color', '#000'); + _this.htmlDoms.icon.removeClass('icon-close'); + _this.htmlDoms.icon.addClass('icon-right'); + _this.$element.find('.verify-msg:eq(0)').text('鍚戝彸婊戝姩瀹屾垚楠岃瘉'); + + }, 400); + + this.options.error(); + } + + }else { //鏅�氭粦鍔� + + if(parseInt(this.htmlDoms.move_block.css('left')) >= (parseInt(this.setSize.bar_width) - parseInt(this.options.barSize.height) - parseInt(this.options.vOffset))) { + this.htmlDoms.move_block.css('background-color', '#5cb85c'); + this.htmlDoms.left_bar.css({'color': '#4cae4c', 'border-color': '#5cb85c', 'background-color': '#fff' }); + this.htmlDoms.icon.css('color', '#fff'); + this.htmlDoms.icon.removeClass('icon-right'); + this.htmlDoms.icon.addClass('icon-check'); + this.htmlDoms.refresh.hide(); + this.htmlDoms.move_block.unbind('mousedown'); + this.htmlDoms.move_block.unbind('touchstart'); + this.$element.find('.verify-msg:eq(1)').text('楠岃瘉鎴愬姛'); + this.options.success(); + }else { + + this.htmlDoms.move_block.css('background-color', '#d9534f'); + this.htmlDoms.left_bar.css('border-color', '#d9534f'); + this.htmlDoms.icon.css('color', '#fff'); + this.htmlDoms.icon.removeClass('icon-right'); + this.htmlDoms.icon.addClass('icon-close'); + + setTimeout(function () { + _this.htmlDoms.move_block.animate({'left':'0px'}, 'fast'); + _this.htmlDoms.left_bar.animate({'width': '40px'}, 'fast'); + _this.htmlDoms.left_bar.css({'border-color': '#ddd'}); + + _this.htmlDoms.move_block.css('background-color', '#fff'); + _this.htmlDoms.icon.css('color', '#000'); + _this.htmlDoms.icon.removeClass('icon-close'); + _this.htmlDoms.icon.addClass('icon-right'); + _this.$element.find('.verify-msg:eq(0)').text('鍚戝彸婊戝姩瑙i攣'); + + }, 400); + + this.options.error(); + } + } + + this.status = false; + } + }, + + + resetSize : function(obj) { + var img_width,img_height,bar_width,bar_height; //鍥剧墖鐨勫搴︺�侀珮搴︼紝绉诲姩鏉$殑瀹藉害銆侀珮搴� + var parentWidth = obj.$element.parent().width() || $(window).width(); + var parentHeight = obj.$element.parent().height() || $(window).height(); + + if(obj.options.imgSize.width.indexOf('%')!= -1){ + img_width = parseInt(obj.options.imgSize.width)/100 * parentWidth + 'px'; + 銆�銆�}else { + img_width = obj.options.imgSize.width; + } + + if(obj.options.imgSize.height.indexOf('%')!= -1){ + img_height = parseInt(obj.options.imgSize.height)/100 * parentHeight + 'px'; + 銆�銆�}else { + img_height = obj.options.imgSize.height; + } + + if(obj.options.barSize.width.indexOf('%')!= -1){ + bar_width = parseInt(obj.options.barSize.width)/100 * parentWidth + 'px'; + 銆�銆�}else { + bar_width = obj.options.barSize.width; + } + + if(obj.options.barSize.height.indexOf('%')!= -1){ + bar_height = parseInt(obj.options.barSize.height)/100 * parentHeight + 'px'; + 銆�銆�}else { + bar_height = obj.options.barSize.height; + } + + return {img_width : img_width, img_height : img_height, bar_width : bar_width, bar_height : bar_height}; + }, + + //闅忔満鍑虹敓鐐逛綅 + randSet: function() { + var rand1 = Math.floor(Math.random()*9+1); + var rand2 = Math.floor(Math.random()*9+1); + var top = rand1 * parseInt(this.setSize.img_height)/15 + parseInt(this.setSize.img_height) * 0.1; + var left = rand2 * parseInt(this.setSize.img_width)/15 + parseInt(this.setSize.img_width) * 0.1; + + this.$element.find('.verify-img-panel').css('margin-bottom', this.options.vSpace + 'px'); + this.$element.find('.verify-gap').css({'top': top, 'left': left}); + this.$element.find('.verify-sub-block').css({'top':'-'+(parseInt(this.setSize.img_height)- top + this.options.vSpace + 2)+'px', 'background-image': 'url(images/'+this.options.imgName[this.img_rand]+')', 'background-size': this.setSize.img_width + ' '+ this.setSize.img_height,'background-position-y': '-'+top+ 'px', 'background-position-x': '-'+left+'px'}); + }, + + //鍒锋柊 + refresh: function() { + this.randSet(); + this.img_rand = Math.floor(Math.random() * this.options.imgName.length); //闅忔満鐨勮儗鏅浘鐗� + this.$element.find('.verify-img-panel').css({'background': 'url(images/'+this.options.imgName[this.img_rand]+')', 'background-size': this.setSize.img_width + ' '+ this.setSize.img_height}); + this.$element.find('.verify-sub-block').css({'background-image': 'url(images/'+this.options.imgName[this.img_rand]+')', 'background-size': this.setSize.img_width + ' '+ this.setSize.img_height}); + }, + + //鑾峰彇left鍊� + getLeft: function(node) { + var left = $(node).offset().left; +// var nowPos = node.offsetParent; +// +// while(nowPos != null) {銆�銆� +// left += $(nowPos).offset().left;銆� +// nowPos = nowPos.offsetParent;銆�銆� +// } + return left; + } + }; + + + //瀹氫箟Points鐨勬瀯閫犲嚱鏁� + var Points = function(ele, opt) { + this.$element = ele, + this.defaults = { + defaultNum : 4, //榛樿鐨勬枃瀛楁暟閲� + checkNum : 3, //鏍″鐨勬枃瀛楁暟閲� + vSpace : 5, //闂撮殧 + imgName : ['1.jpg', '2.jpg'], + imgSize : { + width: '400px', + height: '200px', + }, + barSize : { + width : '400px', + height : '40px', + }, + ready : function(){}, + success : function(){}, + error : function(){} + }, + this.options = $.extend({}, this.defaults, opt) + }; + + //瀹氫箟Points鐨勬柟娉� + Points.prototype = { + init : function() { + + var _this = this; + + //鍔犺浇椤甸潰 + _this.loadDom(); + + _this.refresh(); + _this.options.ready(); + + this.$element[0].onselectstart = document.body.ondrag = function(){ + return false; + }; + + //鐐瑰嚮浜嬩欢姣斿 + _this.$element.find('.verify-img-panel canvas').on('click', function(e) { + + _this.checkPosArr.push(_this.getMousePos(this, e)); + + if(_this.num == _this.options.checkNum) { + + _this.num = _this.createPoint(_this.getMousePos(this, e)); + setTimeout(function () { + var flag = _this.comparePos(_this.fontPos, _this.checkPosArr); + + if(flag == false) { //楠岃瘉澶辫触 + + _this.options.error(); + _this.$element.find('.verify-bar-area').css({'color': '#d9534f', 'border-color': '#d9534f'}); + _this.$element.find('.verify-msg').text('楠岃瘉澶辫触'); + + setTimeout(function () { + _this.$element.find('.verify-bar-area').css({'color': '#000','border-color': '#ddd'}); + _this.refresh(); + }, 400); + + }else { //楠岃瘉鎴愬姛 + _this.$element.find('.verify-bar-area').css({'color': '#4cae4c', 'border-color': '#5cb85c'}); + _this.$element.find('.verify-msg').text('楠岃瘉鎴愬姛'); + _this.$element.find('.verify-refresh').hide(); + _this.$element.find('.verify-img-panel').unbind('click'); + _this.options.success(); + } + }, 400); + + } + + if(_this.num < _this.options.checkNum) { + _this.num = _this.createPoint(_this.getMousePos(this, e)); + } + + }); + + //鍒锋柊 + _this.$element.find('.verify-refresh').on('click', function() { + _this.refresh(); + }); + + }, + + + + //鍔犺浇椤甸潰 + loadDom : function() { + + this.fontPos = []; //閫変腑鐨勫潗鏍囦俊鎭� + this.checkPosArr = []; //鐢ㄦ埛鐐瑰嚮鐨勫潗鏍� + this.num = 1; //鐐瑰嚮鐨勮鏁� + this.img_rand = Math.floor(Math.random() * this.options.imgName.length); //闅忔満鐨勮儗鏅浘鐗� + + var panelHtml = ''; + var tmpHtml = ''; + + this.setSize = Slide.prototype.resetSize(this); //閲嶆柊璁剧疆瀹藉害楂樺害 + + panelHtml += '<div class="verify-img-panel"><div class="verify-refresh" style="z-index:9999"><i class="iconfont icon-refresh"></i></div><canvas width="'+this.setSize.img_width+'" height="'+this.setSize.img_height+'"></canvas></div><div class="verify-bar-area"><span class="verify-msg"></span></div>'; + + this.$element.append(panelHtml); + + + this.htmlDoms = { + img_panel : this.$element.find('.verify-img-panel'), + bar_area : this.$element.find('.verify-bar-area'), + msg : this.$element.find('.verify-msg'), + }; + + this.htmlDoms.img_panel.css({'width': this.setSize.img_width, 'height': this.setSize.img_height, 'background-size' : this.setSize.img_width + ' '+ this.setSize.img_height, 'margin-bottom': this.options.vSpace + 'px'}); + this.htmlDoms.bar_area.css({'width': this.options.barSize.width, 'height': this.options.barSize.height, 'line-height':this.options.barSize.height}); + + }, + + //缁樺埗鍚堟垚鐨勫浘鐗� + drawImg : function(obj, img) { + //鍑嗗canvas鐜 + var canvas = this.$element.find('canvas')[0]; + //var canvas=document.getElementById("myCanvas"); + var ctx=canvas.getContext("2d"); + + // 缁樺埗鍥剧墖 + ctx.drawImage(img,0,0, parseInt(this.setSize.img_width), parseInt(this.setSize.img_height)); + + // 缁樺埗姘村嵃 + var fontSizeArr = ['italic small-caps bold 20px microsoft yahei', 'small-caps normal 25px arial', '34px microsoft yahei']; + var fontStr = '澶╁湴鐜勯粍瀹囧畽娲崚鏃ユ湀鐩堟槂杈板鍒楀紶瀵掓潵鏆戝線绉嬫敹鍐棌闂颁綑鎴愬瞾寰嬪悤璋冮槼浜戣吘鑷撮洦闇茬粨涓洪湝閲戠敓涓芥按鐜夊嚭鏄嗗唸鍓戝彿宸ㄩ槞鐝犵О澶滃厜鏋滅弽鏉庢煱鑿滈噸鑺ュ娴峰捀娌虫贰槌炴綔缇界繑榫欏笀鐏笣楦熷畼浜虹殗濮嬪埗鏂囧瓧涔冩湇琛h3鎺ㄤ綅璁╁浗鏈夎櫈闄跺攼鍚婃皯浼愮姜鍛ㄥ彂娈锋堡鍧愭湞闂亾鍨傛嫳骞崇珷鐖辫偛榛庨鑷d紡鎴庣緦閬愯咯浣撶巼瀹惧綊鐜�'; //涓嶉噸澶嶇殑姹夊瓧 + + + var fontChars = []; + + var avg = Math.floor(parseInt(this.setSize.img_width)/(parseInt(this.options.defaultNum)+1)); + var tmp_index = ''; + var color2Num = Math.floor(Math.random() * 5); + + for(var i = 1; i <= this.options.defaultNum; i++) { + + fontChars[i-1] = this.getChars(fontStr, fontChars); + + tmp_index = Math.floor(Math.random()*3); + ctx.font = fontSizeArr[tmp_index]; + ctx.fillStyle = _code_color2[color2Num]; + + if(Math.floor(Math.random() * 2) == 1) { + var tmp_y = Math.floor(parseInt(this.setSize.img_height)/2) + tmp_index*20 + 20; + }else { + var tmp_y = Math.floor(parseInt(this.setSize.img_height)/2) - tmp_index*20; + } + + ctx.fillText(fontChars[i-1],avg * i, tmp_y); + this.fontPos[i-1] = {'char': fontChars[i-1], 'x': avg * i, 'y': tmp_y}; + + } + + for(var i = 0; i < (this.options.defaultNum-this.options.checkNum); i++) { + this.shuffle(this.fontPos).pop(); + } + + var msgStr = ''; + for(var i = 0; i < this.fontPos.length; i++) { + msgStr += this.fontPos[i].char + ','; + } + + this.htmlDoms.msg.text('璇烽『搴忕偣鍑汇��' + msgStr.substring(0,msgStr.length-1) + '銆�'); + + return this.fontPos; + }, + + //鑾峰彇鍧愭爣 + getMousePos :function(obj, event) { + var e = event || window.event; + var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft; + var scrollY = document.documentElement.scrollTop || document.body.scrollTop; + var x = e.clientX - ($(obj).offset().left - $(window).scrollLeft()); + var y = e.clientY - ($(obj).offset().top - $(window).scrollTop()); + + return {'x': x, 'y': y}; + }, + + //閫掑綊鍘婚噸 + getChars : function(fontStr, fontChars) { + + var tmp_rand = parseInt(Math.floor(Math.random() * fontStr.length)); + if(tmp_rand > 0) { + tmp_rand = tmp_rand - 1; + } + + tmp_char = fontStr.charAt(tmp_rand); + if($.inArray(tmp_char, fontChars) == -1) { + return tmp_char; + }else { + return Points.prototype.getChars(fontStr, fontChars); + } + }, + + //娲楃墝鏁扮粍 + shuffle : function(arr) { + var m = arr.length, i; + while (m) { + i = (Math.random() * m--) >>> 0; + [arr[m], arr[i]] = [arr[i], arr[m]] + } + return arr; + }, + + //鍒涘缓鍧愭爣鐐� + createPoint : function (pos) { + this.htmlDoms.img_panel.append('<div class="point-area" style="background-color:#1abd6c;color:#fff;z-index:9999;width:30px;height:30px;text-align:center;line-height:30px;border-radius: 50%;position:absolute;top:'+parseInt(pos.y-10)+'px;left:'+parseInt(pos.x-10)+'px;">'+this.num+'</div>'); + return ++this.num; + }, + + //姣斿鍧愭爣鐐� + comparePos : function (fontPos, checkPosArr) { + + var flag = true; + for(var i = 0; i < fontPos.length; i++) { + if(!(parseInt(checkPosArr[i].x) + 40 > fontPos[i].x && parseInt(checkPosArr[i].x) - 40 < fontPos[i].x && parseInt(checkPosArr[i].y) + 40 > fontPos[i].y && parseInt(checkPosArr[i].y) - 40 < fontPos[i].y)) { + flag = false; + break; + } + } + + return flag; + }, + + //鍒锋柊 + refresh: function() { + var _this = this; + this.$element.find('.point-area').remove(); + this.fontPos = []; + this.checkPosArr = []; + this.num = 1; + + this.img_rand = Math.floor(Math.random() * this.options.imgName.length); //闅忔満鐨勮儗鏅浘鐗� + var img = new Image(); + img.src = 'images/'+this.options.imgName[this.img_rand]; + + + // 鍔犺浇瀹屾垚寮�濮嬬粯鍒� + $(img).on('load', function(e) { + this.fontPos = _this.drawImg(_this, this); + }); + + }, + + }; + + //鍦ㄦ彃浠朵腑浣跨敤codeVerify瀵硅薄 + $.fn.codeVerify = function(options, callbacks) { + var code = new Code(this, options); + code.init(); + }; + + //鍦ㄦ彃浠朵腑浣跨敤slideVerify瀵硅薄 + $.fn.slideVerify = function(options, callbacks) { + var slide = new Slide(this, options); + slide.init(); + }; + + //鍦ㄦ彃浠朵腑浣跨敤clickVerify瀵硅薄 + $.fn.pointsVerify = function(options, callbacks) { + var points = new Points(this, options); + points.init(); + }; + +})(jQuery, window, document); diff --git a/gx_tieta/WebRoot/js/verify/js/verify.min.js b/gx_tieta/WebRoot/js/verify/js/verify.min.js new file mode 100644 index 0000000..cbd9557 --- /dev/null +++ b/gx_tieta/WebRoot/js/verify/js/verify.min.js @@ -0,0 +1,2 @@ +/*! Verify-v0.1.0 MIT License by 澶х唺*/ +;(function($,window,document,undefined){var Code=function(ele,opt){this.$element=ele,this.defaults={type:1,figure:100,arith:0,width:'200px',height:'60px',fontSize:'30px',codeLength:6,btnId:'check-btn',ready:function(){},success:function(){},error:function(){}},this.options=$.extend({},this.defaults,opt)};var _code_chars=[0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];var _code_color1=['#fffff0','#f0ffff','#f0fff0','#fff0f0'];var _code_color2=['#FF0033','#006699','#993366','#FF9900','#66CC66','#FF33CC'];Code.prototype={init:function(){var _this=this;this.loadDom();this.setCode();this.options.ready();this.$element[0].onselectstart=document.body.ondrag=function(){return false};this.$element.find('.verify-code, .verify-change-code').on('click',function(){_this.setCode()});this.htmlDoms.code_btn.on('click',function(){_this.checkCode()})},loadDom:function(){var panelHtml='<div class="cerify-code-panel"><div class="verify-code"></div><div class="verify-code-area"><div class="verify-input-area"><input type="text" class="varify-input-code" /></div><div class="verify-change-area"><a class="verify-change-code">鎹竴寮�</a></div></div></div>';this.$element.append(panelHtml);this.htmlDoms={code_btn:$('#'+this.options.btnId),code:this.$element.find('.verify-code'),code_area:this.$element.find('.verify-code-area'),code_input:this.$element.find('.varify-input-code'),};this.htmlDoms.code.css({'width':this.options.width,'height':this.options.height,'line-height':this.options.height,'font-size':this.options.fontSize});this.htmlDoms.code_area.css({'width':this.options.width})},setCode:function(){var color1Num=Math.floor(Math.random()*3);var color2Num=Math.floor(Math.random()*5);this.htmlDoms.code.css({'background-color':_code_color1[color1Num],'color':_code_color2[color2Num]});this.htmlDoms.code_input.val('');var code='';this.code_chose='';if(this.options.type==1){for(var i=0;i<this.options.codeLength;i++){var charNum=Math.floor(Math.random()*52);var tmpStyle=(charNum%2==0)?"font-style:italic;margin-right: 10px;":"font-weight:bolder;";tmpStyle+=(Math.floor(Math.random()*2)==1)?"font-weight:bolder;":"";this.code_chose+=_code_chars[charNum];code+='<font style="'+tmpStyle+'">'+_code_chars[charNum]+'</font>'}}else{var num1=Math.floor(Math.random()*this.options.figure);var num2=Math.floor(Math.random()*this.options.figure);if(this.options.arith==0){var tmparith=Math.floor(Math.random()*3)}switch(tmparith){case 1:this.code_chose=parseInt(num1)+parseInt(num2);code=num1+' + '+num2+' = ?';break;case 2:if(parseInt(num1)<parseInt(num2)){var tmpnum=num1;num1=num2;num2=tmpnum}this.code_chose=parseInt(num1)-parseInt(num2);code=num1+' - '+num2+' = ?';break;default:this.code_chose=parseInt(num1)*parseInt(num2);code=num1+' 脳 '+num2+' = ?';break}}this.htmlDoms.code.html(code)},checkCode:function(){if(this.options.type==1){var own_input=this.htmlDoms.code_input.val().toUpperCase();this.code_chose=this.code_chose.toUpperCase()}else{var own_input=this.htmlDoms.code_input.val()}if(own_input==this.code_chose){this.options.success()}else{this.options.error();this.setCode()}}};var Slide=function(ele,opt){this.$element=ele,this.defaults={type:1,vOffset:5,vSpace:5,imgName:['1.jpg','2.jpg'],imgSize:{width:'400px',height:'200px',},blockSize:{width:'50px',height:'50px',},barSize:{width:'400px',height:'40px',},ready:function(){},success:function(){},error:function(){}},this.options=$.extend({},this.defaults,opt)};Slide.prototype={init:function(){var _this=this;this.loadDom();this.options.ready();this.$element[0].onselectstart=document.body.ondrag=function(){return false};this.htmlDoms.move_block.on('touchstart',function(e){_this.start(e)});this.htmlDoms.move_block.on('mousedown',function(e){_this.start(e)});window.addEventListener("touchmove",function(e){_this.move(e)});window.addEventListener("mousemove",function(e){_this.move(e)});window.addEventListener("touchend",function(){_this.end()});window.addEventListener("mouseup",function(){_this.end()});_this.$element.find('.verify-refresh').on('click',function(){_this.refresh()})},loadDom:function(){this.img_rand=Math.floor(Math.random()*this.options.imgName.length);var panelHtml='';var tmpHtml='';if(this.options.type!=1){panelHtml+='<div class="verify-img-panel"><div class="verify-refresh"><i class="iconfont icon-refresh"></i></div><div class="verify-gap"></div></div>';tmpHtml='<div class="verify-sub-block"></div>'}panelHtml+='<div class="verify-bar-area"><span class="verify-msg">鍚戝彸婊戝姩瀹屾垚楠岃瘉</span><div class="verify-left-bar"><span class="verify-msg"></span><div class="verify-move-block"><i class="verify-icon iconfont icon-right"></i>'+tmpHtml+'</div></div></div>';this.$element.append(panelHtml);this.htmlDoms={gap:this.$element.find('.verify-gap'),sub_block:this.$element.find('.verify-sub-block'),img_panel:this.$element.find('.verify-img-panel'),bar_area:this.$element.find('.verify-bar-area'),move_block:this.$element.find('.verify-move-block'),left_bar:this.$element.find('.verify-left-bar'),msg:this.$element.find('.verify-msg'),icon:this.$element.find('.verify-icon'),refresh:this.$element.find('.verify-refresh')};this.status=false;this.setSize=this.resetSize(this);this.htmlDoms.gap.css({'width':this.options.blockSize.width,'height':this.options.blockSize.height});this.htmlDoms.sub_block.css({'width':this.options.blockSize.width,'height':this.options.blockSize.height});this.htmlDoms.img_panel.css({'width':this.setSize.img_width,'height':this.setSize.img_height,'background':'url(images/'+this.options.imgName[this.img_rand]+')','background-size':this.setSize.img_width+' '+this.setSize.img_height});this.htmlDoms.bar_area.css({'width':this.setSize.bar_width,'height':this.options.barSize.height,'line-height':this.options.barSize.height});this.htmlDoms.move_block.css({'width':this.options.barSize.height,'height':this.options.barSize.height});this.htmlDoms.left_bar.css({'width':this.options.barSize.height,'height':this.options.barSize.height});this.randSet()},start:function(e){this.htmlDoms.msg.text('');this.htmlDoms.move_block.css('background-color','#337ab7');this.htmlDoms.left_bar.css('border-color','#337AB7');this.htmlDoms.icon.css('color','#fff');e.stopPropagation();this.status=true},move:function(e){if(this.status){if(!e.touches){var x=e.clientX}else{var x=e.touches[0].pageX}var bar_area_left=Slide.prototype.getLeft(this.htmlDoms.bar_area[0]);var move_block_left=x-bar_area_left;if(this.options.type!=1){if(move_block_left>=this.htmlDoms.bar_area[0].offsetWidth-parseInt(parseInt(this.options.blockSize.width)/2)-2){move_block_left=this.htmlDoms.bar_area[0].offsetWidth-parseInt(parseInt(this.options.blockSize.width)/2)-2}}else{if(move_block_left>=this.htmlDoms.bar_area[0].offsetWidth-parseInt(parseInt(this.options.barSize.height)/2)+3){this.$element.find('.verify-msg:eq(1)').text('鏉惧紑楠岃瘉');move_block_left=this.htmlDoms.bar_area[0].offsetWidth-parseInt(parseInt(this.options.barSize.height)/2)+3}else{this.$element.find('.verify-msg:eq(1)').text('')}}if(move_block_left<=0){move_block_left=parseInt(parseInt(this.options.blockSize.width)/2)}this.htmlDoms.move_block.css('left',move_block_left-parseInt(parseInt(this.options.blockSize.width)/2)+"px");this.htmlDoms.left_bar.css('width',move_block_left-parseInt(parseInt(this.options.blockSize.width)/2)+"px")}},end:function(){var _this=this;if(this.status){if(this.options.type!=1){var vOffset=parseInt(this.options.vOffset);if(parseInt(this.htmlDoms.gap.css('left'))>=(parseInt(this.htmlDoms.move_block.css('left'))-vOffset)&&parseInt(this.htmlDoms.gap.css('left'))<=(parseInt(this.htmlDoms.move_block.css('left'))+vOffset)){this.htmlDoms.move_block.css('background-color','#5cb85c');this.htmlDoms.left_bar.css({'border-color':'#5cb85c','background-color':'#fff'});this.htmlDoms.icon.css('color','#fff');this.htmlDoms.icon.removeClass('icon-right');this.htmlDoms.icon.addClass('icon-check');this.htmlDoms.refresh.hide();this.htmlDoms.move_block.unbind('mousedown touchstart');this.options.success()}else{this.htmlDoms.move_block.css('background-color','#d9534f');this.htmlDoms.left_bar.css('border-color','#d9534f');this.htmlDoms.icon.css('color','#fff');this.htmlDoms.icon.removeClass('icon-right');this.htmlDoms.icon.addClass('icon-close');setTimeout(function(){_this.htmlDoms.move_block.animate({'left':'0px'},'fast');_this.htmlDoms.left_bar.animate({'width':'40px'},'fast');_this.htmlDoms.left_bar.css({'border-color':'#ddd'});_this.htmlDoms.move_block.css('background-color','#fff');_this.htmlDoms.icon.css('color','#000');_this.htmlDoms.icon.removeClass('icon-close');_this.htmlDoms.icon.addClass('icon-right');_this.$element.find('.verify-msg:eq(0)').text('鍚戝彸婊戝姩瀹屾垚楠岃瘉')},400);this.options.error()}}else{if(parseInt(this.htmlDoms.move_block.css('left'))>=(parseInt(this.setSize.bar_width)-parseInt(this.options.barSize.height)-parseInt(this.options.vOffset))){this.htmlDoms.move_block.css('background-color','#5cb85c');this.htmlDoms.left_bar.css({'color':'#4cae4c','border-color':'#5cb85c','background-color':'#fff'});this.htmlDoms.icon.css('color','#fff');this.htmlDoms.icon.removeClass('icon-right');this.htmlDoms.icon.addClass('icon-check');this.htmlDoms.refresh.hide();this.htmlDoms.move_block.unbind('mousedown');this.htmlDoms.move_block.unbind('touchstart');this.$element.find('.verify-msg:eq(1)').text('楠岃瘉鎴愬姛');this.options.success()}else{this.htmlDoms.move_block.css('background-color','#d9534f');this.htmlDoms.left_bar.css('border-color','#d9534f');this.htmlDoms.icon.css('color','#fff');this.htmlDoms.icon.removeClass('icon-right');this.htmlDoms.icon.addClass('icon-close');setTimeout(function(){_this.htmlDoms.move_block.animate({'left':'0px'},'fast');_this.htmlDoms.left_bar.animate({'width':'40px'},'fast');_this.htmlDoms.left_bar.css({'border-color':'#ddd'});_this.htmlDoms.move_block.css('background-color','#fff');_this.htmlDoms.icon.css('color','#000');_this.htmlDoms.icon.removeClass('icon-close');_this.htmlDoms.icon.addClass('icon-right');_this.$element.find('.verify-msg:eq(0)').text('鍚戝彸婊戝姩瑙i攣')},400);this.options.error()}}this.status=false}},resetSize:function(obj){var img_width,img_height,bar_width,bar_height;var parentWidth=obj.$element.parent().width()||$(window).width();var parentHeight=obj.$element.parent().height()||$(window).height();if(obj.options.imgSize.width.indexOf('%')!=-1){img_width=parseInt(obj.options.imgSize.width)/100*parentWidth+'px'}else{img_width=obj.options.imgSize.width}if(obj.options.imgSize.height.indexOf('%')!=-1){img_height=parseInt(obj.options.imgSize.height)/100*parentHeight+'px'}else{img_height=obj.options.imgSize.height}if(obj.options.barSize.width.indexOf('%')!=-1){bar_width=parseInt(obj.options.barSize.width)/100*parentWidth+'px'}else{bar_width=obj.options.barSize.width}if(obj.options.barSize.height.indexOf('%')!=-1){bar_height=parseInt(obj.options.barSize.height)/100*parentHeight+'px'}else{bar_height=obj.options.barSize.height}return{img_width:img_width,img_height:img_height,bar_width:bar_width,bar_height:bar_height}},randSet:function(){var rand1=Math.floor(Math.random()*9+1);var rand2=Math.floor(Math.random()*9+1);var top=rand1*parseInt(this.setSize.img_height)/15+parseInt(this.setSize.img_height)*0.1;var left=rand2*parseInt(this.setSize.img_width)/15+parseInt(this.setSize.img_width)*0.1;this.$element.find('.verify-img-panel').css('margin-bottom',this.options.vSpace+'px');this.$element.find('.verify-gap').css({'top':top,'left':left});this.$element.find('.verify-sub-block').css({'top':'-'+(parseInt(this.setSize.img_height)-top+this.options.vSpace+2)+'px','background-image':'url(images/'+this.options.imgName[this.img_rand]+')','background-size':this.setSize.img_width+' '+this.setSize.img_height,'background-position-y':'-'+top+'px','background-position-x':'-'+left+'px'})},refresh:function(){this.randSet();this.img_rand=Math.floor(Math.random()*this.options.imgName.length);this.$element.find('.verify-img-panel').css({'background':'url(images/'+this.options.imgName[this.img_rand]+')','background-size':this.setSize.img_width+' '+this.setSize.img_height});this.$element.find('.verify-sub-block').css({'background-image':'url(images/'+this.options.imgName[this.img_rand]+')','background-size':this.setSize.img_width+' '+this.setSize.img_height})},getLeft:function(node){var left=$(node).offset().left;return left}};var Points=function(ele,opt){this.$element=ele,this.defaults={defaultNum:4,checkNum:3,vSpace:5,imgName:['1.jpg','2.jpg'],imgSize:{width:'400px',height:'200px',},barSize:{width:'400px',height:'40px',},ready:function(){},success:function(){},error:function(){}},this.options=$.extend({},this.defaults,opt)};Points.prototype={init:function(){var _this=this;_this.loadDom();_this.refresh();_this.options.ready();this.$element[0].onselectstart=document.body.ondrag=function(){return false};_this.$element.find('.verify-img-panel canvas').on('click',function(e){_this.checkPosArr.push(_this.getMousePos(this,e));if(_this.num==_this.options.checkNum){_this.num=_this.createPoint(_this.getMousePos(this,e));setTimeout(function(){var flag=_this.comparePos(_this.fontPos,_this.checkPosArr);if(flag==false){_this.options.error();_this.$element.find('.verify-bar-area').css({'color':'#d9534f','border-color':'#d9534f'});_this.$element.find('.verify-msg').text('楠岃瘉澶辫触');setTimeout(function(){_this.$element.find('.verify-bar-area').css({'color':'#000','border-color':'#ddd'});_this.refresh()},400)}else{_this.$element.find('.verify-bar-area').css({'color':'#4cae4c','border-color':'#5cb85c'});_this.$element.find('.verify-msg').text('楠岃瘉鎴愬姛');_this.$element.find('.verify-refresh').hide();_this.$element.find('.verify-img-panel').unbind('click');_this.options.success()}},400)}if(_this.num<_this.options.checkNum){_this.num=_this.createPoint(_this.getMousePos(this,e))}});_this.$element.find('.verify-refresh').on('click',function(){_this.refresh()})},loadDom:function(){this.fontPos=[];this.checkPosArr=[];this.num=1;this.img_rand=Math.floor(Math.random()*this.options.imgName.length);var panelHtml='';var tmpHtml='';this.setSize=Slide.prototype.resetSize(this);panelHtml+='<div class="verify-img-panel"><div class="verify-refresh" style="z-index:9999"><i class="iconfont icon-refresh"></i></div><canvas width="'+this.setSize.img_width+'" height="'+this.setSize.img_height+'"></canvas></div><div class="verify-bar-area"><span class="verify-msg"></span></div>';this.$element.append(panelHtml);this.htmlDoms={img_panel:this.$element.find('.verify-img-panel'),bar_area:this.$element.find('.verify-bar-area'),msg:this.$element.find('.verify-msg'),};this.htmlDoms.img_panel.css({'width':this.setSize.img_width,'height':this.setSize.img_height,'background-size':this.setSize.img_width+' '+this.setSize.img_height,'margin-bottom':this.options.vSpace+'px'});this.htmlDoms.bar_area.css({'width':this.options.barSize.width,'height':this.options.barSize.height,'line-height':this.options.barSize.height})},drawImg:function(obj,img){var canvas=this.$element.find('canvas')[0];var ctx=canvas.getContext("2d");ctx.drawImage(img,0,0,parseInt(this.setSize.img_width),parseInt(this.setSize.img_height));var fontSizeArr=['italic small-caps bold 20px microsoft yahei','small-caps normal 25px arial','34px microsoft yahei'];var fontStr='澶╁湴鐜勯粍瀹囧畽娲崚鏃ユ湀鐩堟槂杈板鍒楀紶瀵掓潵鏆戝線绉嬫敹鍐棌闂颁綑鎴愬瞾寰嬪悤璋冮槼浜戣吘鑷撮洦闇茬粨涓洪湝閲戠敓涓芥按鐜夊嚭鏄嗗唸鍓戝彿宸ㄩ槞鐝犵О澶滃厜鏋滅弽鏉庢煱鑿滈噸鑺ュ娴峰捀娌虫贰槌炴綔缇界繑榫欏笀鐏笣楦熷畼浜虹殗濮嬪埗鏂囧瓧涔冩湇琛h3鎺ㄤ綅璁╁浗鏈夎櫈闄跺攼鍚婃皯浼愮姜鍛ㄥ彂娈锋堡鍧愭湞闂亾鍨傛嫳骞崇珷鐖辫偛榛庨鑷d紡鎴庣緦閬愯咯浣撶巼瀹惧綊鐜�';var fontChars=[];var avg=Math.floor(parseInt(this.setSize.img_width)/(parseInt(this.options.defaultNum)+1));var tmp_index='';var color2Num=Math.floor(Math.random()*5);for(var i=1;i<=this.options.defaultNum;i++){fontChars[i-1]=this.getChars(fontStr,fontChars);tmp_index=Math.floor(Math.random()*3);ctx.font=fontSizeArr[tmp_index];ctx.fillStyle=_code_color2[color2Num];if(Math.floor(Math.random()*2)==1){var tmp_y=Math.floor(parseInt(this.setSize.img_height)/2)+tmp_index*20+20}else{var tmp_y=Math.floor(parseInt(this.setSize.img_height)/2)-tmp_index*20}ctx.fillText(fontChars[i-1],avg*i,tmp_y);this.fontPos[i-1]={'char':fontChars[i-1],'x':avg*i,'y':tmp_y}}for(var i=0;i<(this.options.defaultNum-this.options.checkNum);i++){this.shuffle(this.fontPos).pop()}var msgStr='';for(var i=0;i<this.fontPos.length;i++){msgStr+=this.fontPos[i].char+','}this.htmlDoms.msg.text('璇烽『搴忕偣鍑汇��'+msgStr.substring(0,msgStr.length-1)+'銆�');return this.fontPos},getMousePos:function(obj,event){var e=event||window.event;var scrollX=document.documentElement.scrollLeft||document.body.scrollLeft;var scrollY=document.documentElement.scrollTop||document.body.scrollTop;var x=e.clientX-($(obj).offset().left-$(window).scrollLeft());var y=e.clientY-($(obj).offset().top-$(window).scrollTop());return{'x':x,'y':y}},getChars:function(fontStr,fontChars){var tmp_rand=parseInt(Math.floor(Math.random()*fontStr.length));if(tmp_rand>0){tmp_rand=tmp_rand-1}tmp_char=fontStr.charAt(tmp_rand);if($.inArray(tmp_char,fontChars)==-1){return tmp_char}else{return Points.prototype.getChars(fontStr,fontChars)}},shuffle:function(arr){var m=arr.length,i;while(m){i=(Math.random()*m--)>>>0;[arr[m],arr[i]]=[arr[i],arr[m]]}return arr},createPoint:function(pos){this.htmlDoms.img_panel.append('<div class="point-area" style="background-color:#1abd6c;color:#fff;z-index:9999;width:30px;height:30px;text-align:center;line-height:30px;border-radius: 50%;position:absolute;top:'+parseInt(pos.y-10)+'px;left:'+parseInt(pos.x-10)+'px;">'+this.num+'</div>');return++this.num},comparePos:function(fontPos,checkPosArr){var flag=true;for(var i=0;i<fontPos.length;i++){if(!(parseInt(checkPosArr[i].x)+40>fontPos[i].x&&parseInt(checkPosArr[i].x)-40<fontPos[i].x&&parseInt(checkPosArr[i].y)+40>fontPos[i].y&&parseInt(checkPosArr[i].y)-40<fontPos[i].y)){flag=false;break}}return flag},refresh:function(){var _this=this;this.$element.find('.point-area').remove();this.fontPos=[];this.checkPosArr=[];this.num=1;this.img_rand=Math.floor(Math.random()*this.options.imgName.length);var img=new Image();img.src='images/'+this.options.imgName[this.img_rand];$(img).on('load',function(e){this.fontPos=_this.drawImg(_this,this)})},};$.fn.codeVerify=function(options,callbacks){var code=new Code(this,options);code.init()};$.fn.slideVerify=function(options,callbacks){var slide=new Slide(this,options);slide.init()};$.fn.pointsVerify=function(options,callbacks){var points=new Points(this,options);points.init()}})(jQuery,window,document); diff --git a/gx_tieta/WebRoot/login.jsp b/gx_tieta/WebRoot/login.jsp index 3b9c2f1..71f49f7 100644 --- a/gx_tieta/WebRoot/login.jsp +++ b/gx_tieta/WebRoot/login.jsp @@ -46,6 +46,7 @@ <link rel="stylesheet" href="jqueryui/jquery-ui.css"> <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome-animation.min.css"> + <link rel="stylesheet" type="text/css" href="js/verify/css/verify.css"> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="jqueryui/jquery-ui.js"></script> <script type="text/javascript" src="js/qrcode.js"></script> @@ -98,8 +99,20 @@ <img src="image/loading-open.gif" alt=""> </div> </div> + <!-- 楠岃瘉鐮佺櫥闄嗛潰鏉� --> + <div class="hdw-dialog hdw-dialog-hide" id="lVerify-dialog"> + <div class="hdw-dialog-container"> + <div class="hdw-dialog-bg"></div> + <div class="hdw-dialog-content hdw-dialog-width500-300"> + <div class="hdw-dialog-content-container"> + <div id="lVerify" ></div> + </div> + </div> + </div> + </div> </div> <script type="text/javascript" src="js/nocontent.js"></script> + <script type="text/javascript" src="js/verify/js/verify.min.js"></script> <script type="text/javascript"> var entername="<s:text name='Enter_username'/>"; var enterpass="<s:text name='Enter_password'/>"; @@ -124,7 +137,73 @@ }, 1200); initDBpool(); + + // 閰嶇疆鎷栧姩楠岃瘉鍥惧儚 + $('#lVerify').slideVerify({ + type : 2, //绫诲瀷 + vOffset : 5, //璇樊閲忥紝鏍规嵁闇�姹傝嚜琛岃皟鏁� + vSpace : 5, //闂撮殧 + imgName : ['1.jpg', '2.jpg'], + imgSize : { + width: '498px', + height: '250px', + }, + blockSize : { + width: '40px', + height: '40px', + }, + barSize : { + width : '498px', + height : '40px', + }, + ready : function() { + + }, + success : function() { + $('#lVerify-dialog').addClass('hdw-dialog-hide'); // 闅愯棌楠岃瘉 + checkuser(); // 楠岃瘉鐢ㄦ埛 + }, + error : function() { + // alert('楠岃瘉澶辫触锛�'); + } + }); }); + + // 鍒濆鍖杤erify鎷栧姩楠岃瘉 + function initVerify() { + // 娓呯┖鍐呭 + $('#lVerify').text(''); + // 閰嶇疆鎷栧姩楠岃瘉鍥惧儚 + $('#lVerify').slideVerify({ + type : 2, //绫诲瀷 + vOffset : 5, //璇樊閲忥紝鏍规嵁闇�姹傝嚜琛岃皟鏁� + vSpace : 5, //闂撮殧 + imgName : ['1.jpg', '2.jpg'], + imgSize : { + width: '498px', + height: '250px', + }, + blockSize : { + width: '40px', + height: '40px', + }, + barSize : { + width : '498px', + height : '40px', + }, + ready : function() { + + }, + success : function() { + $('#lVerify-dialog').addClass('hdw-dialog-hide'); // 闅愯棌楠岃瘉 + checkuser(); // 楠岃瘉鐢ㄦ埛 + }, + error : function() { + // alert('楠岃瘉澶辫触锛�'); + } + }); + } + //鍒濆鍖栬繛鎺ユ睜 function initDBpool(){ @@ -167,7 +246,8 @@ $('#sub').children('.faa-spin').css('visibility', 'hidden'); $('#sub').removeClass('page-loading'); } else { - checkuser(); + $('#lVerify-dialog').removeClass('hdw-dialog-hide'); // 鏄剧ず鎷栧姩楠岃瘉鏁版嵁 + initVerify(); } } @@ -191,7 +271,7 @@ $('#sub').children('.faa-spin').css('visibility', 'hidden'); $('#sub').removeClass('page-loading'); } else { - window.location.href = data.msg; + setNavSession(data.msg); } }).error(function(){ noContent.showNoContent("鐧诲綍澶辫触璇锋鏌ョ綉缁滆繛鎺�!"); @@ -237,18 +317,36 @@ } }); - checkNavSession(); + // 璁剧疆瀵艰埅鏁版嵁 + function setNavSession(link) { + $.ajax({ + url:'CustompageAction!searchAll', + data: null, + asnyc: true, + dataType: 'json', + success:function(res) { + console.log(res); + var rs = JSON.parse(res.result); + if(rs.code == 1) { + window.location.href = link; + }else { + + } + + } + }); + } + + //checkNavSession(); // 鐩戞祴瀵艰埅鏁版嵁鐨剆ession - function checkNavSession() { + function checkNavSession(link) { $.ajax({ url:'LoginAction!getSessionByString', data: 'json=custompages_json', asnyc: true, success:function(rs) { - if(rs.result == "") { - location.reload(); - } - setTimeout(checkNavSession, 1500); + console.log(rs); + //window.location.href = link; } }); } -- Gitblit v1.9.1