Odometer使用JavaScript和CSS制作数字滑动效果
发表于
JS
分类，标签:
11
08月
2015
0
Odometer是一个使用JavaScript和CSS技术，制作出数字上下滑动的动画效果插件，有点类似与我们的天然气的读数的动画效果，这个插件是轻量级的，压缩版本只有3kg，使用CSS3动画技术，所以运行起来非常的流畅，需要这种效果的朋友不妨试试这个插件。所有的主题都可以自定义文字的大小和Odometer元素的标签。兼容性Odometer能在IE8+,FF4+,Safari6+,Chrome等高级浏览器上完美的运行。功能不仅仅可以让数字滑动，同样的文字也可以实现这样的效果。指定文字的内容还可以用于数学计算的输出结果，感觉很棒的动画效果。显示主题Odometer主题的各种文件样式表中被准备。使用方法首先我们需要引入我们的插件文件<link rel="stylesheet" href="odometer-theme-car.css...
HTML5中类jQuery选择器querySelector的使用
发表于
JS
分类，标签:
11
08月
2015
pre{color:#fff;}HTML5向WebAPI新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素，功能类似于jQuery的选择器。这使得在编写原生JavaScript代码时方便了许多。两个方法使用差不多的语法，都是接收一个字符串参数，这个参数需要是合法的CSS选择语法。element = document.querySelector('selectors');elementList = document.querySelectorAll('selectors');其中参数selectors可以包含多个CSS选择器，用逗号隔开。element = document.query...
未命名
发表于
svg
分类，标签:
05
08月
2015
Web设计新趋势：使用SVG代替IconFont- io-meter.com 如果你还在使用IconFont作为网页中显示图标的实现方案，那么你可能有点Out了。由于使用IconFont显示图标存在一些缺陷，开发者们一直在致力于探索使用SVG作为替代的方法。这篇文章列举了目前SVG比较常见的使用方法。 阅读原文» http://io-meter.com/2014/07/20/replace-icon-fonts-with-svg/...
手机屏幕分辨率、PPI像素密度科普知识大全
发表于
html5
分类，标签:
04
08月
2015
手机屏幕分辨率、PPI像素密度科普知识大全【PPi指数】是手机清晰度的重要决定因素，所谓的PPI即每英寸所拥有的像素数目。现在市售的大屏幕手机普遍分辨率都只停留在854*480的水平，同样的分辨率，屏幕越大，像 素点之间的距离越大，屏幕就越粗糙。所以大屏幕也不一定能带来良好的视觉感受。 实践证明，ppi低于240的让人的视觉可以察觉明显颗粒感。ppi高于300则无法察觉 理论上讲超过300ppi才没有颗粒感，比如iPhone4，3.5寸960×640，330ppi，屏幕的清晰程度其实是分辨率和尺寸大小共同决定，用ppi指数衡量屏幕清晰程度更加准确。 分辨率越高代表系统的运行压力就越大，需要平衡一下. 计算了一下小米手机屏幕的PPI，4.0英...
移动端分辨率
发表于
html5
分类，标签:
04
08月
2015
ipad和iPhone尺寸和分辨率，点1.ipad分辨率,iphone6iPhone设备 尺寸 分辨率 点iPhone3和3s 3.5英寸 (320×480) 320×480iPhone4和4s 3.5英寸 (640×960) ...
SVG系列教程：SVG文件结构
发表于
svg
分类，标签:
31
07月
2015
在《SVG简介与嵌入HTML页面的方式》简单的介绍了什么是SVG？以及SVG图形与其它格式图像相比，优势在哪。另外介绍怎么将SVG图像应用到HTML页面，让浏览器能显示。从文中了解到，SVG图形其实就是一段XML代码，在HTML页面引用是通过引用.svg文件格式，或者直接在.html文件中放置<svg>元素。而两者最大的区别就是，独立的SVG必须添加一个XML声明。那么这篇文章要和大家一起探讨的就是SVG文件(.svg)的结构。SVG文件结构一个独立的SVG文件，也就是平时看到的以扩展名.svg结尾的文件，他主要包括：XML声明<svg>根元素包括一个用来描述SVG的XML声明空间。其中XML声明其实和HTML文档的DTD声明是类似的。大家是否还记得HTML相关的DTD声明方式。比如HTML5的声明方式：<!DOCTYPE html>其它相关的...
SVG系列教程：SVG简介与嵌入HTML页面的方式
发表于
svg
分类，标签:
31
07月
2015
随着技术向前的推进，SVG相关的讨论也越渐频繁。为了紧跟时代的步伐，我也开始步入SVG相关技术的探索与学习之中。从这篇文章开始会在W3cplus站点上陆续向大家推出有关于SVG相关的教程、译文或案例等。感兴趣的同学可以跟随着教程一起了解与学习SVG相关的知识与技巧。什么是SVGSVG是"ScalableVectorGraphics"的简称。中文可以理解成“可缩放矢量图形”。这个概念对于设计师来讲一点不陌生，但对于码农来讲，总是没有设计师们理解的那么透彻。其实码农们也没必要理解的那么透彻，只需要知道他是web页中的矢量图即可。如果你是想知道，可以看看维基百科给的一个阐述：ScalableVectorGraphics(SVG)isanXML-basedvectorimageformatfortwo-dimensionalgraphicswith...
CSS3教程:pointer-events属性值详解
发表于
css3
分类，标签:
29
07月
2015
破洛洛文章简介：CSS3pointer-events介绍.其实早知道这个属性，但是一直没有去研究过。今天正好在twitter看到这个词，就去研究了下，正好解决了目前遇到的一个小难题，所以分享下。嗯，其实这是个比较简单的CSS3属性。在某个项目中，很多元素需要定位在一个地图层上面，这里就要用到很多绝对定位或者相对定位的元素，但是这样的话，这些浮在上面的div或者其它元素一般都会给个宽高，或者relative的元素可以不给宽高，这个时候，这些元素就会盖住下面的地图层，以至于地图层无法操作。。。然后正好在Googlemap见到了类似的问题，拿来当例子来说：Googlemap中左上角的操作区域占位是挺大的，如红色框区域，然后在这个区域是无法操作地图层的。那么我们就可以给这个div设置pointer-events:none，然后你就会发现下面的地图就可以拖动和点击了。但是悲剧的是，操作区...
移动端前端开发调试
发表于
other
分类，标签:
22
07月
2015
本文转自（http://yujiangshui.com/multidevice-frontend-debug/ ）2015.01.21前端相关TOC1.响应式测试1.1.基础的响应式测试...