HTML5 - ITeye技术社区

[Web前端] 拓扑图线条流动效果

图论中边是重要元素，它连接各个顶点构成拓扑图，有向图中，边具有方向性，在画布中表现为箭头，在实际应用中，边可以代表链路，链路上不只是有方向，还有流量，信号种类等信息，光用箭头表现力就不够了，可增加线条线型，以及流动效果来体现，这里介绍 Qunee 1.6 中线条流动效果的实现虚线流动效果虚线流动效果在连线示例中有演示，使用虚线偏移量样式，不断增大，实现线条的流动虚线流动代码 v ...

qunee 流动动画 html5

0顶0踩

nosand 评论(0) 有346人浏览 2014-09-06 08:38

近日，国内首个开源 HTML 5 跨屏前端框架 Amaze UI 开放下载体验。　　Amaze UI 是一个针对 HTML 5 开发的轻量级、模块化、移动优先的跨屏前端框架，通过拆分、封装了一些常用的网页组件，比如轮播图框、文字框等等组件，让前端开发者只用复制代码便可以将这些跨屏的组件写入自己的网页中，而不需要自己在开发的过程中重写一遍。　　该框架的特点是 mobilefirst，解决 W ...

框架 ui html5 html web

0顶0踩

huoquan 评论(0) 有1263人浏览 2014-09-05 15:48

[Web前端] 基于HTML5的网络拓扑图 - 定制状态面板

电信网管系统中，设备状态信息的实时展示非常重要，通常会挂载一堆图标来展示状态或告警信息，图标的信息量有限，有时需要更详细的面板，甚至以图表的形式展现，本文将结合最近客户提到的需求，使用 Qunee1.6 beta版本，实现拓扑图中设备信息的实时显示。 Qunee 中ui 的定制非常灵活，每个图元节点都可以挂载多个 ui 控件，支持9X9=81种相对位置，单节点上能挂载多个 ui 元素，并进行排 ...

qunee 流量定制 VOIP HTML5

0顶0踩

nosand 评论(0) 有480人浏览 2014-09-04 21:04

[Web前端] HTML5的placeHolder不支持双引号的解决办法

HTML5的placeHolder简介 placeholder 属性提供可描述输入字段预期值的提示信息（hint）。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。如下图形式代码块 <div

html5 placeHolder

0顶0踩

qiaoshi 评论(0) 有2634人浏览 2014-08-25 16:55

[Web前端] HT图形组件设计之道（三）

上篇我们通过定制了CPU和内存展示界面，体验了HT for Web通过定义矢量实现图形绘制与业务数据的代码解耦及绑定联动，这类案例后续文章还会继续以便大家掌握更多的矢量应用场景，本篇我们先切换个话题，谈谈模型-视图-事件之间的关系。图形组件设计架构上主要就是在规划Data模型，View视图和Event事件之间的关系，这些年业界逐渐将各种GUI设计模式提炼成理论归类，MVC、MVP和MVVM的主 ...

图形组件拓扑图 Hightopo HTML5 MVP

1顶0踩

xhload3d 评论(0) 有1614人浏览 2014-08-18 00:19

[Web前端] HT图形组件设计之道（二）

上一篇我们自定义CPU和内存的展示界面效果，这篇我们将继续采用HT完成一个新任务：实现一个能进行展开和合并切换动作的刀闸控件。对于电力SCADA和工业控制等领域的人机交互界面常需要预定义一堆的行业标准控件，以便用户能做可视化编辑器里，通过拖拽方式快速搭建具体电力网络或工控环境的场景，并设置好设备对应后台编号等参数信息，将拓扑图形与图元信息一并保存到后台，实际运行环境中将打开编辑好的网络拓扑图信息， ...

电信网管拓扑图 HTML5 电力

1顶0踩

xhload3d 评论(0) 有1113人浏览 2014-08-13 00:09

[Web前端] 使用Leaflet创建地图拓扑图

之前我们采用过 Openlayers+Qunee的方案，实现地图拓扑图，鉴于Openlayers是一种古老项目，略显臃肿，面向更新的前端地图方案，在客户的介绍下，我们找到了leaflet - 基于HTML5的轻量地图客户端方案，结合Qunee使用，以及第三方插件，实现更加轻快的地图拓扑图应用 Leaflet介绍 leaflet是一个开源软件，作者在乌克兰，在移动设备上的有良好的体验，比较新和现代的 ...

leaflet qunee html5 地图拓扑图

0顶2踩

nosand 评论(0) 有436人浏览 2014-07-28 08:32

[Web前端] 浏览器缩放后，flashcanvas内部绘图时坐标错位的解决方案

最近在使用flashcanvas来解决ie等不支持HTML5 canvas的问题，我做的是个画笔工具，当用户把浏览器缩放为75%时，画出的图形居然错位了，我把坐标的值*0.75传进去就ok了以下是计算当前浏览器缩放比例的方法 detectZoom:function(){ var ratio=0, screen=window.screen, ua=navigator ...

flash html5 canvas

0顶0踩

Jabbar2011 评论(0) 有4276人浏览 2014-06-26 13:31

[Web前端] HTML5 Canvas学习笔记(4)游戏界面的淡入淡出

效果图：点击看效果： http://www.108js.com/article/canvas/4/inout.html 欢迎访问博主的网站：http://www.108js.com 源码如下：（后面有下载） <!doctype html> <html> <head> <title>界面淡入淡出</title> <st ...

html5 javascript html 游戏 ui

0顶0踩

128kj 评论(0) 有1964人浏览 2014-06-26 11:26

[Web前端] HTML5 Canvas学习笔记(3)加载游戏/动画音乐

先要准备应付各种浏览器的声音文件，什么.mp3,.ogg,.wav等格式。还是看例子吧 <body> <div id="progressText"></div> </body> <script> //音频播放 var loadAudioLen=0;//已加载的声音数 var Aud ...

html5 JavaScript html 游戏音乐

0顶0踩

128kj 评论(0) 有1693人浏览 2014-06-25 11:20

[Web前端] HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体

看到哪，学到哪，记到哪。见谅，这些笔记就没有顺序和知识上的连贯性了。希望各位老师指出我学习中的错误！！效果图：点击看效果： http://www.108js.com/article/canvas/2/menu.html 欢迎访问博主网站：http://www.108js.com 代码： <!doctype html> <html> <head> &l ...

html5 JavaScript html

0顶0踩

128kj 评论(0) 有1941人浏览 2014-06-23 23:13

[Web前端] HTML5 Canvas学习笔记(1)处理鼠标事件

一直在学习HTML5 Canvas相关内容，游戏，动画，水平还很低，于是想写一些笔记，代码可能不全是我自已的，感谢他们。效果图：点击看效果：http://www.108js.com/article/canvas/1/index.html 欢迎访问博主的网站：http://www.108js.com 一、HTML代码： <!DOCTYPE html> <html l ...

html5 html javascript 游戏

1顶0踩

128kj 评论(1) 有2960人浏览 2014-06-21 17:48

[Web前端] HTML5高性能拓扑图 - 十万图元渲染

本文的话题是：性能，HTML5、JS、Qunee组件的性能和效率问题历史回顾以往提到Javascript，联想到的是缓慢的、容易出错的小东西，一种脚本语言，现在浏览器的发展，js引擎的优化，js已经今非昔比，无论在浏览器端还是服务器端，都有一席之地，结合HTML5开发企业级应用变得切合实际，以往要在浏览器中实现丰富的图形效果，通常会选择flex富客服端解决方案，也有些Web2.0时代的组 ...

qunee html5 性能测试拓扑图

1顶0踩

nosand 评论(1) 有1103人浏览 2014-06-13 01:29

[Web前端] HT for Web中3D流动效果的实现与应用

流动效果在3D领域有着广泛的应用场景，如上图中医学领域可通过3D的流动直观的观察人体血液的流动，燃气领域可用于监控管道内流动的液体或气体的流向、流速和温度等指标。

3D Hightopo HTML5 电信拓扑

2顶0踩

xhload3d 评论(0) 有1668人浏览 2014-06-05 23:37

[Web前端] html5 canvas结合js实现的非常酷的ascii animation动画特效

代码下载地址：http://www.zuidaima.com/share/1789567017372672.htm 原文：html5 canvas结合js实现的非常酷的ascii animation动画特效演示地址:http://demo.zuidaima.com/html/1789567017372672/cool-ascii-animation-using-an-image-spri ...

html5 动画特效 ascii animation canvas

1顶1踩

yaerfeng1989 评论(0) 有1167人浏览 2014-05-29 09:50

[Web前端] HTML5 Canvas贝塞尔曲线动画

点击这里可以查看动画效果： http://www.108js.com/article/article3/zip1/BezierAnim.html 欢迎访问博主的网站：http://www.108js.com 效果图：代码： <html> <head> <meta charset="gbk"> <title>贝 ...

html5 html JavaScript 浏览器 canvas

0顶0踩

128kj 评论(0) 有1447人浏览 2014-05-22 08:35

[Web前端] FusionMaps应用实例在线Demo

FusionMaps XT让您使用JavaScript（HTML5）和Flash来展示与地理相关的数据，按类别、地区或实体进行分类。您可以用它有效地绘制各地区的收入数据、各省人口的普查信息、选举结果、飞行路线、办公地点和调查结果等。FusionMaps XT提供了超过965幅地图，包括所有的大洲、主要国家和美国各州。我们来看看FusionMaps地图在现实生活中的应用示例

javascript html5 地图

1顶0踩

wolfscry 评论(0) 有628人浏览 2014-05-16 13:39

[Web前端] Web前端开发人员和设计师必读文章推荐【系列三】

　　这篇文章继续向大家分享Web开发和设计精华文章，文章主要来自今年七月份发布在梦想天空博客的博文。梦想天空博客专注于分享Web开发技术、资源和教程，展示最新 HTML5 和 CSS3 技术应用，分享实用的 jQuery 插件，推荐优秀的网页设计案例，共享精美的设计素材和强大的Web开发工具。分享快乐，快乐分享，希望这些资源能帮助到您。 jQuery 插件和教程 13个超级有用的 jQu ...

HTML5 jquery web javascript

2顶0踩

webgeeker 评论(0) 有921人浏览 2014-05-13 14:00

[Web前端] Web前端开发人员和设计师必读文章推荐【系列一】

　　梦想天空博客专注于分享 Web 开发技术、资源和教程，展示最新 HTML5 和 CSS3 技术应用，分享实用的 jQuery 插件，推荐优秀的网页设计案例，共享精美的设计素材和强大的 Web 开发工具。分享快乐，快乐分享，希望这些资源能帮助到您。 HTML5 九个让人难以置信的HTML5和JavaScript实验分享21个丰富多彩的 HTML5 小游戏 20佳惊艳的HTML5应 ...

HTML5 CSS3 jQuery

1顶0踩

webgeeker 评论(0) 有572人浏览 2014-05-09 22:59

[Web前端] HTML5 Canvas “红心一棵”

效果图：笛卡尔公式:r = a(1-sin弧度)画“红心”。代码： <!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>HTML5 Canv ...

html5 html JavaScript canvas

0顶0踩

128kj 评论(0) 有1273人浏览 2014-05-08 10:38

[Web前端] HTML5 Canvas旋转文本动画

点这里可以看动画效果: http://www.108js.com/article/article3/zip1/text.html 效果图：代码： <!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>旋转文本</title> </ ...

html5 html JavaScript canvas

0顶0踩

128kj 评论(0) 有1452人浏览 2014-05-05 15:49

[Web前端] HTML5实现全屏API【进入和退出全屏】

现在主流浏览器基本上实现了全屏效果，但是不同浏览器实现不一样：【进入和退出全屏】 // Webkit (works in Safari5.1 and Chrome 15)element.webkitRequestFullScreen();document.webkitCancelFullScreen(); // Firefox 10+element.mozRequestFullScreen( ...

HTML5 html5全屏api 浏览器全屏

0顶0踩

kingwell.leng 评论(1) 有4204人浏览 2014-05-04 11:21

[Web前端] 基于HTML5的燃气3D培训仿真系统

最近上线了的基于HTML5的燃气3D培训仿真系统，以前的老系统是采用基于C++和OpenGL的OpenSceneGraph引擎设计的，OSG引擎性能和渲染效果各方面还是不错的，但因为这次新产品需求要求能运行多移动终端，多年前基于MFC封装OSG的老系统架构也实在该退休了，这年头找能维护MFC这种古董级GUI的靠谱人也非易事。系统最终采用HT for Web的3D框架实现，项目中的程序员 ...

HTML5 WebGL 3D 燃气仿真培训系统

1顶1踩

xhload3d 评论(1) 有1998人浏览 2014-04-28 00:41

[Web前端] HTML5绘制设备面板

客户提到设备面板的需求，qunee并没有Equipment这样的图元，但借助父子关系和跟随关系设置，可以实现类似功能，并完成下面的例子示例代码代码非常简单，这里直接列出 var graph; function init(){ graph = new Q.Graph('canvas'); graph.originAtCenter = false; gra ...

设备面板 qunee html5

0顶0踩

nosand 评论(0) 有436人浏览 2014-04-28 17:34

[Web前端] 用CSS3制作很特别的波浪形菜单

点击这里查看效果http://keleyi.com/a/bjad/8tl5of2u.htm完整HTML文件代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3波浪菜单-柯乐义</title> <style& ...

css3 html5 web前端 ini css

0顶0踩

ini 评论(0) 有509人浏览 2014-04-16 21:27

[Web前端] 禁止web页面在手机上缩放（html5）

允许屏幕缩放的设置， <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=yes" /> 不允许屏幕缩放的设置： <meta content="width=device-width, initial ...

html5

0顶1踩

hongtoushizi 评论(0) 有1135人浏览 2014-04-14 15:44

[Web前端] html5实现的盲打高手游戏代码

原创整理不易，转载请注明出处：html5实现的盲打高手游戏代码代码下载地址：http://www.zuidaima.com/share/1730007188818944.htm 预览地址:http://demo.zuidaima.com/game/game.htm

打字游戏 html5

1顶0踩

yaerfeng1989 评论(1) 有1286人浏览 2014-04-07 10:01

[Web前端] HTML5 Canvas画标准的五星红旗（中国国旗）

国旗的标准画法图。代码如下： <!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>中国标准国旗</title> </head> <body> <canvas id="canvas& ...

JavaScript html5 html

1顶0踩

128kj 评论(0) 有2580人浏览 2014-04-07 15:37

[Web前端] 美防长来了，HTML5 画个星条旗（美国国旗)

美防长来了，不希望中国与美国在未来开战，HTML5 画个星条旗（美国国旗)祈祷。代码： <!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>美国国旗</title> </head> <body> < ...

html5 html javascript

0顶0踩

128kj 评论(0) 有3461人浏览 2014-04-07 16:13

[Web前端] 拓扑图编辑器（1）

多位客户提到编辑器的需求，譬如拖拽创建节点，文本编辑，连线编辑，尺寸编辑等等，编辑是一个系列话题，将陆续作介绍，本章介绍拖拽创建节点与简单的连线编辑交互拖拽创建节点拖拽创建节点，以前要实现拖拽，需要监听全局mousemove事件，复制拖拽元素，实现drop效果，现在HTML5提供了新的拖拽事件，处理起来变得很容易创建画布面板canvas，并在左侧创建一个工具箱toolbox，设置can ...

qunee 拖拽编辑器 html5

0顶0踩

nosand 评论(0) 有367人浏览 2014-04-01 21:30