عند نقل فأر المستخدم ، يكون هناك إطار من موسيقى البوب. هذا بسيط عند التعامل مع عناصر HTML ، ولكن إذا تمت معالجتها بواسطة الرسومات التي تتكون من قماشية HTML5 ، فإن هذه الطريقة لم تعد قابلة للتطبيق ، لأن القماش يستخدم مجموعة أخرى من الآليات. واحد عموما. الرسومات نفسها هي في الواقع جزء من القماش. ومع ذلك ، في HT للويب ، من السهل إدراك هذا الطلب ، والمشهد كما يلي:
يعتمد هذا المشهد على ملف JSON من أجل الويب موسع ، ومن السهل تخصيص مقابلة محرر الطوبولوجيا الذي يلبي احتياجاتي. ليس ذلك فحسب ، في هذا العرض التوضيحي ، فإن الرسم البياني المتجه للأنواع الثلاثة من إطارات القنابل "Tips1.json" ، "Tips2.json" ، "TIPS3.JSON" هي من خلال محرر المتجه هذا (http: //www.hightopo. com. com. com. /demo/vector-editor/index.html) يتم رسمه ببساطة ، وهو سهل الاستخدام. في السيناريو أعلاه ، عندما ينقل المستخدم الماوس إلى العشب والكائنات الأخرى ، ستكون هناك معلومات مفصلة عن مربع البوب لعرضه.
التنفيذ المحدد هو كما يلي:
تحضيرقدم ht لدينا (http://www.hightopo.com/) :):
<script src = 'ht.js'> </script> datamodel = new ht.datamodel () ؛
يوفر HT نموذج المتجه المخصص بتنسيق JSON. هنا ، قم بتسجيل صندوق JSON Pop -up الثلاثة على صور للمكالمات اللاحقة:
ht.default.setImage ('tips1' ، 'sypers /tips1.json') ؛ثم احصل على كائن ذو تأثيرات تفاعلية ، أسماء السمات للكائنات هي اسم التسمية المحدد لكل صورة:
// tree var time = {'time1': true ، 'tree2': true ، 'tree3': true} ؛ } ؛ صندوق البوبفي الواقع ، فإن جوهر مربع البوب هو عقدة.
1. التحكم في المخفي وعرض العقدة يمكن أن يحقق تأثير إطار القنبلة ؛
2. ويرافق تغيير موضع الماوس بتغيير موضع العقدة ؛
3. عندما يتم نقل الماوس إلى كائنات مختلفة ، يتغير الملمس على العقدة أيضًا ؛
4. تتغير قيمة السمة في العقدة أيضًا مع موضع الماوس.
لذلك ، لتحقيق الإطار الرصاصي ، قم أولاً بإنشاء عقدة جديدة وضبط المستوى على "أعلى".
ht.default.xhrload ('meadow.json' ، function (text) {const json = ht.default.parse (text) ؛ if (json.tital) document.title = json.title ؛ deserialize (json) ؛ // // قم بتعيين Datamodel.each (Data) {data.setLayer ('lower') ؛}) ؛ ؛بعد ذلك ، للاستماع إلى حادثة Mousemove في الطبقة السفلية ، تحكم على ما إذا كان موضع الماوس أعلى الكائنات الثلاثة ، واستدعاء وظيفة التصميم () إلى إعادة الترتيب العقدة وفقًا لنوع الكائن:
GraphView.getView (). (! hoverdata) العودة ؛ TIPS2 ') ؛} آخر if (mountain [holddata.gettg ()]) {layout (node ، pos ،' tips3 ') ؛}}) ؛}) ؛ما يتم تنفيذ وظيفة التصميم () بالتفصيل. يحتوي محتوى FUNC على عدة أنواع:
1. نوع الوظيفة ، استدعاء الوظيفة ، وتمرير الكائنات ذات الصلة وعرض الكائنات.
2. نوع السلسلة:
بدءًا من sty@*** ، يتم إرجاع قيمة data.getStyle (***) ، وهي اسم السمة للنمط.
في بداية attr@*** ، يتم إرجاع قيمة data.getattr (***) ، حيث تمثل *** اسم السمة من ATTR.
في بداية الحقل@*** ، يتم إرجاع القيمة.
إذا لم تتم مطابقة المواقف المذكورة أعلاه ، فسيتم تسمى نوع السلسلة مباشرة *** (عرض) كاسم وظيفة كائن البيانات ، ويتم استخدام قيمة الإرجاع كقيمة المعلمة.
بالإضافة إلى سمة FUNC ، يمكنك أيضًا تعيين سمة القيمة كقيمة افتراضية. HT لدليل ربط بيانات الويب (http://www.hightopo.pom/guide/guide/core/datamodel/htamodel-guide.html). على سبيل المثال ، هنا ، فإن نتائج ربط البيانات لقيمة ضوء الشمس في ملف "TIPS1.JSON" هي كما يلي:
النص: {func: attr@sunshine ، القيمة: قيمة الشمس} ،ضع الكود المصدري لدالة التصميم ():
تخطيط الوظائف (العقدة ، pos ، type) {node.s ('2d.visible' ، true) ؛ getWidth ()/2 ، pos.y -node.getheigh ()/2) ؛ : 'Rain Dew Value:'+ (pos.y/1000) .Tofixed (2) ، 'love': ': قيمة الحب: ***') ؛ .setposition (pos.x ، pos.y -node.getheight ()/2) ؛ x // 100)+'٪'}) ؛} آخر إذا (type == 'tips3') {node.setposition (pos.x -node.getWidth ()/2 ، pos.y -node.getheigh ()/ 2) ؛ السحابة المحمولأخيرًا ، يتميز العرض التجريبي أيضًا بتأثير الرسوم المتحركة السحابية. يوفر HT من قبل HT وظيفة الرسوم المتحركة من ht.default.startanim ، ht.default.startanim يدعم طريقتين: على أساس الإطار:
يتحكم مستخدمو الطريقة المستندة إلى الإطار في تأثير الرسوم المتحركة من خلال تحديد عدد إطارات الرسوم المتحركة للإطارات ، ومعلمة الفاصل الزمني لإطار الرسوم المتحركة الفاصل ؛
يحتاج مستخدمو الأسلوب القائم على الوقت فقط إلى تحديد ميلي ثانية من دورة الرسوم المتحركة في المدة.
لمزيد من التفاصيل ، راجع HT للحصول على الويب.
هنا نستخدم الطريقة القائمة على الوقت.
var cloud = datamodel.getDatabytag ('cloud') ؛ .getPosition (). End == Round1)؟ * v ، py) ؛}} ؛أخيرًا ، ضع العرض التوضيحي الخاص بنا مرة أخرى للرجوع إليه.