• 欢迎访问小辉博客,有访必回!广告为已更换为百度联盟,希望随手点下,虽然博客是兴趣所在,但也想有一个良性循环!请大家谅解!

HTML5绘制上海地铁线路图

某市政项目用到地铁图展示,展示地铁站点以及相关信息流,使用Qunee组件可以很好的解决这类需求,做出优美的展现,下面以上海2012地铁图为例,效果如下:示例讲解首先需要解决数据问题,可以从维基百科或者上海地铁官网中获取,不过也免不了人工,要达到良好的显示效果,需要不只要记录站点的位置,还需要设置文本标签的理想位置,有时为了避免文字叠加,需要设置旋转角……

CSS3技巧:利用css3径向渐变做一张优惠券

在很多购物网站上都能看到优惠券,代金券,什么什么的券,但基本都是图片直接放上去,那么你有没有想过css来做一个呢,反正我是这样想过。那么你怎么做呢,切图做背景平铺边缘,嗯,有这样想过,如今css3技术这么先进再用背景做平铺是不是已经out了,那么今天给大家介绍一个用css3径向渐变做的优惠券。CSS3 径向渐变和线性渐变是很相似的,首先来看其语法:-mo……

手机移动端WEB资源整合

meta基础知识H5页面窗口自动调整到设备宽度,并禁止用户缩放页面<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />忽略将页面中的数字识别为电……

手写签名插件—jSignature

jSignature 是一个通过捕捉笔画的矢量轮廓输出多种格式数据的jQuery插件,通过该插件我们可以实现绘画板、手写签名等功能。使用该插件需要引入jQuery和jSignature.js,首先初始化jSignature:var $signature = $("#signature").jSignature();接下来即可使用插件……

腾讯 Web UI 解决方案 QMUI Web —— 探索与沉淀

作者:李浩成(Kayo),腾讯广州研发部 UI 工程师。经过长时间的打磨迭代,QMUI Web 作为腾讯广研 QMUI 团队的一个开源项目,正式发布到 Tencent Github。QMUI Web 是一个 Web UI 的解决方案,从零开始,由编码规范,到组件和工具方法的制作,再到工作流的整合,不断在迭代,也不断在优化,走过了不少的路。趁着发布的机会,我……

判断单、多张图片加载完成

在实际的运用中有这样一种场景,某资源加载完成后再执行某个操作,例如在做导出时,后端通过打开模板页生成PDF,并返回下载地址。这时前后端通常需要约定一个flag,用以标识模板准备就绪,可以生成PDF了。试想,如果模板中有图片,此时如何判断图片是否加载完成?在此之前来了解一下jquery的ready与window.onload的区别,ready只是dom结构……

JS容易犯错的this和作用域

var someuser = { name: 'byvoid', func: function() { console.log(this.name); }}; var foo = { name: 'foobar'}; someu……

css穿透绝对定位的层使下面的链接可点击

今天做wodedaima.com时候遇到了穿透的问题,百度一下之后pointer-events: none;注意:如果你铺了背景颜色或者背景图片那就不可以了, 下面的链接全都不能点击了。但层里的所有a链接也不生效了扩展阅读:Pointer-events原本来源于SVG,目前在很多浏览器中已经得到体现。不过,要让任何HTML元素生效还得借助于一点点c……

CSS3 rem详解

在页面中设置字体,我们知道有常见的两种,px 和 em.px在Web页面制作中,我们一般使用“px”来设置我们的文本,因为他比较稳定和精确。但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,他改变了浏览器的字体大小(虽然一般人不会去改变浏览器字体大小),这时会使用我们的Web页面布局被打破,这时就提出了使用“em”来定义Web页面的字……

浅谈基于AmazeUI Touch 的 Flex布局结构

2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{ display: flex……

AmazeUI瘦身全攻略

AmazeUI是国内著名的一款UI,涵盖jQuery,React,Touch三个版本。AmazeUI的组件策略是移动优先,但UI的配置文件体积比较大,在移动开发的过程中50%以上的组件是不会使用的,如何精剪UI的体积,本文和大家一起分享从源代码中精剪体积的策略。环境搭建:如果想自定义环境组件,获得更宽松的脚手架策略,当然要搭建环境。Gulp也好,webp……

DIV+CSS初学者需要引起重视的10个问题

一、检查HTML元素是否有拼写错误、是否忘记结束标记即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。二、检查CSS是否正确检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具,但也能检查出拼写错误。 三、确定错误发生的位置……

React 组件间通讯

React 组件间通讯说 React 组件间通讯之前,我们先来讨论一下 React 组件究竟有多少种层级间的关系。假设我们开发的项目是一个纯 React 的项目,那我们项目应该有如下类似的关系:父子:Parent 与 Child_1、Child_2、Child_1_1、Child_1_2、Child_2_1兄弟:Child_1 与 Child_2、……

一个前端的自我修养

今天给大家分享的主题是前端的自我成长,这是一个关于成长的话题。很多人都有这样的感觉:听了很多技术圈子的分享,有的有深度,有的循循善诱,深入浅出,但是呢,几年下来,到底哪些用上了,哪些对自己真的有帮助了?反而有些模糊。2015 年我在不同的场合分享了很多内容:有移动端的性能、有适配、有 Web vs Native,也有 hybrid,但是其实我一直比较担……

简单鼠标滑过图片半透明提示效果

 上代码HTML代码<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> ……

HTML+CSS3实现天狗食日的效果

html5+css3的天狗食日效果<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html x……

支撑起整个互联网时代的 7 款开源软件

开源软件现在成为整个互联网时代的支撑技术,你可能已经无法离开由开源软件构建起来的网络世界了。下面我们就来看看一些最重要的开源技术为互联网而生的操作系统linuxLinux是一款免费的操作系统,诞生于1991年,用户可以通过网络或其他途径免费获得,并可以任意修改其源代码。它能运行主要的UNIX工具软件、应用程序和网络协议。它支持32位和64位硬件。Lin……

纯JS实现图片旋转木马展示效果

纯粹原生JavaScript实现类似旋转木马的图片展示效果JS代码 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><style type="text/css">……

纯CSS制作非常简单tip效果

我们在网页上有时会针对一些内容做详细说明,以便更友好的服务用户。最常见的是在网站上加个用户使用帮助,但是一般需要跳转页面。今天我给大家介绍只需将鼠标滑向一个小问号上,就会出现帮助提示信息的效果。前言其实本文要分享的就是我们常见到的提示信息工具tooltip,它能够为我们的页面提供非常漂亮的提示信息,让内容更加直观,提升用户的体验。我们可以在网上查……

CSS3阴影 box-shadow的使用技巧总结

text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着HTML5和CSS3的普及,这一特殊效果使用越来越普遍。基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}对象选择器 {box-shadow:[投影方式] X轴偏……