Sebuah proyek baru-baru ini melibatkan persyaratan fungsional untuk tanda tangan tulisan tangan di terminal seluler. Kode implementasi akan dicatat di sini untuk referensi teman Anda~
Kode HTML:
<!--Area tulisan tangan--> <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>Area tulisan tangan</p> <canvas id=mSign_signMark_canvas></canvas> </div> </div> </div> </div> <!--Akhir area tulisan tangan--> <!--Tombol bawah--> <div class=mSign_signMark_footer> <span id=mSign_signMark_clear_out class=mSign_signMark_footer_cancle>Hapus</span> <span id=mSign_signMark_submit class=mSign_signMark_footer_sure>OK</span> </div> <!--Tombol bawah berakhir-->
Gaya CSS:
.mSign_signMark_box{padding: 15px 15px 26px 15px;}.mSign_signMark_footer{max-width:640px;margin:0 auto;height: 44px;background: #4ba7eb;position: fixed;bottom: 0;left: 0;right: 0; warna:#fff;ukuran font: 16px;text-align: center;line-height: 44px;}.mSign_signMark_footer span{display: block;width: 50%;text-align: center;float: left;}.mSign_signMark_footer_cancle{background: #f4f4f5;color: #333333;}/*Tanda tangan tulisan tangan*/.mSign_signMark_write_box{position: relative;height: 240px;}.mSign_signMark_body_box {position: absolute;background-color: #fff;border: 1px solid #ccc;top:0;left: 0 ;kanan: 0;bawah: 0;lebar: 99%;tinggi: auto;min-width: 250px;min-height: 140px;}.mSign_signMark_body {posisi: absolut;kiri: 0;kanan: 0;atas: 0;bawah: 0;}.mSign_signMark_body kanvas {posisi: absolut;kiri: 0 ;atas: 0;lebar: 100%;tinggi: 100%;}.mSign_signMark_body p{posisi: absolut;ukuran font: 14px;warna: #ccc;perataan teks: tengah;lebar: 100%;atas: 50%;margin-atas: -22px;}.mSign_signMark_clear_out{posisi: absolut;atas: -10px;kanan: -5px;z-index: 10;tampilan: tidak ada;}.mSign_signMark_clear_out img{lebar: 18 piksel; tinggi: 18 piksel;}Halaman ini memperkenalkan JS:
//Acara sentuh area tulisan tangan $(function() { var ctouch=$('.mSign_signMark_body canvas'); ctouch.bind(touchstart,function(event){ $('.mSign_signMark_body p').hide(); }) ; ctouch.mouseover(fungsi(acara) { $('.mSign_signMark_body p').hide(); });});Alamat file js pengenalan tanda tangan tulisan tangan: qianmian-js.rar
Efeknya adalah sebagai berikut:
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.