网页前端设计

说到本地存储，这玩意真是历尽千辛万苦才走到HTML5这一步，之前的历史大概如下图所示：最早的Cookies自然是大家都知道，问题主要就是太小，大概也就4KB的样子，而且IE6只支持每个域名20个cookies，太少了。优势就是大家都支持，而且支持得还蛮好。很早以前那些禁用cookies的用户也都慢慢的不存在了，就好像以前禁用javascript的用户不存在了一样。 userData是IE的东西，垃圾。现在用的最多的是Flash吧，空间是Cookie的25倍，基本够用。再之后Google推出了Gears，虽然没有限制，但不爽的地方就是要装额外的插件（没具体研究过）。到了HT...未完，继续阅读→

在这篇文章中将给大家分享12个有关于JavaScript的小技巧。这些小技巧可能在你的实际工作中或许能帮助你解决一些问题。使用!!操作符转换布尔值有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值，如果存在就返回true值。为了做这样的验证，我们可以使用!!操作符来实现是非常的方便与简单。对于变量可以使用!!variable做检测，只要变量的值为:0、null、" "、undefined或者NaN都将返回的是false，反之返回的是true。比如下面的示例：function Account(cash) {this.cash = cash;this.hasMoney = !!cash;}var account ...未完，继续阅读→

最近做的一个项目需要图片批量上传，研究了一下，终于找到了一个不错的上传控件Web UploaderWebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。采用大文件分片并发上传，极大的提高了文件上传效率。演示：http://fex-team.github.io/webuploader/getting-started.html下载：http://fex-team.github.io/webup...未完，继续阅读→

正则表达式，一个十分古老而又强大的文本处理工具，仅仅用一段非常简短的表达式语句，便能够快速实现一个非常复杂的业务逻辑。熟练地掌握正则表达式的话，能够使你的开发效率得到极大的提升。正则表达式经常被用于字段或任意字符串的校验，如下面这段校验基本日期格式的JavaScript代码：var reg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/; var r = fieldValue.match(reg); if(r==null)alert('Date format error!');下面是整理的，在前端开发中经常使用到的20个正则表达式。1 . 校验密码强度密码的强度必须是...未完，继续阅读→

最近在做个小字体的内容展示，发现一个奇怪的问题，在Chrome内核的浏览器里，最小字体是12px，比这再小的字体都被统一显示了12px了。在网上搜索了一下才知道。因为中文字体在小于12px的情况下会遇到阅读困难的问题，所以Chrome把最小的字体设置成了12px了。解决的办法有改配置和加样式两种，这里就介绍一下样式修改的方式，因为你不可能要求所有访问都都改浏览器配置吧？哈哈~在网页样式里加上这一句后，就可以显示更小的字体了。-webkit-text-size-adjust:none;未完，继续阅读→

1、前言：相信用过window.open的小伙伴们都遇到过被浏览器拦截导致页面无法弹出的情况；我们换下思路，什么情况下的新页面弹出才不会被浏览器拦截呢？比如<a>标签这种就不会；那么我们只要模拟下用户去主动点击这个<a>标签就不会有拦截的问题了。当然并不是点击a的链接，而是点击a里面的内容才会有效果，不信你可以试试。效果图如下：2、主要实现代码HTML部分：<a href="" id="linka" target="_blank" style="display:none"><span id="linkspan">test&...未完，继续阅读→

一个CSS的px值转rem值的Sublime Text 3自动完成插件。本文件结尾附使用演示链接。插件效果如下：安装 克隆项目   https://github.com/hyb628/cssrem.git进入packages目录：Sublime Text -> Preferences -> Browse Packages...复制下载的cssrem目录到刚才的packges目录里。重启Sublime Text。配置参数参数配置文件：Sublime Text -> Preferences -> Package Settings -> cssrempx_to_rem - px转rem的单位比例，默认为40。max_rem_fraction_length - px转rem的小数部分的最大长度。默认为6。av...未完，继续阅读→

1、前言本插件效果：随滚动条下拉浮动定位菜单,菜单固定到顶部。兼容了移动端+PC端（IE6+,chorme,firfox等主浏览器），使用起来特别方便。效果图如下：2、使用scrollfix插件;(function($) { $.fn.scrollfix = function(mtop, zindex, height) { var nav = $(this),obj=document.getElementById($(this).attr("id")), mtop = mtop, zindex = zindex, dftop = nav.offset().top,//dftop = nav.offset().top - $(window).scrollTop(), dfleft = nav.offset().left - $(window).s...未完，继续阅读→

一、前言2010年写过一篇《js多个tab切换简单不需要在body内添加事件》的文章，近些年来从事前端事业以来，对于js的优化也是越来越关注，所以做了一些对tab事件的理解及优化，望大家吻喷。效果图如下：二、tab实现的思路1、首页是tab菜单及tab内容的理解是一一对应关系，而且位置是顺序是固定的也就是说当前第几个tab菜单对应的是第几个tab内容，这样是为了省略很多参数及不必要的HTML代码；2、js控制tab菜单：对于tab菜单而言,只需要控制点击后的菜单为当前选中效果，然后其它的菜单则是默认的没有选中效果；3、js控制tab内容：对于tab内容...未完，继续阅读→

前言随着计算机的发展，Web富应用时代的到 来，Web 2.0早已不再是用div+css高质量还原设计的时代。自Gmail网页版邮件服务的问世开始，Web前端开发也开启了新的纪元。用户需求不断提高，各 种新的技术层出不穷，前端工程师的地位也越来越重要。然而任何事物都是有两面性的，随着前端技术的发展，前端业务越来越繁重，这大大增加了JS代码量。因 此，要提高Web的性能，我们不仅需要关注页面加载的时间，还要注重在页面上操作的响应速度。那么，接下来我们讨论几种能够提高JavaScript效率 的方法。 一、从JavaScript的作用域谈起当JavaS...未完，继续阅读→

一、本文概述想必大家在做效果的时候经常会碰到文字会垂直距中的效果，单行、多行混合的情况，单行距中已无问题，height,line-height又或者padding:上下相同即可。在网上搜索到不少资料，本人实践后的经验是父级标签属性：display:table-cell;vertical-align:middle;距中标签元素：vertical-align:middle;display: inline-block;使用以上两个技巧即可以使得标签内的文字或图片垂直距中。当然这些使用的同时会有些属性会干扰到垂直距中，如：position中的absolute,fix（定位）,和flaot中的left,right（浮动）如果还有其它属性请通知我!...未完，继续阅读→

在做h5移动页面，相信大家一定碰到过页面已经打开，但是里面的图片还未加载出来的情况，这种问题虽然不影响页面的功能，但是不利于用户体验。抛开网速的 原因，解决这个问题有多方面的思路：最基本的，要从http请求合并，缓存管理，图片压缩等方面做性能优化；另外就是可以对页面里用到的所有图片做预加载 的处理，当用户打开页面的时候不立即显示第一屏，而是先显示资源加载效果，等到加载完毕，再来显示页面的主内容，这样就能解决那个问题。虽然这种加载效果 占用了用户的浏览时间，但是我们可以把它做的好看有趣一点，所以也不会影响...未完，继续阅读→

css3我在5年之前就有用了，包括公司项目都一直在很前沿的技术。最近在新的项目中,用了大量的css3动画，但是真的沉淀下来仔细的去深入css3动画的各个属性发现还是很深的，这里就写下关于帧动画steps属性的理解我们知道css3的animation有八个属性animation-nameanimation-durationanimation-delayanimation-iteration-countanimation-directionanimation-play-stateanimation-fill-modeanimation-timing-function其中1-7大多都有介绍，但是animation-timing-function是控制时间的属性在取值中除了常用到的 三次贝塞尔曲线 以...未完，继续阅读→

  工欲善其事，必先利其器，没有好的工具，怎么能高效的开发出高质量的代码呢？本文为各ASP.NET 开发者介绍一些高效实用的工具，涉及SQL 管理，VS插件，内存管理，诊断工具等，涉及开发过程的各个环节，让开发效率翻倍。 Visual StudioVisual Studio Productivity Power tool: VS 专业版的效率工具。Web Essentials: 提高开发效率，能够有效的帮助开发人员编写CSS， JavaScript, HTML 等代码。MSVSMON: 远程Debug 监控器 (msvsmon.exe) 是一种轻量级的应用程序，能够远程控制VS来调试程序。在远程调试期间，VS 在调试主机...未完，继续阅读→

前不久写过一篇关于上拉加载的文章【jq滚动到底部自动加载数据实例】，使用挺流畅的，但是使用过程也是令人心酸的，加载完后点击一产品个进去后，发现返回时还是重新加载而且是置顶，也就是说前面加载的内容白加载了，针对于这个BUG我看了很多网站都存在这个问题，http://m.suning.com也会，taobao返回可以到达加载后的效果,但是数据依然是重新加载。按我解理的思路应该是他在跳转到详细页面的时候可能保存两个值：1、是滚动条的高度，2、最后加载的页数。这样一来页面返回的时候只需要调用这两个值再进行处理就可以达到效果了，但是我...未完，继续阅读→

avaScript的event对象中event.target指代的是:触发事件的元素event.currentTarget指代的是:事件绑定的元素<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="test"> <span>aaa</span> <span>bbb</span> <span>ccc</span> </div> <...未完，继续阅读→

现在字体图标已经渐渐代替了图片了，移动端用起来也很方便。使用了字体文件来显示矢量的图标，为了能在IIS上正常显示图标，可以通过增加iis的MIME-TYPE来支持图标字体文件下面就把IIS增加svg、eot 、woff、otf 、ttf 等字体格式文件的MIME。增加以下两种文件类型即可：.svg image/svg+xml.woff application/font-woff 我把其它几种也写在下面，供以后学习：.eot application/vnd.ms-fontobject.otf application/octet-stream.ttf application/octet-stream（完）未完，继续阅读→

1、开篇：本实例主要是结合了小图片左右滚动和一个图片放大的特效。想偷懒的偷去用，也可以根据需求完善成你自己想的的效果。（文章底部附源文件下载）2、效果如下图所示3、Html源代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />...未完，继续阅读→

1. 引言原文：bitsofcode的HOW POSITIONING CSS PROPERTIES INTERACT译者：爱前端，乐分享的FedFun，前端痴王海庆的博客。译言：来看下CSS标布局情况下，定位相关属性之间的相互作用，意译为主，不当之处敬请指正。阅读建议5分钟。2. 正文在定位元素时，我们经常用到四个属性display、position、float和偏移属性top right bottom left等。但不是在每个元素上都可以同时应用这四个属性，一些特殊的值组合会覆盖其他属性的应用，这些组合有：display: noneposition: absolute或position: fixedfloat: left或float: rightposition: static接...未完，继续阅读→

本实例效果是由jQuery实现的超牛的背景移动导航菜单效果，菜单效果设计非常沉稳大方,鼠标悬停时菜单项高亮显示。难点在一个要选中为当前效果同时指向子菜单时又不失去当前效果。本实例效果图如下：源代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; ch...未完，继续阅读→