随笔分类 -  CSS+HTML

css,html前端的学习
完整学习使用CSS动画【翻译】
摘要：注：原文有较大改动 使用keyframes, animation属性，例如timing, delay, play state, animation-count, iteration count, direction, fill mode以及will-change等等 创造动画魔法 作为设计者、开发人 阅读全文
posted @ 2017-02-28 15:32 Ziv小威 阅读(489) 评论(0) 推荐(0)
Web前端的状态管理（State Management）
摘要：背景 我相信很多朋友跟我一样，初次听到什么Flux, Redux， Vuex，状态管理的时候是一脸懵逼的。因为在外面之前前端大部分开发的时候，根本没有那么多的概念。自从ReactJS火爆后，什么Flux, Redux，React全家桶是一套一套接踵而来。搞的很多开发者甚是头大。所谓的ReactJS全 阅读全文
posted @ 2017-01-08 22:55 Ziv小威 阅读(1154) 评论(1) 推荐(0)
实现图片的异步加载
摘要：图片异步加载功能是现在web中非常常见的一个针对web做优化的方法。尤其是在移动端，面对大量的图片列表的时候，如果没有做相应的优化，会直接导致页面滑动和加载的卡顿，而且用户会莫名的发现当前应用占用的流量会很大，因为他可能都没有浏览到很多图片，而程序就自动加载了所以的图片，对于一个流量吃紧的人来讲，这 阅读全文
posted @ 2016-06-27 11:06 Ziv小威 阅读(1376) 评论(0) 推荐(1)
Cordova开发总结(插件篇）
摘要：最近刚刚做完一个用Cordova开发了一款电子商务的应用。在选用Cordova前，我有考察过，国内的Appcan, Apicloud等等的解决方案。其实Appcan，ApiCloud的混合方案挺完整的，从开发，框架，到打包测试，数据统计都包含了，但是我还是更倾向于开源的Cordova, 我相信开源社 阅读全文
posted @ 2016-06-24 15:01 Ziv小威 阅读(4717) 评论(0) 推荐(0)
使用iScroll实现上拉或者下拉刷新
摘要：上拉或者下拉刷新的需求在移动端是非常常见的需求，大部分情况下，实现这个效果都使用网上现有的解决方案，例如有人使用swiper这个插件， 也有人使用iScroll这个滚动插件。本文的示例是利用iscroll实现的下拉刷新效果。 iScroll简介 iScrool是目前最成熟的自定义滚动解决方案之一，在 阅读全文
posted @ 2016-06-07 12:00 Ziv小威 阅读(15306) 评论(0) 推荐(0)
实现checkbox组件化(Component)
摘要：之前我写了一篇自定义checkbox的文章，通过css3实现自定义的checkbox，并没有使用当今流行的Reactjs, 或者Vuejs之类的进行组件化。但是很显然，这样封装的checkbox组件复用的时候非常麻烦。如果在新项目中使用的话，可能需要同时拷贝css和html文件进行整合。从html语 阅读全文
posted @ 2016-05-19 20:16 Ziv小威 阅读(3866) 评论(0) 推荐(0)
利用javascript和WebGL绘制地球 【翻译】
摘要：WebGL，Three.js 实现3D 地球模型 阅读全文
posted @ 2015-03-22 01:38 Ziv小威 阅读(5687) 评论(2) 推荐(2)
HTML5 全屏特性
摘要：全屏功能是浏览器很早就支持的一项功能了，可以让你页面中的video, image ,div 等等子元素实现全屏浏览，从而带来更好的视觉体验，来看看怎么使用吧。先来看看有哪些API和事件支持。API// 元素请求全屏显示 element.requestFullscreen()// 检测文档的当前状态... 阅读全文
posted @ 2015-01-24 21:44 Ziv小威 阅读(2275) 评论(0) 推荐(1)
Hybird App ( 混合模式移动应用)开发初体验
摘要：最近1，2个月一直都尝试开发一款Hybird app，遇到了很多问题，谈谈自己的体会。Hybird app (混合模式移动应用），它利用例如安卓端webview组件+HTML5内嵌的方式混合的方式开发的移动应用，好处显而易见，由于内嵌的是Html5, 所以跨平台，扩展性，开发成本都是很不错的优势。H... 阅读全文
posted @ 2014-10-28 18:27 Ziv小威 阅读(2359) 评论(6) 推荐(1)
HTML5实现图片文件异步上传
摘要：利用HTML5的新特点做文件异步上传非常简单方便，本文主要展示JS部分，html结构。下面的代码并未使用第三发库，如果有参照，请注意一些未展现出来的代码片段。我这边的效果预览：1.文件未选择 2.文件已选择HTML代码部分： 思路：下面代码中我利用css的z-index属性将input="f... 阅读全文
posted @ 2014-05-26 15:30 Ziv小威 阅读(15649) 评论(4) 推荐(2)
给大家推荐一款高大上的代码高亮插件（sublime，github风格）——highlight.js
摘要：经常在一些大神博客里面看到非常好看的高亮代码，有sublime风格，GitHub风格等等。毫无疑问，好的高亮代码插件可以不仅仅让你的博文显得更高大上，更重要的是舒适的阅读体验。经过我在网上的一番搜罗，终于找到了一款非常赞的高亮插件，先来看看效果吧!1.Javascript 效果//检测URLf... 阅读全文
posted @ 2014-04-15 11:25 Ziv小威 阅读(4750) 评论(9) 推荐(5)
JS实现星级评价
摘要：说明： 本方法采用了Jquery库，暂时检测兼容IE8版本。本示例的2种颜色的星星都是放入了一张png图片当中，当然还有其他的一些实现思路。本示例展示的情况是当前页面只有一个星级评价的情况。思路： 通过对星级显示元素的，mouseenter,mouseout,click 三个事件的监听，从而星星显示的个数。其中我用了2个变量（temp_value,choice_value）来存放当前选定星级的值和当前临时的星级值； temp_value : 临时的星级值； choice_value : 选择的星级值； mouseenter : 鼠标移入，获取当前所在的星星级别赋予temp_va... 阅读全文
posted @ 2014-01-09 16:55 Ziv小威 阅读(4364) 评论(2) 推荐(2)
利用link标签的disabed属性大面积的对其他标签元素的CSS样式进行替换操作
摘要：由于平时对元素样式的控制基本上只是3，4个，所以一般用Jquery的时候直接使用$(element).css();这个方法，或者使用$(element).addClass()方法完成样式操作。对于小范围元素的操作来说，这是非常方便的。但是当针对众多元素同时进行操作的时候呢，这2个方法让代码看起来就比较重量级了，代码的可读性也比较小。 过程起初，我先尝试了一种方式，就是在JS代码中动态插入link标签，引入新的样式文，但是很遗憾的是根本就不起作用，因为那个时候浏览器已经把样式渲染到页面元素了，新引入的样式文件根本就不会被浏览器执行渲染。所以我选择了另外一种方式，就是把2个样式文件同时先加载... 阅读全文
posted @ 2013-11-23 11:50 Ziv小威 阅读(1333) 评论(0) 推荐(0)
作为WEB工程师，我们是不是应该积极的推进一下用户浏览器的使用体验？
摘要：为什么会写这篇文章，其实是有原因的。目前我工作的公司的Web网站仅支持IE8以上的版本，然后我们经常接到客户的反馈，说为什么在他浏览器当中flash怎么显示不了，或者为什么在他浏览器中有这样那样的问题。有时候的确是一件很恼怒的事情。 我很想知道为什么在中国，使用IE6浏览器的人为什么还有这么多，为什么用户不愿意升级到体验更好，使用更方便的浏览器当中。其实我仔细想想，毕竟用户打交道的web都是出自我们之手，虽然很多用户对有些互联网产品并不了解，但是我们作为开发者是可以比较好的去引导用户去提升使用体验。这无论是对用户，产品，开发者来说都是有益的。下图是13年CNZZ关于浏览器使用的一个统计：... 阅读全文
posted @ 2013-11-14 15:24 Ziv小威 阅读(2840) 评论(49) 推荐(3)
详解CSS样式的position属性
摘要：平时在写css样式的时候position是我们比较常用的一个属性。有时候会弄不清其几个属性值的真正区别。不过用的时间久了，也就慢慢的明白了。不过其实想用好position有时候还是需要些技巧的。写篇博文总结下自己。position的作用：用于设置对html元素的定位方式 position属性的值：值名称描述staticposition的默认值，设置此属性时，元素按照正常的流式布局往下排列inherit继承父元素的position值relative相对于其他元素的定位absolute相对于采用static定位的父元素的绝对定位fixed相对于浏览器的绝对定位　备注：如果给元素才用了top,... 阅读全文
posted @ 2013-06-09 13:09 Ziv小威 阅读(494) 评论(2) 推荐(0)