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

基于Vue3.0开发PC桌面端自定义对话框组件V3Layer. 前两天有分享一个vue3.0移动端弹出层组件,今天分享的是最新开发的vue3.0版pc端弹窗组件. V3Layer 一款使用vue3.0开发的多功能PC网页端自定义弹窗组件.拥有超过10+种弹窗类型.30+种参数配置,支持拖拽(自定义拖拽区域).缩放.最大化.全屏及自定义置顶层叠等功能. v3layer的开发灵感同样来自之前v2版本,在功能效果上和之前的保持同步一致性. ◆ 引入组件 // 在main.js中全局引入组件 impor

在做移动端项目的时候发现,如果弹窗的内容很多很长,在滑动弹窗时,蒙层下面的window窗体也会跟着一起滚动,这样带来很差的视觉体验:当时也想了很多办法,比如判断滑动的元素,如果是弹窗里面的元素则禁止window的滚动,如果不是,则window可以滚动 虽然在滑动弹窗的时候window体不滚动,但是当滑到弹窗边缘的时候,window体依然滚动,后来小组长想出了一个办法 即:在弹出弹窗的时候,设置window最外层定位为fixed,这样window便不会滚动了,在关闭弹窗的时候,设置window体定

需求:业务员做提交时要签名... 代码不多简单易懂,直接看代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ background: #ccc; } #oc{ position: absolute; left: ; right: ;

自定义view里面的onDraw方法,在这里我们可以绘制各种图形,onDraw里面有两个API我们需要了解清楚他们的用法:Canvas 和 Paint. Canvas翻译成中文就是画布的意思,Canvas负责进行绘制各种各样的图形,它有如下的一些绘制图形方法: drawArc 绘制弧 drawBitmap 绘制位图 drawCircle 绘制圆形 drawLine 绘制线 drawOval 绘制椭圆 drawPath 绘制路径 drawPoint 绘制一个点 drawPoints 绘制多个点 d

为了研究canvas一些属性简单实现的一个小效果  代码样式不太规范 随手写的 请问喷 初学者可以看下 css代码 <style> * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } .container { width: 100%; height: 100%; position: relative; } #box { width: 100%; height: 300px; text-align: cen

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="robots" content="noindex"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no,

1.分享效果:弹窗Canvas渲染大图.   2.进度条中表现进度百分比的数值d%,根据进度的增长“字体颜色”为了表示清晰也随着变化 解决方法:参考Demo.   3.输入框保持查询参数,结果列表局部刷新,纯ajax感觉太麻烦,这个怎么做? //处理服务器返回的信息 更新专业下拉框 function refreshResultListElement(mode) { if(xmlHttp.readyState == 4) { if(xmlHttp.status == 200) { //此处xmlH

这是我之前做的一个关于文字图片合成的代码,供大家参考,不足支出还望体谅:具体的注释在代码里都有,有什么不懂了可以留言互相交流.<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="yes" name="apple-mobile-web-app-capable"> &l

基于React.js实现PC桌面端自定义弹窗组件RLayer. 前几天有分享一个Vue网页版弹框组件,今天分享一个最新开发的React PC桌面端自定义对话框组件. RLayer 一款基于react.js开发的PC端自定义Layer弹出框组件.支持超过30+参数自由配置,通过轻巧的布局设计.极简的调用方式来解决复杂的弹出层功能,为您呈上不一样的弹窗效果. RLayer在设计开发之初有参考之前的VLayer组件,尽量保持功能效果的一致性. 如上图:展示一些常用的基础普通型弹窗功能. 极简调用方式

★ ★ ★ ★ ★ ★ ★ ★ ★ ★ wap端问题及解决方法 ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ 一.wap端弹窗 .Dialogbg-Select{ background-color: #000; height: 100%; left: 0; opacity: 0.85; position: fixed; top: 0; width: 100%; z-index: 200; display: none; } .Dialog-Select{ background: #fff

前言:最近几个月来到新公司,主要从事移动端方面的开发,有时候也挺忙挺累的,于是就好一段时间没写博客了.其实自己在这几个月里,自己对canvas以及createjs和egret都有了一定程度上的认识与掌握了,所以有挺多东西想总结一下的.趁着今天广州下雪的日子,就写点东西吧,先从简单的demo开始吧.因为自己在走HTML5游戏方向,所以最近都在做小游戏.后续会再写关于canvas和createjs的系列文章吧,毕竟国内的资料比较少.一旦爱上了canvas,我便逐渐嫌弃DOM了. 360度浏览效果 利

移动端用canvas代替img渲染图片,可以提高性能 var oImg = new Image(); oImg.src = url; oImg.onload = function(){ var cvs = $('#cvsIndex')[0].getContext('2d'); cvs.width = this.width; cvs.width = this.height; cvs.drawImage(this,0,0); }

用JavaScript修改Canvas图片的分辨率(DPI)   应用场景: 仓库每次发货需要打印标签, Canvas根据从数据库读取的产品信息可以生成标签JPG, 但是这个JPG图片的默认分辨率(DPI)是72 这个DPI太低, 导致打印出来的图片会很模糊. 修改DPI的常规做法是把图片上传到服务器用C#修改DPI后再下载到服务端 但是心里觉得很憋屈, 分明已经在客户端生成了图片, 仅仅为了修改一个很小的标记(DPI信息只是JPEG格式的一个头部META)要上传一张很大的图片到服务端折腾一遭.

Layer     layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 在与同类组件的比较中,layer总是能轻易获胜.她尽可能地在以更少的代码展现更强健的功能,且格外注重性能的提升.易用和实用性! 如果,你初识layer,你对她不知所措,你甚至不知如何绑定事件… 那或许你应该用秒做单位,快速认识她吧~~                                                  

<顺便游旅行>是一款H5移动端旅行app,提供目的地(国内.国外.周边)搜索.旅游攻略查询.游记分享.私人定制4大模块,类似携程.同程.去哪儿.马蜂窝移动端,只不过顺便游app界面更为简洁. HTML5+css3+jQ+rem响应式+xwpop,其中xwpop是自己开发的一个移动端弹窗(9大自定义接口功能),app界面精美.代码优雅.              

Web APP & 弹窗插件 移动端弹窗插件 alert.confirm.toast.notice 四种类型弹窗 jQuery & Zepto https://github.com/sufangyu/dialog2

一.需求 在一个高640.宽360的canvas内画一些坐标点. 二.问题 坐标点只显示了一部分,剩下的点没显示(其坐标属于(640,360)区域). 三.原因 canvas默认的画布大小是高150,宽300,这个范围以外的点自然显示不了,因此判断是画布大小的设置有问题. 设置画布大小的时候,分别用两种方式设置width和height: 1.style <Canvas style={{ width: 360, height: 640, backgroundColor: '#F5FCFF' }}

应用场景: 仓库每次发货需要打印标签, Canvas根据从数据库读取的产品信息可以生成标签JPG, 但是这个JPG图片的默认分辨率(DPI)是72 这个DPI太低, 导致打印出来的图片会很模糊. 修改DPI的常规做法是把图片上传到服务器用C#修改DPI后再下载到服务端 但是心里觉得很憋屈, 分明已经在客户端生成了图片, 仅仅为了修改一个很小的标记(DPI信息只是JPEG格式的一个头部META)要上传一张很大的图片到服务端折腾一遭. 后来使用了下面的方法 用JavaScript直接修改了DPI 这