2015年03月_natalie86

转载 Web移动开发：前端开发学习资源集合

成为优秀的 Web 移动开发者之前端开发学习资源集合，本文收集了迄今最前面的 HTML、CSS、JavaScript、Ruby on Rails 等学习资源网站、工具信息。　　HTML 和 CSS　　30 Days to Learn HTML and CSS　　想学习 HTML 和 CSS 却有不知如何开始？"30 天教你学 HT

2015-03-30 20:49:00 644

转载 100 行代码实现的 JavaScript MVC 样式框架

使用过 JavaScript框架（如 AngularJS, Backbone 或者Ember）的人都很熟悉在UI（用户界面，前端）中mvc的工作机理。这些框架实现了MVC，使得在一个单页面中实现根据需要变化视图时更加轻松，而模型-视图-控制器（mvc）的核心概念就是：处理传入请求的控制器、显示信息的视图、表示业务规则和数据访问的模型。　　因此，当需要创建这样一个需要在单个页面中实现切换

2015-03-30 20:47:43 541

转载 HTML5实现类似刮刮卡的功能

HTML5实现类似刮刮卡的功能注意要点设置：1.设置用户缩放：user-scalable=no|yes[java] 复制代码2.禁止拖动：[java]document.ontouchmove = function(e){ e.preventDefault(); }; //文档禁

2015-03-30 20:45:55 431

转载 12种炫酷HTML5 SVG和CSS3表单浮动标签特效

这是一组效果非常炫酷的SVG和CSS3表单浮动标签特效。这组浮动标签特效共12种效果，这些浮动标签效果部分在元素的伪元素上使用CSS transitions和CSS animations完成，一部分则使用SVG来制作变形动画。在线演示下载：201503191554.zip 使用方法 HTML结构

2015-03-30 20:34:14 1649

转载 8个非常神奇的HTML5动画和应用

今天我们继续来为大家分享一些效果相当不错的HTML5动画和实用的HTML5应用，如果你对HTML5技术和jQuery等相关前端技术感兴趣，欢迎继续关注我们后续推荐的文章。本文介绍的8个非常神奇的HTML5动画和应用，希望你会喜欢。1、HTML5 SVG 3D蝴蝶飞舞动画这次我们要分享的这款HTML5动画简直就是逆天，利用SVG制作的3D蝴蝶飞舞

2015-03-30 20:30:46 769

转载 Win10预览版10041：IE11触控、HTML5新功能开启

3月19日消息，刚刚发布的Win10预览版10041快速更新，虽不含有斯巴达浏览器，但用户可以通过IE11浏览器的“实验功能”来体验斯巴达浏览器的新引擎和新功能。这次更新后，用户可以体验IE11新的触控功能以及HTML5功能。本次在IE11中新加入了如下功能：• 支持触摸事件API以及相关协同操作提升。• 支持HTML5日期相关输

2015-03-30 20:29:35 540

转载 24个 HTML5 & CSS3 下拉菜单效果及制作教程

下拉菜单是一个很常见的效果，在网站设计中被广泛使用。通过使用下拉菜单，设计者不仅可以在网站设计中营造出色的视觉吸引力，但也可以为网站提供了一个有效的导航方案。使用HTML5 和 CSS3 可以更容易创造视觉上充满吸引力的下拉菜单。A Flash Blue Menu在线演示源码下载Fancy Rolling Navigat

2015-03-30 20:27:18 2434

转载 231个javascript特效分享（上）

1.文本框焦点问题onBlur:当失去输入焦点后产生该事件onFocus:当输入获得焦点后，产生该文件Onchange:当文字值改变时，产生该事件Onselect:当文字加亮后，产生该文件点击时文字消失，失去焦点时文字再出现2.网页按钮的特殊颜色style="3.鼠标移入移出时颜色变化onMouseOver=this.style.

2015-03-30 20:24:30 628

转载 231个javascript特效分享 (中)

107.页面翻转//108.滚屏parent.scroll(x,y);////109.改变状态栏self.status ="";//110.改变窗口大小window.resizeTo(200,300);//111.改变鼠标样式styleBODY{CURSOR: url('mouse.ani');SCROLLBAR-BASE-COLOR

2015-03-30 20:22:30 642

转载 231个javascript特效分享（下）

199.模式窗口父窗口var url="aaa.jsp";vardata=showModalDialog(url,null,"dialogHeight:400px;dialogHeight:600px;center:yes;help:No;status:no;resizable:Yes;edge:sunken");if(data)alert(data.value

2015-03-30 20:20:19 397

转载 JS节点查找笔记

要想获得未曾拥有的东西，就必须付出未曾有过的努力。习惯了JQ的方便DOM节点查询，或许你已经忘记了js原生的一些查询操作了吧，下面列出js的节点查询，方便要用到的时候能快速找到：html结构：div class="main"> div class="div1">div> div id="oDiv" class="div2"

2015-03-30 20:18:11 465

转载 JavaScript数据访问性能优化方案

经典计算机科学的一个问题是，数据应当存放在什么地方，以实现最佳的读写效率。数据存储是否得当，关系到代码运行期间数据被检索到的速度。在Javascript中，此问题相对简单，因为数据表现方式只有少量方式可供选择。在Javascript中，有四种基本的数据访问位置： Literal values 直接量直接量仅仅代表自己，而不存储于特定的位置。

2015-03-30 20:16:03 571

转载 Midnight.js – 实现奇妙的固定头部切换效果

Midnight.js 是一款 jQuery 插件，在页面滚动的时候实现多个头设计之间的切换，所以你总是有一个头与它下面的内容层叠，看起来效果很不错。 Midnight.js 可以让你轻松实现这种切换固定头的效果。在线演示插件下载

2015-03-30 20:14:02 516

转载 10个经典实用的HTML5图表动画应用

今天我们要来分享另外一种类型的HTML5动画：HTML5图表应用。图表在网页中应用十分广泛，尤其是后台的统计功能，更能体现出图表的强大之处。本文将介绍一些比较实用的HTML5图表动画，有些结合jQuery，有些是直接基于Canvas，一起来看看吧。1、超酷HTML5 Canvas图表应用Chart.js 之前我们已经为大家分享过很多HTML5图表

2015-03-30 20:10:47 921

转载 HTML5 Canvas动画效果实现原理

使用HTML5画布能够帮助我们快速实现简单的动画效果，基本原理如下：每隔一定时间绘制图形并且清除图形，用来模拟出一个动画过程，可以使用context.clearRect(0, 0, x, y)方法来刷新需要绘制的图形在线演示首先是绘制图形的方法，如下：function myAnimation() {

2015-03-30 20:08:53 2403

转载 jQuery中的.bind()、.live()和.delegate()之间区别分析

首先，可视化一个HMTL文档的DOM树是很有帮助的。一个简单的HTML页面看起来就像是这个样子：事件冒泡(又称事件传播)当我们点击一个链接时，其触发了链接元素的单击事件，该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行。代码如下:$('a').bind('click',function(){aler

2015-03-30 20:06:14 417

转载每个程序员需掌握的20个代码命名小贴士

代码中到处都需要命名。作为程序员，我们得给类命名，给变量命名，给函数命名，给参数命名，给命名空间命名，等等等等。下面有20条小贴士能帮助你提高你的命名能力。 1.使用能够表达意图的名字名字得能告诉我们它要做什么，为什么存在，以及是如何工作的。选择能够表达意图的名字，将更有利于我们理解代码。

2015-03-30 20:01:54 372

转载 JavaScript 作用域链解析

JavaScript 中有 Scope( 作用域 ) ， Scope chain( 作用域链 ) ， Execute context( 执行上下文 ) ， Active Object ( 活动对象 ),Dynamic Scope( 动态作用域 ) ， Closure( 闭包 ) 这些概念，要理解这些概念，我们从静态和动态两个方面去分析一下。首先我们写一个简单的 functi

2015-03-30 20:00:01 318

转载设计网页页脚的15个超实用技巧

你网站最重要的部分之一就是页脚。是的，我是认真的。这里也许并不适合伟大的设计或者令人印象深刻的内容会存在的区域，但这里是用户寻找信息的地方。所以在设计网站项目时候也不要忽略这个地方。但是你需要在这里包含哪些元素？如何组织页脚的内容使其不突兀并保持整体美感？你来对地方了。在这里我们将会提出一些关于如何设计好页脚的建议，并会给出一些例子。1.保持设计简单

2015-03-30 19:56:32 4157

转载 58种jQuery模拟CSS3过渡页面切换特效

Animsition是一款使用jQuery来实现CSS3动画的页面切换动画特效插件。该页面切换动画特效插件共有58种效果，按大类别来分可以分为：淡入淡出效果、旋转、翻转和放大缩小效果。另外每种效果都对应一种遮罩模式。浏览器兼容Animsition需要支持CSS3的浏览器才能正常工作。IE10+ChromeSafariFir

2015-03-30 19:52:50 1931

转载 HTML5语义标签的实践（blog页面）

仿照着用HTML5+CSS3做了一个blog页面。整体效果布局如如： 2014-10-29 10:22:30 上传下载附件 (62.71 KB)　　页面布局是基于html5元素的。所以在开始动手之前先熟悉一下HTML5元素，然后检查它的语义是否适合你的布局很重要。　　The HTML5 Structure

2015-03-30 19:48:24 628

转载 HTML5 中 40 个最重要的技术点

我是一个ASP.NET MVC的开发者，最近在我找工作的时候被问到很多与HTML5相关的问题和新特性。所以以下40个重要的问题将帮助你复习HTML5相关的知识。　　这些问题不是你得到工作的高效解决方案，但是可以在你想快速复习相关主题的时候有所帮助。　　快乐地找工作。　　SGML（标准通用标记语言）和HTML（超文本标记语言），XML（可扩展标记语言）

2015-03-30 19:45:55 937

转载精选9个值得学习的 HTML5 效果【附源码】

这里精选了一组很酷的 HTML5 效果。HTML5 是现 Web 开发领域的热点，拥有很多让人期待已久的新特性，特别是在移动端，Web 开发人员可以借助 HTML5 强大功能轻松制作各种交互性强、效果丰富的Web 应用。超炫 HTML5 粒子效果进度条　　我喜欢粒子效果作品，特别是那些能够应用于实际的，例如这个由 Jack Rugile 基于 HTML

2015-03-30 19:30:58 560

转载 HTML5里的placeholder属性

HTML5里新引入很多有趣的新特征；有些体现在HTML里，有些是JavaScript API，全部非常的有用。其中我最喜欢的一个特征就是文本框(INPUT)里的placeholder属性。placeholder属性能够让你在文本框里显示提示信息，一旦你在文本框里输入了什么信息，提示信息就会隐藏。你以前可能无数次看到这种效果，但那些大部分是用JavaScript里实现的，而现在，HTML5提供了

2015-03-30 17:44:02 1832

转载给你推荐10款优秀的 HTML5 动画工具

HTML5 在过去三年快速增长，已经成为 Web 开发人员最喜欢的编程语言之一。强大的编程语言拥有开发更好的网页应用的能力。 HTML5 中引入的新技术都非常好，像 Chrome、Firefox、Safari 等许多现代浏览器都已经支持。今天，我们列出了10个优秀的 HTML5 动画制作工具，可以帮助你的工作。1. Createjs:

2015-03-30 17:32:22 540

转载 CSS3自定义美化复选框Checkbox组合

今天我们要来分享一组非常漂亮的CSS3自定义复选框checkbox，每一个checkbox都有其各自的特点。有几款checkbox在选中的情况下还会出现动画效果，非常不错的CSS3自定义美化checkbox组合。另外，之前分享过的jQuery实现美化版的单选框和复选框也是非常不错。在线演示源码下载css3-checkbox-group.rar

2015-03-30 16:17:13 828

转载 css border制作小三角形状及应用（兼容IE6）

css盒模型一个盒子包括: margin+border+padding+content– 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角, 小梯形等.– 调整宽度大小可以调节三角形形状.示例1一般情况下, 我们设置盒子的宽高度, 及上下左右边框, 会呈现如下图#test1 {

2015-03-30 16:04:54 494

翻译大量的用伪元素可以实现的奇妙效果

译自https://css-tricks.com/pseudo-element-roundup/大量的用伪元素可以实现的奇妙效果用伪元素:before，:after你可以做出很多神奇的页面效果。对于页面上的所有元素，你得到了页面其他任何的一个html元素可以做到的效果外又添了额外的两个。它们解开了很多有趣的设计可能性但却并没有对你的语义标记产生负面影响。这里有大量的由这

2015-03-26 21:26:36 3095

转载 HTML5超酷秒表动画可暂停和重置秒表

关于HTML5和CSS3的时钟应用在之前我们已经分享过不少了，还有一些HTML5的日期选择应用。今天我们要分享一款基于HTML5和CSS3的圆盘秒表动画，秒表可以精确到0.001秒，并且可以在计时过程中暂停计时，同时秒表可以随时重置。下面来分析一下实现的源代码，主要由HTML和CSS代码组成，CSS相对比较复杂，因为涉及到动画。H

2015-03-18 20:03:57 1403

转载 14个HTML5实现的效果合集

HTML5可不是什么虚幻的概念，与其高谈阔论的讨论HTML5未来的趋势和价值，不如一起研究一下现在的HTML5可以做出哪些成果，可以让我们做出出色的产品。　　Form Follows Function就是一個展示HTML5实现的网站，目前网站展示了14个作品，其中包括了交互操作以及视觉效果。这些效果本身并不是一个完整的产品，但是加入到产品中就能让产品生色不少。

2015-03-18 20:01:57 960

转载一款基于jquery带百分比的响应式进度加载条

今天要给大家带来一款基于jquery带百分比的响应式进度加载条。这款加载条非常漂亮，而且带有进度的百度比，且在不同的百分比用的是不同的颜色。而且这款加载条采用了响应式设计，在不同的分辨率的显示器下完美支持。一起看下效果图吧。在线预览源码下载实现的代码。html代码：

2015-03-18 19:56:01 1266

转载跟着8张思维导图学习javascript

学习的道路就是要不断的总结归纳，好记性不如烂笔头，so，下面将po出8张javascript相关的思维导图。思维导图小tips：思维导图又叫心智图，是表达发射性思维的有效的图形思维工具，它简单却又极其有效，是一种革命性的思维工具。思维导图运用图文并重的技巧，把各级主题的关系用相互隶属与相关的层级图表现出来，把主题关键词与图像、颜色等建立记忆链接，思维导图充分运用左右脑的机能，利用记忆

2015-03-18 19:50:18 417

转载 4种CSS3超酷移动手机滑动隐藏侧边栏菜单特效

这是一组共4种效果非常炫酷的CSS3移动手机滑动隐藏侧边栏菜单特效。这四种效果分别是：默认的点击滑动侧边栏菜单效果、带3D transforms的滑动侧边栏效果、文字缩放和淡入淡出效果的滑动侧边栏以及使用translate来实现滑动侧边栏的效果。在线演示 4种CSS3超酷移动手机滑动隐藏侧边栏菜单特效.zip (357.24

2015-03-18 19:48:24 4829

转载 9个非常有意思的HTML5动画推荐

这次要推荐的是9款非常有意思的HTML5动画，这些动画有些是基于Cavans的，有些是SVG结合HTML5实现的，让我们一起来看看。1、HTML5梦幻特效可给任意元素添加魔幻效果我们之前介绍HTML5动画特效比较多的是HTML5 3D特效，今天我们来换一种风格，来分享一款看起来比较魔幻的HTML5特效。它可以给网页上任意元素（图片、文字等）添加这么一种效果，即鼠标滑过时，元素

2015-03-18 16:28:08 739

原创 jquery实现轮播图效果

总结一下《锋利的jquery》里的用jquery实现一个简单的单击上一张及下一张实现的轮播图效果先看下最后的效果图其实轮播图的原理都差不多，一个搞明白后其他也都能搞明白了。先来分析下html的结构。其实结构还是比较简单清晰的。轮播图最外层有个div，里面又分成标题点击按钮一排的title为一个div，下部内容展示又是一个div。上面的ti

2015-03-13 14:41:51 1694 1

转载 JavaScript String 字符串对象

1. 介绍　　String 对象，对字符串进行操作，如：截取一段子串、查找字符串/字符、转换大小写等等。2. 定义方式2.1 new String(Value) 构造函数：返回一个内容为Value的String对象参数：①value {String} ：字符串返回值：{String对象} 返回一个内容为Value的String对象示例：

2015-03-13 14:14:50 424

转载使用javascript实现html文本不可选

如何使用js让html中的文本不可选呢？首先想到的方法是使用css选择器来实现，如下：-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;use

2015-03-13 14:08:37 611

转载设计师：从客户角度看web网页设计

本文讲述了一个设计师在做设计时的众多小插曲，正是这些小插曲才成就了最终的设计稿，有苦逼，有泪水，有经验，有成就……总之，被虐是因为修行还不够。设计师的能力绝不仅限于设计的水准，如何包装自己？如何包装自己的作品？客户：你这banner图放在整个网页上感觉头重脚轻。。。。设计师：网页设计中有一个理念叫做“首屏概念”。网页设计并非平面设计，注重整体视觉感官，而互联网用户在锁定特定信息前是

2015-03-13 14:03:55 764

转载使用CSS过滤效果来改变图片样式

我们知道，使用Photoshop来调整图像的亮度和对比度，或者将图片转化为灰度等等是很常见的功能。今天我将给大家介绍几个新特性，我们使用<a target=_blank target="_blank" href="http://www.itdriver.cn/" style="color: rgb(16, 138, 198);">CSS来给web图像添加相同的效果。<p style="marg

2015-03-13 13:55:38 2108

转载 jQuery消息提示框插件Tipso

之前我们分享过很多漂亮的Tooltip提示框插件，比如这款带Tooltip表单验证的注册表单。今天要分享的这款jQuery消息提示框插件名叫Tipso，它的特点是可以定义提示框的显示位置，以及动态改变提示框的提示内容，应该说是一款相当灵活的jQuery消息提示框插件。在线演示jQuery消息提示框插件Tipso.rar

2015-03-13 13:44:27 637

空空如也

初学angular js遇到的问题

关于长按二维码实现直接关注的功能