08 2014 档案

基于HTML5 Canvas的网页画板实现教程
摘要：HTML5的功能非常强大，尤其是Canvas的应用更加广泛，Canvas画布上面不仅可以绘制任意的图形，而且可以实现多种多样的动画，甚至是一些交互式的应用，比如网页网版。这次我们要来看的就是一款基于HTML5 Canvas的网页画板，在这里仅对一些关键性的代码进行记录，大家也可以下载全部源代码研究。... 阅读全文
posted @ 2014-08-15 14:52 axl234 阅读(877) 评论(0) 推荐(0)
zepto打造一款移动端划屏插件
摘要：效果图样式1样式2调用正常情况下应该是后台生成的html代码，但还是写了一套操作tab页的方法调用简便如下：html 标题1 标题2 标题3 text1 te... 阅读全文
posted @ 2014-08-15 14:41 axl234 阅读(309) 评论(0) 推荐(0)
CSS3实战开发 表单发光特效实战开发
摘要：首先，我们先准备好html代码:CSS3实战开发之发光控件的实现 立即搜索 此时，我们先看一下此时未加样式时的运行效果：接着我们再设置页面外部容器的样式... 阅读全文
posted @ 2014-08-15 10:03 axl234 阅读(273) 评论(0) 推荐(0)
纯CSS3实现自定义涂鸦风格的边框
摘要：今天我们要来分享一款基于纯CSS3的自定义边框应用，看上去它像一个Tooltip控件，因为下边框有一个小三角，就像很多地方的引用文本框一样。另外这款CSS3边框是涂鸦风格的，看起来很有个性。用CSS3实现自定义边框的好处是可以自适应边框内部的文字数量大小。你也可以在这里查看在线演示下面我们来分享一下... 阅读全文
posted @ 2014-08-15 10:02 axl234 阅读(255) 评论(0) 推荐(0)
CSS ::before 和 ::after 伪元素用法
摘要：CSS 有两个说不上常用的伪类 :before 和 :after，偶尔会被人用来添加些自定义格式什么的，但是它们的功用不仅于此。前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的页面，里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外，... 阅读全文
posted @ 2014-08-12 15:33 axl234 阅读(470) 评论(0) 推荐(0)
响应式与瀑布流
摘要：以上只是示例代码，懒得对低版本浏览器做兼容，所以有些地方直接使用了现代浏览器的特性。比如使用Float32Array代替普通数组省去了对数组元素的初始化步骤；使用Array.prototype.reduce方法来搜索数组中的东西。这些都是低版本浏览器不支持的，如果需要兼容可以手动改写为低版本浏览... 阅读全文
posted @ 2014-08-12 15:02 axl234 阅读(310) 评论(0) 推荐(0)
vertical-align:middle的居中细节调整
摘要：使用vertical-align:middle可以让行级元素垂直居中，但这个居中是以文字的中线来计算的，而文字的中线在不同的字体上不同，甚至相同的字体在不同的浏览器上显示的都不同。所以直接使用vertical-align:middle很难完美居中，因此需要其它调整。运行abcdef 当容器内存在v... 阅读全文
posted @ 2014-08-12 14:40 axl234 阅读(1811) 评论(0) 推荐(0)
三栏布局 中栏实现自适应宽度
摘要：对于div自适应宽度，网上的说法基本上都是将要自适应宽度的div放在其它固定宽度的最后，不指定其float属性或将float属性指定为none，比如三栏布局居中的一栏为自适应宽度，就可以这样来定义三栏div：这是左栏这是右栏这是中栏，且自适应宽度效果如下：但是如果我们增加中栏的文字内容，并且为其添加... 阅读全文
posted @ 2014-08-12 14:36 axl234 阅读(878) 评论(0) 推荐(0)
模拟表格 inline-block等高布局
摘要：表格是个好东西，它可以自动根据内容来调整格子，确保数据正常显示，并且不破坏表格的结构。但也有一些劣势，因为是用大量标签堆砌而成，页面结构会比较乱，细节也往往不容易控制。所以我们希望有表格的展示效果，但不想用表格，于是就有了模拟表格。 对于HTML中的同级数据，我们更希望把它们放到一起。所以UL、L... 阅读全文
posted @ 2014-08-11 15:40 axl234 阅读(750) 评论(0) 推荐(0)
CSS中zoom和scale的区别
摘要：zoom和scale这两个东西都是用于对元素的缩放，但两者除了兼容性之外还有一些不同的地方。zoom缩放会将元素保持在左上角，而scale默认是中间位置，可以通过transform-origin来设置。另外他们执行的渲染顺序也不同zoom可能影响到盒子的计算。运行 第一个测试中只设置了scale，... 阅读全文
posted @ 2014-08-08 10:39 axl234 阅读(310) 评论(0) 推荐(0)
CSS3属性text-overflow(省略符)实战开发详解
摘要：先看一下效果：好了，看完了效果，现在正式开始今天的开发旅程吧！首先我们先创建html页面，代码如下所示（红色文字即是我们Demo的主要内容）： text-overflow 实例详解 今日头条 ... 阅读全文
posted @ 2014-08-08 10:11 axl234 阅读(354) 评论(0) 推荐(0)
虚拟键盘挡住控件
摘要：在一些手机网站上填表单时，如果表单比较长，在点击控件打算输入文字时控件就被虚拟键盘挡住看不见了。用户还要去滚动页面才能看到控件，但虚拟键盘又会因此消失。当再次得到焦点时候可能又发生同样的情况。这是非常糟糕的用户体验，所以需要对其改进。 虚拟键盘的弹出只非常暴力的，它直接遮在页面上出现，不会改变页面... 阅读全文
posted @ 2014-08-07 16:26 axl234 阅读(284) 评论(0) 推荐(0)
INPUT[type=file]的change事件不触发问题
摘要：在网页上要操作文件通常会使用INPUT[type=file]控件，但这个控件的设计很蛋疼。它不像其它编程语言中文件选择后会触发一个事件，只是让上面的文字改变，而这个改变可能会触发change事件而已。对于文字没改变的选择，change事件则不会触发。 当INPUT[type=file]控件上已经选... 阅读全文
posted @ 2014-08-07 16:01 axl234 阅读(37845) 评论(0) 推荐(1)
CSS 根据数据显示样式
摘要：在低版本IE时代，我们想让数据根据其值显示不同的样式可能需要直接从服务器端输出时为不同的数据添加相应的class。但现在，通过属性选择器+伪元素+属性选择符，这三个东西混合使用就可以让数据根据其值以不同的样式显示，不需要再从程序控制样式。 现在有一堆数据，正数表示盈利，负数表示亏损。通常我们需要从... 阅读全文
posted @ 2014-08-07 15:16 axl234 阅读(1590) 评论(0) 推荐(0)
普通元素的层次问题
摘要：对定位元素使用z-index属性可以直接对元素设置层次，它会在渲染时影响元素的遮盖顺序。但z-index属性仅对定位元素生效，那么对于非定位元素呢？实际上在非定位元素之间也有自己的层次设置方案，一些普通的属性就可以影响非定位元素的遮盖顺序。 通常，在文档中位置较后的元素会挡住较前的元素。运行 但... 阅读全文
posted @ 2014-08-07 15:07 axl234 阅读(385) 评论(0) 推荐(0)
animate CSS动画程序接口（仅Chrome可用）
摘要：jQuery中很早就提供了animate方法，使用它可以很方便地实现一些简单动画效果。后来CSS3中也提供了animation用于动画效果制作，但CSS本身的可操作性太差，所以用起来并不方便。现在最新版的Chrome原生支持了animate方法，弥补了CSS的操作缺陷。 元素上的animate方法... 阅读全文
posted @ 2014-08-07 15:03 axl234 阅读(630) 评论(0) 推荐(0)
一次滚动一屏的滚动条行为实现
摘要：在一些类似于幻灯片之类的页面上，滚动条被限制为了每次滚动一个屏幕，也就是滚动幻灯片的一页。但浏览器并没有直接提供这样的功能，我们通常是通过程序控制来实现的。这样的程序并不困难，只要劫持鼠标滚轮事件，将其修改到自己需要的行为即可。 下面是一个简单地实现代码，这里没有考虑低版本浏览器的兼容，如果需要可... 阅读全文
posted @ 2014-08-07 11:18 axl234 阅读(2117) 评论(0) 推荐(0)
CSS3中的弹性流体盒模型技术详解
摘要：先回顾一下CSS1 和 CSS2中都已经定义了哪些布局方面的属性，这样也会增加我们理解弹性布局。其实我们现在有很多一部分人，你们刚刚接触CSS层叠样式表，或者接触有一段时间了，但是却没有很好的去消化与理解。可能平时你们还一直在使用table，然后通过不断了合并单元格来实现网页布局。希望我今天的这篇文... 阅读全文
posted @ 2014-08-06 16:27 axl234 阅读(299) 评论(0) 推荐(0)
jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏
摘要：1、效果及功能说明hover事件制作产品图片鼠标滑过图片半透明，标题文字从左到右滑动动画移动显示隐藏2、实现原理首先把效果都隐藏，然后定义一个伪类来触发所有的效果，接下来当触发伪类后会有一个遍历停止所有的效果，从新触发效果就是标题的从左边淡出和背景颜色的变化，当鼠标离开图片后触发一个遍历，停止所有动... 阅读全文
posted @ 2014-08-06 14:27 axl234 阅读(844) 评论(0) 推荐(0)
CSS实现限制字数功能
摘要：试试看试试看试试看试试看试试看试试看试试看试试看试试看试试看试试看 效果：语法：text-overflow : clip | ellipsis参数：clip : 不显示省略标记（...），而是简单的裁切（clip这个参数是不常用的！）ellipsis : 当对象内文本溢出时显示省略标记（...... 阅读全文
posted @ 2014-08-06 10:29 axl234 阅读(898) 评论(0) 推荐(0)