HTML5实现弹出框效果的案例

　　介绍

这篇文章给大家分享的是有关HTML5实现弹出框效果的案例的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

用户鼠标移入时,有弹出框出现,这样的需求很常见。这在处理HTML元素实现时简单,但是如果是对HTML5画布构成的图形进行处理,这种方法不再适用,因为帆布使用的是另外一套机制,无论在画布上绘制多少图形,画布都是一个整体。而图形本身实际都是帆布的一部分,不可单独获取,所以也就无法直接给某个图形增加JavaScript事件。然而,在Web中HT,这种需求很容易实现,场景如下:

HTML5实现弹出框效果的案例

这个场景图是基于HT Web的JSON文件,可能大家对怎么生成这样的JSON文件有疑惑,其实这里是基于这个麻雀虽小五脏俱全的“HTML5拓扑图编辑器”进行了扩展,很容易就自定义出满足我需求拓扑编辑器。不仅如此,在这个演示中,定义的三种类型弹框的矢量图“tips1.json”、“tips2.json”、“tips3。json的是通过这个矢量编辑器简单绘制了下,也还蛮好用。在上述场景中,用户将鼠标移入到草地等对象时,会有弹出框显示它的详细信息。

具体实现如下:

引入我们的HT:

& lt;脚本src=https://www.yisu.com/zixun/' ht.js '> 　　dataModel=new ht.DataModel (); 　　graphView一样=new ht.graph.GraphView(模型); 　　graphView.addToDOM ();

HT提供了自定义的JSON格式的矢量描述形式,以HT标准定义的JSON矢量格式,也可以作为图片进行注册和使用,HT的矢量方式比传统格式更节省空间,缩放不失真,戳Web了HT解详细信息。这里,将三种形状的JSON弹出框注册成图片以便后续调用:

ht.Default.setImage (& # 39; tips1& # 39; & # 39;符号/tips1.json& # 39;); 　　ht.Default.setImage (& # 39; tips2& # 39;, & # 39;符号/tips2.json& # 39;); 　　ht.Default.setImage (& # 39; tips3& # 39;, & # 39;符号/tips3.json& # 39;);

然后获取有交互效果的对象,其中各个对象中的属性名是给各个图元设置好的标签名:

//树 　　var={树 　　& # 39;tree1& # 39;:真的, 　　& # 39;tree2& # 39;:真的, 　　& # 39;tree3& # 39;:真 　　};//草地 　　var={草 　　& # 39;grass1& # 39;:真的, 　　& # 39;grass2& # 39;:真的, 　　& # 39;grass3& # 39;:真 　　};//山={var山 　　& # 39;山# 39;:没错 　　};

<>强弹出框

其实弹出框的本质是一个节点,当用户鼠标移入移出时,

1,控制节点的隐藏和显示可以达到弹框的效果;

2,鼠标位置的改变伴随着节点位置的改变;

3,鼠标移入到不同的对象上时,节点上的贴图也跟着发生变化;

4节点中的属性值也随着鼠标位置发生变化。

所以,要实现弹框,首先应新建节点,并将其的层级设置为‘高’,在这之前还需要将场景图的JSON文件反序列化,并且给反序列化后的图元均设置为层级低,防止被已有的图元挡住:

ht.Default.xhrLoad (& # 39; meadow.json& # 39;函数(文本){ 　　const json=ht.Default.parse(文本); 　　如果(json.title)文档。标题=json.title; 　　dataModel.deserialize (json);//设置层级 　　dataModel.each(功能(数据){ 　　data.setLayer(& # 39;低# 39;); 　　});//新建节点 　　var节点=new ht.Node (); 　　node.s (& # 39; 2 d.visible& # 39;,假); 　　node.setLayer(& # 39;高# 39;); 　　dataModel.add(节点); 　　})

然后,对底层的p监听mousemove事件,判断鼠标的位置是否在上述三个对象之上,根据对象类型,调用布局()函数对节点重新布局:

graphView.getView () .addEventListener (& # 39; mousemove& # 39;函数(e) { 　　node.s (& # 39; 2 d.visible& # 39;,假); 　　var hoverData=https://www.yisu.com/zixun/graphView.getDataAt (e); 　　pos=graphView.getLogicalPoint (e); 　　如果(! hoverData)返回; 　　如果(树(hoverData.getTag ())) { 　　布局(节点、pos tips1); 　　}else if(草[hoverData.getTag ())) { 　　布局(节点、pos tips2); 　　}else if(山[hoverData.getTag ())) { 　　布局(节点、pos tips3); 　　} 　　});

布局()函数所做的事情,已经在前面详细的阐述,其中,弹框中属性值的更新是将JSON文件的的文本属性进行数据绑定,绑定的格式很简单,只需将以前的参数值用一个带func属性的对象替换即可,func的内容有一下几种类型:

1,函数类型,直接调用该函数,并传入相关数据和视图对象,由函数返回值决定参数值,即func(数据、视图);调用。

HTML5实现弹出框效果的案例