随笔分类 -  HTML/HTML5

1 2 下一页
Canvas现实画板功能
摘要：先看图片 HTML Document 线条大小线条颜色 Javascript de... 阅读全文
posted @ 2014-11-05 13:58 kingwell 阅读(1157) 评论(0) 推荐(1)
CSS3动画进度条
摘要：CSS3动画进度条CSS CODE:@-webkit-keyframes move{ 0%{ background-position: 0 0; } 100%{ background-position: 30px ... 阅读全文
posted @ 2014-08-25 18:27 kingwell 阅读(1058) 评论(1) 推荐(1)
移动端使用HTML5表单增强体验
摘要：我们知道，HTML5新增了许多表单类型，如： number，email，url，tel，datetime，month，datetime-local等等，像datetime,month这些非常方便，免得自己去写选择日期，时间插件；但是像number，tel，email，这些在桌面端变化不是特别大，外观... 阅读全文
posted @ 2014-08-13 09:52 kingwell 阅读(5716) 评论(0) 推荐(0)
去除IE10+上文本框巨丑无比的删除图标以及显示密码图标
摘要：去除IE10+上文本框巨丑无比的删除图标以及显示密码图标IE浏览器总是让人喜欢让人厌，在最新的IE浏览器（IE10+）上使用表单时，文本框内后面会出现很巨丑无比的“删除图标”以及“显示密码图标”，如果你讨厌这个可以把它去掉，这两个是由IE私有属性控制：input::-ms-clear,input::... 阅读全文
posted @ 2014-05-04 15:32 kingwell 阅读(579) 评论(0) 推荐(0)
HTML5实现全屏API【进入和退出全屏】
摘要：现在主流浏览器基本上实现了全屏效果，但是不同浏览器实现不一样：【进入和退出全屏】// Webkit (works in Safari5.1 and Chrome 15)element.webkitRequestFullScreen();document.webkitCancelFullScreen(... 阅读全文
posted @ 2014-05-04 11:16 kingwell 阅读(52442) 评论(4) 推荐(6)
Sublime text 2/3 SVN插件及使用方法
摘要：Sublime Text是前端利器，作为前端的盆友们已经再熟悉不过了，在项目中经常使用SVN，每次都要切换提交，很麻烦，有了这个SVN插件就很方便了，使用快捷方式提交，更新。Sublime Text2/3 SVN插件 点击下载使用快捷方式：[alt+c] : commit current file.[alt+u] : update current file.[alt+r] : revert current file. 阅读全文
posted @ 2014-02-20 14:25 kingwell 阅读(12958) 评论(6) 推荐(0)
CSS实现箭头效果
摘要：有时候网页中使用箭头以增强效果，一般的做法是使用图片，今天我们使用CSSCSS来实现“箭头效果”，使用CSS我们必须兼容所有浏览器（IE6、7、8、9、10、+），Chrome，Firefox，Opear... 1 2 3 4 5 6 7 8 9 Document10 23 26 27 28 29 30 31 32 33 34 35 36 .arrow{ border-width:50px; border-color:red g... 阅读全文
posted @ 2013-09-23 15:20 kingwell 阅读(9453) 评论(2) 推荐(1)
IE6透明PNG解决方案
摘要：IE6不支持PNG-24图片一直困扰很多人，但是可以通过IE的独有的滤镜来解决，解决的方案很多，比如：将滤镜写在CSS里，还可以写成单独的 Javascript文件，本来认为推荐两种做法：第一种，将所有PNG图片添加滤镜（此方法有副作用）；第二种：有选择性的添加滤镜（推荐）；两者都可 以将代码放在单独的JS文件里，然后引用。第一种：直接添加如下代码：JSCode 1 function correctPNG() { 2 for (var i = 0; i ";20 img.outerHTML = strNewHTML;21 i = i - ... 阅读全文
posted @ 2013-09-23 14:38 kingwell 阅读(391) 评论(0) 推荐(1)
HTML5 Canvas时间效果
摘要：Canvas 时间效果：function clockTest() { var canvas = document.getElementById('canvas'); if (!(canvas && canvas.getContext)) { return; } var ct = canvas.getContext('2d'); var w = canvas.width = 500; var h = canvas.height = 300; var r1 = 95; var c3 = ct.createLinearGradient(0... 阅读全文
posted @ 2013-08-01 16:46 kingwell 阅读(2331) 评论(0) 推荐(0)
HTML5获取地理位置信息并在Google Maps上显示
摘要：经度： 纬度： 精确度： 经度：纬度：精确度： 阅读全文
posted @ 2013-07-16 13:08 kingwell 阅读(964) 评论(0) 推荐(0)
页面加载中的图片性能优化【转】
摘要：我的大部分性能优化工作都集中在JavaScript和CSS上，从早期的Move Scripts to the Bottom和Put Stylesheets at the Top规则。为了强调这些规则的重要性，我甚至说过，“JS和CSS是页面上最重要的部分”。几个月后，我意识到这是错误的。图片才是页面上最重要的部分。我关注JS和CSS的重点也是如何能够更快地下载图片。图片是用户可以直观看到的。他们并不会关注JS和CSS。确实，JS和CSS会影响图片内容 的展示，尤其是会影响图片的展示方式（比如图片轮播，CSS背景图和媒体查询）。但是我认为JS和CSS只是展示图片的方式。在页面加载的过程中，应当先 阅读全文
posted @ 2013-07-10 11:12 kingwell 阅读(3100) 评论(0) 推荐(0)
前端开发工程师如何在2013年里提升自己【转】
摘要：大部分人非常在意个人在技术上的提升。但是保持对新技术的了解是一项不小的挑战， 毕竟我们需要的信息在数量上过于庞大。2012年里，伴随着前端发展的是大量的革命性突破和对前端的重新定义。我们在实践的路上飞速前进，具体的进步体现在使用抽象化，优秀的代码质量，维护性上的提升以及更好的性能。如果你实在忙到没有时间来跟上最新的技术，不用担心。随着假日的来临，我们就有了一些空闲的时间可以自己支配，我想，如果我把我收集的前端相关的精品讨论列表分享出来，那一定会对大家有一些帮助。你不需要把所有的都阅读一遍，但是这些相关的建议会让你了解更多相关的知识，为明年成为一名更好的前工程端开发师做准备。基础部分走在技术前沿 阅读全文
posted @ 2013-07-10 10:31 kingwell 阅读(474) 评论(0) 推荐(1)
Kingwell Dialog V1.5 kingwell对话框源码及文档说明
摘要：自定义弹出：支持键盘操作支持多窗口弹出兼容各浏览器支持Iframe及Iframe遮盖层支持自动关闭自定义按钮经过多个项目，目前已经比较完善有文档说明使用方法以：new Dialog({ title : 'Hello World', width : 500, height : 100, type : 0, html : 'Hello Kingwell Dialog', callback : function(){ alert('我要关闭了'); }});/*参数说明：参数均为JSON格式title窗口标题文件 可选width窗口宽度 可选h... 阅读全文
posted @ 2013-06-06 17:16 kingwell 阅读(992) 评论(4) 推荐(1)
kingwell Calendar V1.0 日历时间组件
摘要：项目中经常要使用日历时间插件，网上也有很多很优秀的插件，但是我还是喜欢使用自己写的东西，第一比较符合自己项目需要，第二，维护，修改比较内容，第三，代码也比较少，第四，兼容各主流浏览器(IE6,7,8,9,10,FF,Chrome,Opera等)。最近写了个日历与时间选择插件，支持中英文代码下载 ： 日历时间插件下载Kingwell CalendarKingwell Calendar V1.1 测试页面选择日期：选择时间：//日期选择-使用方法new Calendar('test1', { top : 5, language : 'cn', addClass : 阅读全文
posted @ 2013-06-06 16:59 kingwell 阅读(470) 评论(0) 推荐(0)
HTML5 Web Storage
摘要：体验了一下HTML5 Web Storage Good ,很方便，很实用...在HTML5中，除了Canvas元素之外，另一个新增的非常重要的功能就是可以在客户端本地保存数据的Web Storage功能，我们知道，在HTML4中可以使用Cookies在客户端保存诸如用户名等等简单的用户信息，但是长期的实际使用下来，人发现用Cookie储存永久数据存在以下问题：大小：cookies的大小被限制在4K。带宽：cookies是随HTTP事务一起被发送的，因此会浪费一部分发送cookie时使用的带宽。复杂性：要正确地操纵cookie是很困难的。在这种情况下，在HTML5中重新提供了一种在客户端本地保存 阅读全文
posted @ 2013-03-21 11:55 kingwell 阅读(306) 评论(0) 推荐(0)
利用微数据、微格式进行SEO优化——提高搜索引擎收录展示效果【转】
摘要：利用微数据、微格式进行SEO优化——提高搜索引擎收录展示效果最近，Google、Bing和雅虎宣布正式推出 schema.org，这是由Google、Bing和雅虎共同发起的一个新项目，将为网页上的结构化数据标记建立并提供一套通用模式。 Schema.org旨在成为网站站长的一站式资源，方便为自己的网页添加标记，以帮助各搜索引擎更好地了解网站。在此基础上我参考文档和51CTO的教程建立了我的个人页面：http://meyourtion.com，其中就包含各项微标记信息。谷歌支持结构化标记已经有一些年头了。2009年，谷歌介绍了丰富网页摘要，以更好地展现那些描述人物或含有评论的搜索结果。自此之后 阅读全文
posted @ 2013-03-20 16:57 kingwell 阅读(584) 评论(0) 推荐(0)
用HTML5本地数据库制作联系人
摘要：<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>用HTML5本地数据库制作联系人</title><style type="text/css">/* -----CSS Docuemnt----- Version: 1.0 Author: kingwell Email: jinhua.leng#gmail.com Date: 2012-5-16 Global Styl 阅读全文
posted @ 2013-03-20 15:16 kingwell 阅读(3980) 评论(1) 推荐(1)
HTML5 Geolocation API获取地理位置
摘要：Geolocation API纬度：经度：精确度：<!DOCTYPE HTML><html lang="cn"><head><meta charset="UTF-8"><title>Geolocation API</title><script type="text/javascript">var totalDistance = 0.0;var lastLat = null;var lastLong = null;function toRadians(d 阅读全文
posted @ 2013-03-20 14:56 kingwell 阅读(373) 评论(0) 推荐(0)
JS计算时间差
摘要：<!DOCTYPE HTML><html lang="en-us"><head><meta charset="utf-8"/> <title>JS计算时间差</title> <meta name="generator" content="kingwell"/> <meta name="author" content="kingwell"/> <meta name=" 阅读全文
posted @ 2013-03-20 14:50 kingwell 阅读(531) 评论(0) 推荐(0)
彻底解决IE6下PNG半透明的问题
摘要：IE6曾是PC上的霸主，它的影响相当大，虽然现在IE10都出来了，但是IE6在市场仍然有一定的份额，但是IE6存在很多问题，最明显的莫过于以PNG-24的支持，这是一个很头痛的问题，如果要用一张PNG格式的图片在IE6下会出现灰色的背景，很是无语，不过现在不用烦恼了，下面这些代码帮你彻底解决问题，让你从此又爱上 ...^_^下载代码 Kingwell 阅读全文
posted @ 2012-10-24 13:37 kingwell 阅读(393) 评论(0) 推荐(0)

1 2 下一页