natalie86-CSDN博客

转载 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 464

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

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

2015-03-30 20:16:03 570

转载 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 920

转载 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 317

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

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

2015-03-30 19:56:32 4154

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

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

2015-03-30 19:52:50 1930

转载 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 936

转载精选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 1693 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 763

转载使用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 2107

转载 jQuery消息提示框插件Tipso

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

2015-03-13 13:44:27 637

转载 10大经典CSS3菜单应用欣赏

很多时候，我们的网页菜单需要个性化，从而来适应各种行业的用户视觉操作体验。本文将带领大家一起来欣赏10个非常经典的CSS3菜单应用，菜单涉及到动画菜单、Tab菜单、面包屑菜单等。1、CSS3飘带状3D菜单菜单带小图标这次我们要来分享一款很特别的CSS3菜单，菜单的外观是飘带状的，并且每一个菜单项有一个精美的小图标，鼠标滑过菜单项时，菜单项就会向上凸起，像是飘带飘动一样，形

2015-03-13 11:45:33 480

转载微信中一些常用的js事件积累

1.网页图片集左右滑动查看图片，如下样例：js效果var pictures = [];angular.forEach(pitctures,function(k,i){ pictures[i] = k.imgPath; });$scope.previewPics = function(currentUrl){ if (ty

2015-03-13 11:22:44 499

原创小结indexOf()、lastIndexOf()位置方法

ECMAScipt5为数组实例添加了两个位置方法：indexOf()和lastIndexOf()。这两个方法的共同点是都接收2个参数：要查找的项和（可选的）表示查找起点位置的索引。不同的是indexOf()方法从数组的开头（位置0）开始向后查找，lastIndexOf()方法则从数组的末尾开始向前查找。这两个方法都返回要查找的项在数组中的位置，或者在没找到的情况下返回-1。注意

2015-03-13 10:52:09 4647 1

原创小结concat()、slice()、splice()操作方法

今天继续来总结一下ECMAscript为操作已经包含在数组中的项提供了很多方法。第一个先讲concat()方法。这个方法可以理解为一种合并。concat()方法的具体用法是：它可以创建当前数组的一个副本，然后将接受到的参数添加到这个副本的末尾，最后返回新构建的数组。这里又分三种情况。（1）在没有给concat()方法传递参数的情况下，它只是复制当前数组并返回副本。（2）如果传递给

2015-03-13 09:29:03 21911

今天继续总结一些其他的方法。我仔细回忆我从完全不懂JS到现在还在自学的这个过程，我回想当初看到JS真的是觉得几乎看不懂，上课的时候也觉得听的很吃力，对一些概念也很陌生。但是经过一段时间的沉淀，现在再看JS也似乎不那么可怕了，原先完全看不懂的一些概念似乎也不是不可攻破的。我体会到哪怕一个再难的概念，你一开始一定是很难吸收理解，但是你把这个概念隔段时间看个好几遍，我相信你一定会慢慢理解它的意思，而且一

2015-03-12 15:47:39 1686

原创小结栈方法，队列方法

按照自学进度，目前看到了《javascript高级程序》的第五章引用类型。我们知道编程的核心就是由数据结构及算法组成的。而这一章里讲到了非常有用的栈方法及队列方法。我想小结一下。数组可以表现得像栈一样，可以限制插入和删除项的一种数据结构。栈是一种后进先出的数据结构，也就是最新添加的项最早被移除。而栈中项的插入（叫做推入）和移除（叫做弹出）只发生在一个位置——栈的顶部。ECMAs

2015-03-11 13:18:57 712

转载 web前端如何让网页布局稳定性和标准性？

刚开始学css+div布局的同学们，都比较困惑和难写的就是兼容性的问题了，特别是ie6等低版本的浏览器，随意国内逐步慢慢消失取代，但是现阶段还是会有点考虑因素再里面。我们写的网页布局怎么样才是合理的，完整的，兼容性好的呢？一、标记的重要性。位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，我们必需在开头处使用标记为所有的XH

2015-03-10 11:35:20 1079

转载 ECMAScript 6 Features 中文版

Introduction 简介 ECMAScript 6 is the upcoming version of the ECMAScript standard. This standard is targeting ratification in June 2015. ES6 is a significant update to the language, and the

2015-03-10 11:32:42 806

转载服务器端(NodeJS)使用jQuery选择器操作DOM(HTML/XML)

注*　这是一个两年多的“老”项目，可以让你在NodeJS中使用jQuery的选择器,像操作前端DOM一样操作后端的HTML/XML,在去除浏览器兼容相关代码后,比JSDOM的操作快8倍. 之前我们曾经提到JSDOM有严重的性能问题: Debug调试Node.JS:我们是如何定位内存泄漏和无限循环的cheerio快速，灵活，在服务器端使用的jQuery。简介

2015-03-10 11:29:22 1048

空空如也

初学angular js遇到的问题

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