최근 프로젝트에는 모바일 단말기의 수기 서명에 대한 기능 요구 사항이 포함되어 있습니다. 구현 코드는 친구들이 참조할 수 있도록 여기에 기록됩니다~
HTML 코드:
<!--필기 영역--> <div class=mSign_signMark_box> <div class=mSign_signMark_write_box> <div id=mSign_signMark_signature_pad class=mSign_signMark_body_box> <div class=mSign_signMark_body> <span class=mSign_signMark_clear_out> <img src=../images/mCommon_basicIcon_deleteRed.png> </span> <p>필기 영역</p> <canvas id=mSign_signMark_canvas></canvas> </div> </div> </div> </div> <!--필기 영역 끝--> <!--하단 버튼--> <div class=mSign_signMark_footer> <span id=mSign_signMark_clear_out class=mSign_signMark_footer_cancle>지우기</span> <span id=mSign_signMark_submit class=mSign_signMark_footer_sure>확인</span> </div> <!--하단 버튼 끝-->
CSS 스타일:
.mSign_signMark_box{패딩: 15px 15px 26px 15px;}.mSign_signMark_footer{max-width:640px;margin:0 자동;높이: 44px;배경: #4ba7eb;위치: 고정;하단: 0;왼쪽: 0;오른쪽: 0; 색상:#fff;글꼴 크기: 16px;텍스트 정렬: 중앙;줄 높이: 44px;}.mSign_signMark_footer 범위{디스플레이: 블록;너비: 50%;텍스트 정렬: 중앙;플로트: 왼쪽;}.mSign_signMark_footer_cancle{배경: #f4f4f5;색상: #333333;}/*자필 서명*/.mSign_signMark_write_box{위치: 상대;높이: 240px;}.mSign_signMark_body_box {위치: 절대;배경 색상: #fff;경계: 1px 단색 #ccc;상단:0;왼쪽: 0 ;오른쪽: 0;아래: 0;너비: 99%;높이: 자동;최소 너비: 250px;최소 높이: 140px;}.mSign_signMark_body {위치: 절대;왼쪽: 0;오른쪽: 0;상단: 0;하단: 0;}.mSign_signMark_body 캔버스 {위치: 절대;왼쪽: 0 ;상단: 0;너비: 100%;높이: 100%;}.mSign_signMark_body p{위치: 절대;글꼴 크기: 14px;색상: #ccc;텍스트 정렬: 센터;너비: 100%;상단: 50%;여백 상단: -22px;}.mSign_signMark_clear_out{위치: 절대;상단: -10px;오른쪽: -5px;z-색인: 10;디스플레이: 없음;}.mSign_signMark_clear_out img{너비: 18px;높이: 18px;}이 페이지에서는 JS를 소개합니다.
//필기 영역 터치 이벤트 $(function() { var ctouch=$('.mSign_signMark_body canvas'); ctouch.bind(touchstart,function(event){ $('.mSign_signMark_body p').hide(); }) ; ctouch.mouseover(function(event) { $('.mSign_signMark_body p').hide(); });});자필 서명 소개 js 파일 주소: qianmian-js.rar
효과는 다음과 같습니다.
위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.