Menu
Woocommerce Menu

jQuery的Deferred对象概述,制作长投影

0 Comment


使用 CSS 3 制作长投影

2017/03/07 · CSS · 1
评论 ·
Shadow

原文出处: Jack
Pu   

在flat design(扁平化的设计)中,Long Shadow
(长投影)被看着屡试不爽的设计技能。比如下面这张,非常经典的长投影设计:

图片 1

摄影师选择长投影通常是给图片带来戏剧效果,
在自然界中,长投影发生在黄昏的时候,太阳接近地平线时,水平地面上的物体俯瞰就会有长投影的效果。在界面设计中我们通常采用了模拟45度角的效果,模拟阳光从西北角上射来,从而与设计的主题形成鲜明的对比效果。使用photoshop制作长投影有很多种方法,你可以阅读常用的四种方法创建长投影效果,自己平时最喜欢用的也是第四种,通过图层复制和移动来达到这样的效果,比如自己在behance上传的这张图片,

图片 2

大致原理就是
你复制一个当前图层,选中图层样式,填充黑色,然后将其移到原图层下面。然后使用鼠标或者滤镜都可以实现平移,友移一个单位和下移一个单位。图片 3

然后,我们再复制这个图层,再平移一次。然后合并这两个阴影图层图片 4

然后我们再重复动作,即把这个图层复制一次,向下移和向右移动2个单位。再执行合并。依次类推复制,移动偶数倍单位,合并,然后再重复。

当然你用滤镜->其他->位移会更加方便

图片 5

大致就是这样的效果,然后最后设置下透明度就好。

图片 6

上面说的是设计,前端如何通过css代码来实现这样的效果?大家第一时间想到就是css3已经支持的text-shadow

首先我们给背景添加一种比较突出的颜色吧,自己强烈安利flatcolors这个网站,里面有很多配色方案,随取随用。
我们给body 设置一下背景色。自己比较喜欢蓝色。接下来我们再去google
font里面挑选自己喜欢的字体,如果你觉得默认的字体可以接受也没关系.自己选择了Passion
One

然后在css代码中引入就好。

@import url(‘‘);

这个时候我们在我们的body里面随便敲几个字母吧,比如long shadow

XHTML

<body> <h1>Long Shadow</h1> </body>

1
2
3
<body>  
  <h1>Long Shadow</h1>
</body>

然后我们定义一些h1的基本样式;

CSS

h1{ text-align:center; font-size:6rem; padding-top:2rem; }

1
2
3
4
5
h1{  
  text-align:center;
  font-size:6rem;
  padding-top:2rem;
}

接下来就是要实现最核心的就是写text-shadow的代码了

text-shadow的值可以有x,y轴的位移,加模糊半径和颜色。

CSS

/* offset-x | offset-y | blur-radius | color */ text-shadow: 1px 1px
2px black;

1
2
/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;

我们只要反复的平移,然后使其颜色趋近与背景色既可以了。

也就是这样子的代码

CSS

text-shadow: 1px 1px rgba(18, 67, 100, 0.5) , 2px 2px rgba(20, 72, 107,
0.51) , 3px 3px rgba(22, 76, 113, 0.52) , 4px 4px rgba(23, 81, 119,
0.53) , 5px 5px rgba(25, 85, 125, 0.54) …

1
text-shadow: 1px 1px rgba(18, 67, 100, 0.5) , 2px 2px rgba(20, 72, 107, 0.51) , 3px 3px rgba(22, 76, 113, 0.52) , 4px 4px rgba(23, 81, 119, 0.53) , 5px 5px rgba(25, 85, 125, 0.54) …

但是这样写下去肯定是不现实的,自己需要反复计算步长和增长。还好我们有scss和less这样的预处理框架。我们可以非常方便的完成颜色的换算和增长。

scss代码实现参考

Sass

@function longshadow($color_a,$color_b,$stepnum, $opacity: 1){
$gradient_steps: null; <a
href=”; $i
from 1 through $stepnum { $weight: ( ( $i – 1 ) / $stepnum ) * 100;
$colour_mix: mix($color_b, rgba($color_a, $opacity), $weight);
$seperator: null; @if($i != $stepnum){ $seperator: #{‘,’}; }
$gradient_steps: append( #{$gradient_steps}, #{$i}px #{$i}px
$colour_mix $seperator ); } @return $gradient_steps; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@function longshadow($color_a,$color_b,$stepnum, $opacity: 1){
 
  $gradient_steps: null;
 
  <a href="http://www.jobbole.com/members/lowkey2046">@for</a> $i from 1 through $stepnum {
 
    $weight: ( ( $i – 1 ) / $stepnum ) * 100;
 
    $colour_mix: mix($color_b, rgba($color_a, $opacity), $weight);
 
    $seperator: null;
 
    @if($i != $stepnum){
      $seperator: #{‘,’};
    }
 
    $gradient_steps: append( #{$gradient_steps}, #{$i}px #{$i}px $colour_mix $seperator );
 
  }
 
  @return $gradient_steps;
 
}

函数的执行效果就是类似于我穿入一个颜色a和一个颜色b,其中颜色a就是阴影开始的地方的颜色,颜色b就是背景的颜色,步长也就是类似你希望你的阴影有多长,最后一个就是透明度。然后就是计算了,我们没次都移动一个单位,然后颜色进行百分比的递减,最后组织好样式就可以了。

这个时候我们只需要在h1的样式中使用这个函数就好

Sass

@include text-shadow(longshadow(darken($bg,30%),$bg,50, 0.5));

1
@include text-shadow(longshadow(darken($bg,30%),$bg,50, 0.5));

其中$bg:就是我们背景的颜色咯: #3498db。

运行效果如下:

See the Pen text long shadow by
Jack Pu (@Jack_Pu) on
CodePen.

简讯:W3C 发布 CSS 选择器 API 规范

2012/07/04 · CSS ·
CSS

英文原文:W3C,编译:iteye

W3C 的 Web 应用工作组近日发布了 CSS 选择器 API 规范的 Level 1 版本和
Level 2 版本。

该规范定义了通过匹配选择器从 DOM
获取元素节点的方法,通常适用于执行文档中一组特定元素的 DOM(Document
Object
Model,文档对象模型)操作。这些方法简化了获取特定元素的过程,尤其是针对更繁琐的技术定义以及过去使用的元素。

图片 7

W3C 同时还发布了该规范的 Level 2 版本,在 Level 1 的基础上,添加了
matches 方法、引用节点操作、:scope 伪类等相关规范。

你可以在 7 月 19
日之前针对该规范提交意见,该日期之后它将变成一个“建议”版本,并最终成为标准版本。

规范查看:

●CSS 选择器 API Level
1

●CSS 选择器 API Level
2

 

赞 收藏
评论

图片 8

jQuery的Deferred对象概述

2017/03/02 · CSS

本文由 伯乐在线 –
HansDo
翻译,叙帝利
校稿。未经许可,禁止转载!
英文出处:Aurelio De
Rosa。欢迎加入翻译组。

很久以来,JavaScript
开发者们习惯用回调函数的方式来执行一些任务。最常见的例子就是利用
addEventListener()函数来添加一个回调函数, 用来在指定的事件(如
click
keypress)被触发时,执行一系列的操作。回调函数简单有效——在逻辑并不复杂的时候。遗憾的是,一旦页面的复杂度增加,而你因此需要执行很多并行或串行的异步操作时,这些回调函数会让你的代码难以维护。

ECMAScript 2015(又名 ECMAScript 6)
引入了一个原生的方法来解决这类问题:promises。如果你还不清楚 promise
是什么,可以阅读这篇文章《Javascript
Promise概述》。jQuery
则提供了独具一格的另一种 promises,叫做 Deferred
对象。而且 Deferred
对象的引入时间要比 ECMAScript 引入 promise
早了好几年。在这篇文章里,我会介绍 Deferred
对象和它试图解决的问题是什么。

扩展阅读

2 赞 2 收藏 1
评论

图片 8

Deferred对象简史

Deferred对象是在 jQuery 1.5
中引入的,该对象提供了一系列的方法,可以将多个回调函数注册进一个回调队列里、调用回调队列,以及将同步或异步函数执行结果的成功还是失败传递给对应的处理函数。从那以后,Deferred
对象就成了讨论的话题,
其中不乏批评意见,这些观点也一直在变化。一些典型的批评的观点如《你并没有理解
Promise
》和《论
Javascript 中的 Promise 以及 jQuery
是如何把它搞砸的》。

Promise 对象 是和 Deferred
对象一起作为 jQuery 对 Promise 的一种实现。在 jQuery1.x 和 2.x 版本中,
Deferred 对象遵守的是《CommonJS Promises
提案》中的约定,而 ECMAScript
原生 promises 方法的建立基础《Promises/A+
提案》也是以这一提案书为根基衍生而来。所以就像我们一开始提到的,之所以
Deferred 对象没有遵循《Promises/A+
提案》,是因为那时后者根本还没被构想出来。

由于 jQuery 扮演的先驱者的角色以及后向兼容性问题,jQuery1.x 和 2.x 里
promises 的使用方式和原生 Javascript 的用法并不一致。此外,由于 jQuery
自己在 promises 方面遵循了另外一套提案,这导致它无法兼容其他实现
promises 的库,比如 Q library。

不过即将到来的 jQuery 3
改进了 同原生
promises(在 ECMAScript2015
中实现)的互操作性。虽然为了向后兼容,Deferred
对象的主要方法之一(then())的方法签名仍然会有些不同,但行为方面它已经同
ECMAScript 2015 标准更加一致。

jQuery中的回调函数

举一个例子来理解为什么我们需要用到 Deferred对象。使用 jQuery
时,经常会用到它的 ajax
方法执行异步的数据请求操作。我们不妨假设你在开发一个页面,它能够发送
ajax 请求给 GitHub API,目的是读取一个用户的 Repository
列表、定位到最近更新一个
Repository,然后找到第一个名为“README.md”的文件并获取该文件的内容。所以根据以上描述,每一个请求只有在前一步完成后才能开始。换言之,这些请求必须依次执行

上面的描述可以转换成伪代码如下(注意我用的并不是真正的 Github API):

JavaScript

var username = ‘testuser’; var fileToSearch = ‘README.md’;
$.getJSON(” + username + ‘/repositories’,
function(repositories) { var lastUpdatedRepository =
repositories[0].name; $.getJSON(” +
username + ‘/repository/’ + lastUpdatedRepository + ‘/files’,
function(files) { var README = null; for (var i = 0; i <
files.length; i++) { if (files[i].name.indexOf(fileToSearch) >= 0)
{ README = files[i].path; break; } }
$.getJSON(” + username + ‘/repository/’ +
lastUpdatedRepository + ‘/file/’ + README + ‘/content’,
function(content) { console.log(‘The content of the file is: ‘ +
content); }); }); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var username = ‘testuser’;
var fileToSearch = ‘README.md’;
 
$.getJSON(‘https://api.github.com/user/’ + username + ‘/repositories’, function(repositories) {
  var lastUpdatedRepository = repositories[0].name;
 
$.getJSON(‘https://api.github.com/user/’ + username + ‘/repository/’ + lastUpdatedRepository + ‘/files’, function(files) {
    var README = null;
 
for (var i = 0; i < files.length; i++) {
      if (files[i].name.indexOf(fileToSearch) >= 0) {
        README = files[i].path;
 
break;
      }
    }
 
$.getJSON(‘https://api.github.com/user/’ + username + ‘/repository/’ + lastUpdatedRepository + ‘/file/’ + README + ‘/content’, function(content) {
      console.log(‘The content of the file is: ‘ + content);
    });
  });
});

如你所见,使用回调函数的话,我们需要反复嵌套来让 ajax
请求按照我们希望的顺序执行。当代码里出现许多嵌套的回调函数,或者有很多彼此独立但需要将它们同步的回调时,我们往往把这种情形称作“回调地狱
( callback hell )“。

为了稍微改善一下,你可以从我创建的匿名函数中提取出命名函数。但这帮助并不大,因为我们还是在回调的地狱中,依旧面对着回调嵌套和同步的难题。这时是
DeferredPromise对象上场的时候了。

Deferred和Promise对象

Deferred 对象可以被用来执行异步操作,例如 Ajax 请求和动画的实现。在
jQuery 中,Promise对象是只能由Deferred对象或 jQuery 对象创建。它拥有
Deferred 对象的一部分方法:always(),done(), fail(),
state()then()。我们在下一节会讲到这些方法和其他细节。

如果你来自于原生 Javascript
的世界,你可能会对这两个对象的存在感到迷惑:为什么 jQuery
有两个对象(DeferredPromise)而原生JS 只有一个(Promise)?
在我著作的书《jQuery
实践(第三版)》里有一个类比,可以用来解释这个问题。

Deferred对象通常用在从异步操作返回结果的函数里(返回结果可能是
error,也可能为空)——即结果的生产者函数里。而返回结果后,你不想让读取结果的函数改变
Deferred 对象的状态(译者注:包括 Resolved 解析态,Rejected
拒绝态),这时就会用到 promise 对象——即 Promise
对象总在异步操作结果的消费者函数里被使用。

为了理清这个概念,我们假设你需要实现一个基于 promise
timeout()函数(在本文稍后会展示这个例子的代码)。你的函数会等待指定的一段时间后返回(这里没有返回值),即一个生产者函数而这个函数的对应消费者们并不在乎操作的结果是成功(解析态
resolved)还是失败(拒绝态 rejected),而只关心他们需要在 Deferred
对象的操作成功、失败,或者收到进展通知后紧接着执行一些其他函数。此外,你还希望能确保消费者函数不会自行解析或拒绝
Deferred对象。为了达到这一目标,你必须在生产者函数timeout()中创建
Deferred 对象,并只返回它的 Promise 对象,而不是
Deferred对象本身。这样一来,除了timeout()函数之外就没有人能够调用到resolve()reject()进而改变
Deferred 对象的状态了。

在这个 StackOverflow 问题
里你可以了解到更多关于 jQuery 中 Deferred 和 Promise 对象的不同。

既然你已经了解里这两个对象,让我们来看一下它们都包含哪些方法。

标签:,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图