Home Web Front-end H5 Tutorial Share an example of the effect of pop-up box in HTML5

Share an example of the effect of pop-up box in HTML5

May 10, 2018 pm 02:57 PM
html5

This article mainly introduces the pop-up box effect based on HTML5 Canvas. Friends who need it can refer to it

When the user moves the mouse, a pop-up box appears. Such a requirement is very common. This is simple when processing HTML elements, but if you are processing graphics composed of HTML5 Canvas, this method is no longer applicable, because Canvas uses another set of mechanisms. No matter how many graphics are drawn on Canvas, Canvas is the same overall. The graphics themselves are actually part of the Canvas and cannot be obtained separately, so it is impossible to directly add JavaScript events to a graphics. However, in HT for Web, this requirement is easily realized. The scenario is as follows:

This scene graph is based on the JSON file of HT for Web. You may have some questions about how to generate it. There is confusion about such a JSON file. In fact, this is based on the "HTML5 topology editor" (www.hightopo.com/demo/2deditor_20151010/HT-2D-Editor.html), which is small and complete. It is very easy to expand. Just customize the topology editor to meet my needs. Not only that, in this Demo, the vector images 'tips1.json', 'tips2.json', and 'tips3.json' of the three types of bullet boxes defined are through this vector editor (http://www.hightopo. com/demo/vector-editor/index.html), I drew it briefly and it is quite easy to use. In the above scenario, when the user moves the mouse into an object such as grass, a pop-up box will display its detailed information. Demo address: http://www.hightopo.com/demo/blog_meadow_20170605/index.html

The specific implementation is as follows:

Preparation work

Introduction to our HT (www.hightopo.com/):

<script src=&#39;ht.js&#39;></script>
dataModel = new ht.DataModel();
graphView = new ht.graph.GraphView(dataModel);
graphView.addToDOM();
Copy after login

HT provides a custom JSON format vector description form. The JSON vector format defined in the HT standard can also be registered and used as an image. HT's vector method saves space more than traditional formats and does not cause distortion when scaling. Click HT for Web for details. Here, three shapes of JSON pop-up boxes are registered as images for subsequent calls:

ht.Default.setImage(&#39;tips1&#39;, &#39;symbols/tips1.json&#39;);
ht.Default.setImage(&#39;tips2&#39;, &#39;symbols/tips2.json&#39;);
ht.Default.setImage(&#39;tips3&#39;, &#39;symbols/tips3.json&#39;);
Copy after login

Then obtain objects with interactive effects, where the attribute names in each object are the label names set for each primitive:

//树
var tree = {
     &#39;tree1&#39; : true,
     &#39;tree2&#39; : true,
     &#39;tree3&#39; : true
};
//草地
var grass = {
     &#39;grass1&#39; : true,
     &#39;grass2&#39; : true,
     &#39;grass3&#39; : true
 };
//山
var mountain = {
    &#39;mountain&#39;: true
};
Copy after login

Pop-up box

In fact, the essence of the pop-up box is a Node. When the user moves the mouse in and out,

1. Control the Node The hiding and displaying can achieve the effect of a pop-up box;

2. The change of the mouse position is accompanied by the change of the Node position;

3. When the mouse moves to different objects, the Node The texture also changes accordingly;

4. The attribute values ​​in Node also change with the mouse position.

Therefore, to implement the pop-up box, you should first create a new Node and set its level to 'higher'. Before that, you need to deserialize the JSON file of the scene graph and deserialize it. The graphics elements are all set to the level 'lower' to prevent them from being blocked by existing graphics elements:

ht.Default.xhrLoad(&#39;meadow.json&#39;, function(text) {
    const json = ht.Default.parse(text);                   
    if(json.title) document.title = json.title;
    dataModel.deserialize(json);
    //设置层级
    dataModel.each(function(data){
        data.setLayer(&#39;lower&#39;);
    });
    //新建node
    var node = new ht.Node();                   
    node.s(&#39;2d.visible&#39;,false);
    node.setLayer(&#39;higher&#39;);
    dataModel.add(node);
})
Copy after login

Then, monitor the mousemove event on the underlying p to determine whether the mouse position is above the above three objects. According to the object type, call the layout() function to re-layout the Node:

graphView.getView().addEventListener(&#39;mousemove&#39;, function(e) {
     node.s(&#39;2d.visible&#39;,false);
     var hoverData = graphView.getDataAt(e);
     pos = graphView.getLogicalPoint(e);
     if(!hoverData) return;
     if(tree[hoverData.getTag()]){
        layout(node, pos, &#39;tips1&#39;);
     } else if (grass[hoverData.getTag()]) {
        layout(node, pos, &#39;tips2&#39;);
     } else if (mountain[hoverData.getTag()]) {
        layout(node, pos, &#39;tips3&#39;);
     }
});
Copy after login

What the layout() function does has been explained in detail before. Among them, the update of the attribute value in the pop-up box is to update the JSON file The text attribute is used for data binding. The binding format is very simple. Just replace the previous parameter value with an object with the func attribute. The content of func has the following types:

1 , function type, call the function directly and pass in the relevant Data and view objects. The parameter value is determined by the function return value, that is, func(data, view); call.

2. String type:

style@*** starts with, the data.getStyle(***) value is returned, where *** represents the attribute name of style.

ATTR@*** Starting at the beginning, the data.getattr (***) value is returned, where *** represents the attribute name of ATTR.

Field@*** Starting at the beginning, the data. *** value is returned, where *** represents the attribute name of ATTR.

If the above conditions are not matched, directly use the string type as the function name of the data object to call data***(view), and the return value will be used as the parameter value.

In addition to the func attribute, you can also set the value attribute as the default value. If the value obtained by the corresponding func is undefined or null, the default value defined by the value attribute will be used. For details, see HT for Web Data Binding Specification manual (http://www.hightopo.com/guide/guide/core/datamodel/ht-datamodel-guide.html). For example, here, the result of data binding the sunshine value in the 'tips1.json' file is as follows:

"text": {
        "func": "attr@sunshine",
        "value": "阳光值"
      },
Copy after login

The source code of the layout() function is pasted below:

function layout(node, pos, type){
                node.s(&#39;2d.visible&#39;,true);
                node.setImage(type);                  
                if(type == &#39;tips1&#39;){
                    node.setPosition(pos.x + node.getWidth()/2, pos.y - node.getHeight()/2);
                    node.a({
                        &#39;sunshine&#39;  :   &#39;阳光值   :     &#39;+ (pos.x/1000).toFixed(2),
                        &#39;rain&#39;  :   &#39;雨露值   :     &#39;+ (pos.y/1000).toFixed(2),
                        &#39;love&#39;  :   &#39;爱心值   :    ***&#39;
                    });
                } else if(type == &#39;tips2&#39;){
                    node.setPosition(pos.x , pos.y - node.getHeight()/2);
                    node.a({
                        &#39;temp&#39;  :   &#39;温度   :     30&#39;,
                        &#39;humidity&#39;  :   &#39;湿度   :     &#39;+Math.round(pos.x/100)+&#39;%&#39;
                    });
                } else if(type == &#39;tips3&#39;){
                    node.setPosition(pos.x - node.getWidth()/2, pos.y - node.getHeight()/2);
                    node.a({
                        &#39;hight&#39;  :   &#39;海拔   :    &#39; + Math.round(pos.y)+&#39;米&#39;,
                        &#39;landscapes&#39;  :   &#39;地貌   :    喀斯特&#39;
                    });
                }
            }
Copy after login

CloudMove

Finally, our Demo also has a cloud mobile animation effect. Under the design architecture of HT's data model-driven graphic components, animation can be understood as changing certain attributes from start to finish. The process of the initial value gradually changing to the target value. HT provides the animation function of ht.Default.startAnim. ht.Default.startAnim supports two methods of animation: Frame-Based and Time-Based:

Frame-Based方式用户通过指定frames动画帧数,以及interval动画帧间隔参数控制动画效果;

Time-Based方式用户只需要指定duration的动画周期的毫秒数即可,HT将在指定的时间周期内完成动画。

详情见HT for Web。

在这里我们用的是Time-Based方式,源码如下:

var cloud = dataModel.getDataByTag(&#39;cloud&#39;);
parent = dataModel.getDataByTag(&#39;mountain&#39;);
round1 = parent.getPosition().x - parent.getWidth()/2 + cloud.getWidth()/2;
round2 = parent.getPosition().x + parent.getWidth()/2 - cloud.getWidth()/2;
end = round1;
//云运动动画
var animParam = {
    duration: 10000,
    finishFunc: function() {
         end = (end == round1) ? round2 : round1;
         ht.Default.startAnim(animParam);
    },
    action: function(v, t) {
         var p = cloud.getPosition();
         cloud.setPosition(p.x + (end - p.x) * v , p.y);
     }
};
ht.Default.startAnim(animParam);
Copy after login

The above is the detailed content of Share an example of the effect of pop-up box in HTML5. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

Repo: How To Revive Teammates
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Table Border in HTML Table Border in HTML Sep 04, 2024 pm 04:49 PM

Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.

Nested Table in HTML Nested Table in HTML Sep 04, 2024 pm 04:49 PM

This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.

HTML margin-left HTML margin-left Sep 04, 2024 pm 04:48 PM

Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.

HTML Table Layout HTML Table Layout Sep 04, 2024 pm 04:54 PM

Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.

HTML Ordered List HTML Ordered List Sep 04, 2024 pm 04:43 PM

Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively

Moving Text in HTML Moving Text in HTML Sep 04, 2024 pm 04:45 PM

Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.

HTML onclick Button HTML onclick Button Sep 04, 2024 pm 04:49 PM

Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively.

HTML Input Placeholder HTML Input Placeholder Sep 04, 2024 pm 04:54 PM

Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs.

See all articles