โค้ดตัวอย่างสำหรับการนำเอฟเฟกต์ลายเซ็นที่เขียนด้วยลายมือไปใช้บนผืนผ้าใบ

โปรเจ็กต์ล่าสุดเกี่ยวข้องกับข้อกำหนดด้านการทำงานสำหรับลายเซ็นที่เขียนด้วยลายมือบนเทอร์มินัลมือถือ โค้ดการใช้งานจะถูกบันทึกไว้ที่นี่เพื่อเป็นข้อมูลอ้างอิงแก่เพื่อนของคุณ~

รหัส 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{padding: 15px 15px 26px 15px;}.mSign_signMark_footer{max-width:640px;margin:0 auto;height: 44px;พื้นหลัง: #4ba7eb;ตำแหน่ง: คงที่;ด้านล่าง: 0;ซ้าย: 0;ขวา: 0; สี:#fff;ขนาดตัวอักษร: 16px;text-align: center;line-height: 44px;}.mSign_signMark_footer span{display: block;width: 50%;text-align: center;float: left;}.mSign_signMark_footer_cancle{พื้นหลัง: #f4f4f5;สี: #333333;}/*ลายเซ็นที่เขียนด้วยลายมือ*/.mSign_signMark_write_box{ตำแหน่ง: สัมพันธ์;ความสูง: 240px;}.mSign_signMark_body_box {ตำแหน่ง: สัมบูรณ์;สีพื้นหลัง: #fff;เส้นขอบ: 1px ทึบ #ccc;ด้านบน:0;ซ้าย: 0 ;ขวา: 0;ด้านล่าง: 0;ความกว้าง: 99%;ความสูง: auto;min-width: 250px;min-height: 140px;}.mSign_signMark_body {ตำแหน่ง: สัมบูรณ์;ซ้าย: 0;ขวา: 0;ด้านบน: 0;ด้านล่าง: 0;}.mSign_signMark_body canvas {ตำแหน่ง: สัมบูรณ์;ซ้าย: 0 ;ด้านบน: 0;ความกว้าง: 100%;ความสูง: 100%;}.mSign_signMark_body p{ตำแหน่ง: สัมบูรณ์;ขนาดตัวอักษร: 14px;สี: #ccc;text-align: center;width: 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(ฟังก์ชั่น(เหตุการณ์) { $('.mSign_signMark_body p').hide(); });});

ที่อยู่ไฟล์ js แนะนำลายเซ็นที่เขียนด้วยลายมือ: qianmian-js.rar

เอฟเฟกต์มีดังนี้:

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network