随笔分类 - WEB前端
摘要：本鱼表示偶已经不会取标题了。。。当时写这篇文章主要是想探讨一下优雅降级和渐进增强的区别，按照正常的逻辑思维，不管是降级还是增强，应该对于效果是没什么区别的，因为后者会覆盖前者，但今天无意看到张鑫旭的一篇文章，关于CSS3属性的书写顺序（10年的，原谅我的孤陋寡闻T_T），标准的css3属性和带web...
阅读全文
摘要：之前在看一些css3效果demo的时候，发现有些写css3属性时，兼容性的写法顺序不太一样，比如transition属性，有些把transition放在前面有些是放在后面，当然这也有可能包含了coder个人的习惯或是强迫性>"<，比如下面这两种：.transition{ -webkit-trans...
阅读全文
摘要：这两天碰到的问题，IE6下某个js生成的a节点，设置了href="javascript:;"，点击时触一个ajax请求，但在IE6下就是无法执行succese里的内容，所以就用setTimeout设置了个延时执行暂且可以解决问题。后来同事（感谢勇哥和赵美人的大力支持~）用fiddler查看时提示请求...
阅读全文
摘要：ps:每过一段时间就会发觉自己懂的越来越少，打开编辑器的时候不知道从何入手。兴许是过于急于求成，总没有系统地去对这门语言进行学习，囫囵吞枣，只想着能够解决工作需求。是时候让自己重新出发，从零开始，一页一页地把书看完，不浮躁，不安逸转自：http://kb.cnblogs.com/page/191787/ 首先要说明的是，咱现在不是高手，最多还是一个半桶水，算是入了JS的门。 谈不上经验，都是一些教训。 这个时候有人要说，“靠，你丫半桶水，凭啥教我们”。您先别急着骂，先听我说。 你叫一个大学生去教小学数学，不见得比一个初中生教得好。因为大学生早已经过了那个阶段，都忘记自己怎么走过来的了。...
阅读全文
摘要：转自知乎上的回答：http://www.zhihu.com/question/20077745解答一：层叠指的是样式的优先级，当产生冲突时以优先级高的为准。1. 开发者样式>读者样式>浏览器样式（除非使用!important标记 ）2. id选择符>（伪）类选择符>元素选择符3. 权重相同时取后面定义的样式以下是一段经典的html，三个类名分别为模块、标题和正文。大部分html页面都可以由这种结构嵌套或者累加而成。解答二：CSS层叠是指CSS样式在针对同一元素配置同一属性时，依据层叠规则（权重）来处理冲突，选择应用权重高的CSS选择器所指定的属性，一般也被描述为权重高的
阅读全文
摘要：在项目里碰到需要把类似'450000'的数字转换为会计记账所用的格式，'450,000.00'，分隔千分位和小数点后不够两位数时自动补齐，已下记录几种实现的方式ps:如果不考虑后面的小数点，最快捷的方法（by:javascript后花园（原罗浮宫3群））："12345678".replace(/[0-9]+?(?=(?:([0-9]{3}))+$)/g,function(a){return a+','}); //输出 12 345 6781.用循环的方式实现（百度上淘来的） function formatNum(str){ v
阅读全文
摘要：在前端实现美工图的时候，总会碰到一些设计字体，系统里面一般不会自带的。通常情况下多数用以图换字的方式实现，这种方法也很实现大部分的需求。but，总有些例外存在，比如当你需要对这些文字进行大小缩放的操作，但如果缩放图片时可能会失真，这里就可以用自定义字体了。but，又有一个但是（以下文字引用http://www.nowamagic.net/librarys/veda/detail/1356）在网页中嵌入非系统自带字体，虽然技术上能实现，但是对国内来说，没有太大的实际意义，因为一个中文体文件起码20M+，而且各个浏览器支持的字体文件还都不一样，也就是说，在服务器端必须有2-3个不同格式的字体文件，
阅读全文
摘要：截图：（如果你想换成星星，直接修改样式就可以了，提示的描述跟分数都是在插件里设置）demo:猛击这里代码有多简单就不说了，本来是找的插件，最后发现一个一个筛选也没找着符合需求的，还是自己硬着头皮动手。写得比较糙，结构上可能不是特别灵活，样式都在demo里/*** aLi: 设置星星或等级的对象 aMsg: 设置提示描述 hinText: 设置显示描述的对象 val: 设置分数 valContent: 设置获取分数或结果的对象 调用方法： $('.num-rate').rating({ aLi: '.num-rate li', oUl:'...
阅读全文
摘要：很多公司到了年底都会做一些抽奖活动来刺激、吸引、粘住客户，比如抽奖转盘活动。前几天用一个jqueryRotate插件实现了转盘的效果。比起那些很炫丽的flash是稍逊点，但也基本实现了需求效果图：(也可以看线上的效果：http://www.mbabycare.com/course/lottery)：实现这个其实蛮简单的，转动的效果用的jqueryRotate插件，所以只要判断每个奖荐对应的角度，然后设置指针的转动角度就可以了。比如关键的是jqueryRotate这个插件的用法。jqueryRotate的资料：支持Internet Explorer 6.0+ 、Firefox 2.0 、Safa
阅读全文
摘要：蛮优秀的一段效果代码，可以上下左右滚动，收藏了<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; c
阅读全文
摘要：视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为今年网页设计的热点趋势，越来越多的网站应用了这项技术。不明白的可以先看看eBay上的效果：http://www.ebay.com/new/其实就是固定背景不让它随着滚动轴移动，但包含背景的容器是跟着滚动的，所造成的视觉差异看起来就像跟转换场景一样。（这个解释别嫌混乱…）在CSS中定义背景滚动方式的属性是backgroud-attacthmentbackground-attachment-- 定义背景图片随滚动轴的移动方式取值: scroll | fixed | inh
阅读全文
摘要：说到css中的font-family，相信很多朋友经常用，但不知道当你遇到引用中文字体的时候你会怎么写？最近特别关注了下，发现最常用的基本有三种类型：1、直接中文；2、英文形式；3、unicode码；前面两种形式很好理解，unicode码是什么意思呢？下面看基本定义:Unicode（统一码、万国码、单一码）是一种在计算机上使用的字符编码。它为每种语言中的每个字符设定了统一并且唯一的二进制编码，以满足跨语言、跨平台进行文本转换、处理的要求。更多内容请查看百度百科对Unicode的介绍。介绍完方案，再谈下使用。之前在看玉伯写的一篇文章《中文字体在 CSS 中的写法》 中提到：font-family
阅读全文
摘要：看名字应该知道是干嘛用了吧。一个jquery开发的标签功能加强插件，可以生成或删除标签，还能对输入重复标签进行检查，和JQuery autocomplete插件配合实现自动完成功能。官网：http://xoxco.com/projects/code/tagsinput/截图：(下面是翻译了官网上的用法，英文不是很好，有能力的尽量看官网吧)首先，引用下面两个文件<script src="jquery.tagsinput.js"></script><link rel="stylesheet" type="text/cs
阅读全文
摘要：基于jquery的文件上传控件，支持ajax无刷新上传，多个文件同时上传，上传进行进度显示，删除已上传文件。要求使用jquery1.4或以上版本，flash player 9.0.24以上。有两个版本，一个用flash,一个是html5。html5的需要付费~所以这里只说flash版本的用法。官网：http://www.uploadify.com/控件截图：用法：首先引用下面的文件<link rel="stylesheet" type="text/css" href="uploadify.css"><script t
阅读全文
摘要：jquery validate是一个基于jquery开发的验证框架，调用和扩展都很方便官网：http://bassistance.de/jquery-plugins/jquery-plugin-validation名称返回类型描述validate(options)返回:Validator验证所选的FORMvalid()返回:Boolean检查是否验证通过rules()返回:Options返回元素的验证规则rules("add",rules)返回:Options增加验证规则rules("remove",rules)返回:Options删除验证规则remov
阅读全文
摘要：本文所使用的技巧是用了一条 Internet Explorer 的 CSS 表达式 (expression) 。你不可以直接使用该表达式，因为它可能会因为缓存而不更新。解决这一点的最简单的方式是使用 eval 包裹你的语句。如何解决“振动”的问题？显然 IE 有一个多步的渲染进程。当你滚动或调整你的浏览器大小的时候，它将重置所有内容并重新渲染页面，这个时候它就会重新处理 CSS 表达式。这会引起一个丑陋的“振动” bug ，在此处固定位置的元素需要调整以跟上你的(页面的)滚动，于是就会“跳动”。解决此问题的技巧就是使用 background-attachment:fixed 为 body 或
阅读全文
摘要：id 的选择器为什么要这么写 li#first？一. 一个疑问？看到过一篇关于 CSS 的文章，其中说到：对于类似 li#first 这样的选择器，由于使用 id 就已经可以确定元素了，没有必要再写上前面的 li, 直接写上 #first 这样的 id 选择器就可以了。听起来说得不错，简单测试一下也没有问题。可是，我们经常看到带有元素名称的选择器，例如，在微软的项目模板中就有大量的带有元素名称的选择器，如果没有用的话，为什么要这样写呢？ul#navlist{ float: right;} ul#navlist li{ display: inline;}二. 问题出现了！写一个简单的...
阅读全文
摘要：用jquery模拟一淘上面的搜索下拉的功能，利用css3做箭头的动画效果。JS代码：/* * 模拟搜索下拉select * 默认调用方式：$(el).setSelect({ * optionList: [], //这里是下拉的选项，如['aa','bb']* hiddenInput: '#optionHidden', //隐藏的input获取选中后的值，供表单提交时传值* getOption: '#sOptionBtn',* callback: function(option){}* }) **/(function ($) { $
阅读全文
摘要：配图：近日帮朋友设计的瀑布流 taobao站 美丽格子 ^__^。作为设计师，应该将设计稿的最完美一面表现给其他人看。就像jobs 说的一样，好设计师，不会使用烂木头作为衣柜的背板。虽然你最终的设计稿很完美，但是你的psd让人觉得很糟糕，同样会让之后的切图仔觉得你不是个优秀的设计师，对不起死去的jobs哇～ XD在企鹅村玩代码玩了半年多，玩起psd来都有点生疏了。最近对设计MM 给的psd文件产生了点暧昧。有感悟抒发一下。看看是不是都有一样的困惑和同样的问题。如果切图仔死了，死因很可能是一份可怕的psd 1. psd 文件尺寸 竟然有71M，(也许看着觉得还好，但是一开ps 就杯具了，内存不够
阅读全文
摘要：★列出display的值 可用值 值的说明block 象块类型元素一样显示。none 缺省值。向行内元素类型一样显示。inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。list-item 象块类型元素一样显示，并添加样式列表标记。table-header-group 显示在任何表格行和行组合之前，在头部标题之后。table-footer-group 显示在任何表格行和行组合之后，在底部标题前。★清除浮动与闭合浮动的不同点 (http://www.cnblogs.com/mofish/archive/2012/05/14/2499400.html)★如何为元素绑定事件（
阅读全文