نموذج التعليمات البرمجية لتنفيذ تأثير التوقيع المكتوب بخط اليد على القماش

يتضمن مشروع حديث المتطلبات الوظيفية للتوقيعات المكتوبة بخط اليد على المحطات المتنقلة، وسيتم تسجيل رمز التنفيذ هنا كمرجع لأصدقائك ~

كود 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;background: #4ba7eb;position: ثابت;أسفل: 0;يسار: 0;يمين: 0; اللون:#fff;حجم الخط: 16px;محاذاة النص: المركز;ارتفاع الخط: 44px;}.mSign_signMark_footerspan{display: block;width: 50%;text-align: center;float: left;}.mSign_signMark_footer_cancle{background: #f4f4f5;color: #333333;}/*التوقيع المكتوب بخط اليد*/.mSign_signMark_write_box{position: نسبي;الارتفاع: 240px;}.mSign_signMark_body_box {position:Absolute;background-color: #fff;border: 1px Solid #ccc;top:0;left: 0 ;اليمين: 0;الأسفل: 0;العرض: 99%;الارتفاع: تلقائي؛ الحد الأدنى للعرض: 250 بكسل؛ الحد الأدنى للارتفاع: 140 بكسل؛}.mSign_signMark_body {الموضع: مطلق؛ يسار: 0؛ يمين: 0؛ أعلى: 0؛ أسفل: 0؛}.mSign_signMark_body قماش {الموضع: مطلق؛ يسار: 0 ;الأعلى: 0;العرض: 100%;الارتفاع: 100%;}.mSign_signMark_body p {الموضع: مطلق؛ حجم الخط: 14 بكسل؛ اللون: #ccc؛ محاذاة النص: المركز؛ العرض: 100٪؛ الأعلى: 50٪؛ الهامش العلوي: -22 بكسل؛}.mSign_signMark_clear_out{الموضع: مطلق؛ الأعلى: -10 بكسل؛ يمين: -5 بكسل؛ فهرس z: 10؛ العرض: لا شيء؛}.mSign_signMark_clear_out إمج {العرض: 18 بكسل؛ الارتفاع: 18 بكسل؛}

تقدم الصفحة 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.