隐藏页面成分的,你看得懂吗

CSS双关语–来自前端的小段子,你看得懂吗?

2017/08/15 · CSS ·
段子

原稿出处: Ethan
Jarrell   译文出处:众成翻译   

美高梅开户网址 1

Twitter的”fave”动画

2015/05/12 · HTML5 ·
Twitter,
动画

本文由 伯乐在线 –
刘健超-J.c
翻译,胡屹
校稿。未经许可,禁止转发!
英文出处:cssanimation.rocks。欢迎插足翻译组。

用 CSS 隐藏页面成分的 5 种方法

2016/06/12 · CSS ·
隐藏成分

初稿出处: Baljeet
Rathi   译文出处:十年踪迹(@十年踪迹)   

用 CSS 隐藏页面元素有诸四种艺术。你可以将 opacity 设为 0、将
visibility 设为 hidden、将 display 设为 none 或者将 position
设为 absolute 然后将地方设到不可知区域。

你有没有想过,为何我们要有那样多技术来隐藏成分,而它们看起来都落到实处的是千篇一律的效果?各个艺术其实与别的格局之间都有一些分寸的分化,那些差别决定了在3个一定的场面下利用哪三个主意。那篇教程将掩盖到那么些你供给牢记的细微分歧点,让你依照差别境况选取方面这么些措施中符合的法子来隐藏成分。

jQuery源点教程之使用选拔器和事件
jQuery提供两种办法来选用html的elements:

美高梅开户网址 ,CSS双关语

经常来说,笔者写的有关Web开发的稿子都以严肃的。因为根本涉嫌到克服挑衅,只怕是教学之类的剧情。可是,明日是周三了,经过了劳顿的一周,笔者决定休息一下,发一些和今后不等的娱乐点的CSS的双关语喜上眉梢一下。希望您和自身同样喜欢那个双关语!

美高梅开户网址 2

翻译注:奥利弗·Quinn(奥利弗 Queen)是绿箭侠。

美高梅开户网址 3

译者注:汽车人,变身!

美高梅开户网址 4

翻译注:一九九〇,德国首都没有墙了!

美高梅开户网址 5

翻译注:大爆炸以前,世界空无一片。

美高梅开户网址 6

翻译注:查克·诺Rees,狠剧中人物啊!(#BadA55=>bad ass)。

美高梅开户网址 7

翻译注:吐槽众院的各位领导,洋洋得意,死不悔改,不在Chevrolet的视线里。

美高梅开户网址 8

翻译注:光明会的诸位豪杰壮士平时都很低调。

美高梅开户网址 9

翻译注:带上眼镜,文字图片都看得清啦!

美高梅开户网址 10

翻译注:没有眼镜,视野都变模糊了T_T。

美高梅开户网址 11

翻译注:鬼魂是带透明效果的反动!

美高梅开户网址 12

翻译注:最畏惧的正是看不见的未知物。

美高梅开户网址 13

翻译注:一九五二年的德罗宁。《未到回来》里博士改造了一辆时光车,穿越了。

美高梅开户网址 14

翻译注:每四年三次换届的当局。

美高梅开户网址 15

翻译注:霍比特人,身子是普通人的二分一,脚是小人物的两倍。

美高梅开户网址 16

翻译注:Bruce班纳,变成巨人现在便是绿的。

美高梅开户网址 17

翻译注:泰坦Nick号,沉默于水下的典故;冰山,固定在海上的不幸。

美高梅开户网址 18

翻译注:金·卡戴珊,屁股上垫的太多了…

美高梅开户网址 19

翻译注:United States和墨西哥,边境线…是虚的?:P

美高梅开户网址 20

翻译注:肌肉,都以马耳东风的[允悲]。

美高梅开户网址 21

翻译注:Samsung,苹果的后来人。

美高梅开户网址 22

翻译注:忍者,黑衣,隐形,快如雷暴。

美高梅开户网址 23

翻译注:推高式文胸,统统往上,肉肉都挤出来了呀。

美高梅开户网址 24

翻译注:民谣歌星,字间距为零!

美高梅开户网址 25

翻译注:有钱人一连塔尖的1%,剩下的99%都以塔基的坚苦Tesla。

美高梅开户网址 26

翻译注:狙击情势,十字线开启!

美高梅开户网址 27

翻译注:百慕大三角,进去的你都看不见了。

美高梅开户网址 28

翻译注:爱妻大人,总是百分之百不利的!

美高梅开户网址 29

翻译注:比萨斜塔,斜体效果。

美高梅开户网址 30

译者注:周期,表。

Ethan Jarrell | Professional Profile |
LinkedIn

2 赞 1 收藏
评论

美高梅开户网址 31

Twitter的“fave” 动画

新近 Twitter通过引入一段新的卡通片重新设计了“fave”按钮(也叫“fav”)。那段动画并不正视CSS transition,而是由一多级图片组成的。上面体现如何用 CSS 的
animation-timing-function 属性中的 steps 时序函数(timing
function)重新制作那段动画。

Opacity

opacity
属性的情致是安装一个因素的发光度。它不是为转移成分的边界框(bounding
box)而设计的。那意味将 opacity 设为 0
只可以从视觉上隐藏成分。而要素本人依然占据它和谐的职务并对网页的布局起效果。它也将响应用户交互。

CSS

.hide { opacity: 0; }

1
2
3
.hide {
  opacity: 0;
}

若果你打算利用 opacity
属性在读屏软件中隐藏成分,很衰颓,你并不能够依心像意。元素和它抱有的情节会被读屏软件阅读,就像网页上的任何因素那样。换句话说,元素的行为就和它们不透明时一样。

自己还要提醒一句,opacity 属性能够用来落到实处部分功力很棒的动画片。任何
opacity 属性值小于 1 的因素也会创设一个新的堆叠上下文(隐藏页面成分的,你看得懂吗。stacking
context)。

看下边包车型客车事例:

看 @SitePoint 提供的例证“用 opacity
隐藏成分”

当您的鼠标移到被隐形的第 三个的区块上,成分状态平滑地从一点一滴透明过渡到完全不透明。区块也将 cursor
属性设置为了 pointer,那表达了用户能够与它交互。

  • 首先种是用CSS和Xpath选择器联合起来形成3个字符串来传送到jQuery的构造器(如:$(“div >
    ul a”));
  • 第两种是用jQuery对象的几个methods(方法)。那三种情势还能同步起来混合使用。

运动发生的错觉

那段动画的效率类似于观望古老的西洋镜,该装置显示的是一多级一连的环抱着圆筒的插图。在底下的演示中,大家不行使圆筒,而是在有个别成分内部展现一多元图片。

Visibility

第三个要说的属性是 visibility。将它的值设为 hidden
将藏匿大家的要素。仿佛 opacity
属性,被隐形的要素依旧会对大家的网页布局起效果。与 opacity
唯一区其余是它不会响应任何用户交互。别的,成分在读屏软件中也会被埋伏。

以此天性也能够落实动画效果,只要它的早先和终结状态不等同。那确认保障了
visibility
状态切换之间的连通动画能够是光阴平滑的(事实上能够用那或多或少来用 hidden
达成要素的延期展示和隐形——译者注)。

CSS

.hide { visibility: hidden; }

1
2
3
.hide {
   visibility: hidden;
}

上面包车型客车例子演示了 visibilityopacity 有哪些的不等:

看 @SitePoint 提供的例证“用 visibility
隐藏成分”

留神,倘若叁个因素的 visibility 被设置为
hidden,同时想要展现它的有些子孙成分,只要将尤其成分的 visibility
显式设置为 visible 即可(就好像例子里面包车型客车 .o-hide p——译者注)。尝试只
hover 在隐藏成分上,不要 hover 在 p
标签里的数字上,你会意识你的鼠标光标没有成为手指头的楷模。此时,你点击鼠标,你的
click 事件也不会被触发。

而在 <div> 标签里面包车型客车 <p>
标签则依旧能够捕获全部的鼠标事件。一旦您的鼠标移动到文字上,<div>
本人变得可知并且事件注册也随着生效。

为了测试这一个选取器,大家来试着在大家starterkit.html中甄选并修改第多个ordered
list.

示例

把鼠标悬停在少数上就足以看来动画效果(请到原文查阅动画效果——译者注)。

在本示例中,大家将从创设一种类能整合动画的图片起先。在那里,大家应用来源
Instagram 的“fave”图标动画的片段图片集:

美高梅开户网址 32

为了能让那几个帧动起来,我们需求把它们放置在一排上。在那一个文件中,那些帧已经排列在一排上了,那意味大家可以透过安装背景地点(background-position)属性使背景从第③帧过渡到最后一帧。

美高梅开户网址 33

Display

display 属性依照词义真正隐藏成分。将 display 属性设为 none
确认保证成分不可知并且连盒模型也不转移。使用这一个天性,被隐形的要素不占用任何空间。不仅如此,一旦
display 设为 none
任何对该因素直接打用户交互操作都不恐怕立见效用。其余,读屏软件也不会读到元素的内容。那种措施产生的功用就像是成分完全不存在。

其余那几个因素的子孙元素也会被同时隐藏。为这一个性子添加过渡动画是对事情没有什么帮助的,它的任何例外意况值期间的切换总是会及时生效。

可是请留心,通过 DOM 照旧能够访问到那几个因素。因而你能够由此 DOM
来操作它,就如操作其他的因素。

CSS

.hide { display: none; }

1
2
3
.hide {
   display: none;
}

看上面包车型大巴例证:

@SitePoint 提供的例子“用 display
隐藏成分”

您将看到第二个块成分内有2个 <p>
成分,它和谐的 display
属性棉被服装置成 block,不过它还是不可知。那是
visibility:hidden
display:none
的另1个区别之处。在前三个事例里,将其余子孙成分
visibility 显式设置成
visible
可以让它变得可知,不过 display 不吃这一套,不管我的
display
值是何等,只要祖先成分的 displaynone,它们就都不可知。

最近,将鼠标移到第一个块成分上面三遍,然后点击它。那一个操作将让第三个块成分显现出来,它当中的数字将是多个压倒
0 的数。那是因为,成分正是被那样设置成对用户隐藏,依然得以经过
JavaScript 来进展操作。

一开头,我们须要选用那些list自身,这几个list有二个ID叫“orderedlist”,经常的javascript写法是document.getElementById(“orderedlist”).在jQuery中,我们这么做:

Steps() 时序函数

多数的时序函数,例如 ease(缓冲)和
cubic-bezier(二遍贝塞尔),都能让要素从上马状态平滑地连贯到结尾状态。steps
时序函数与此差异,它并不是平整地连贯,而是将连通进度分割为一定数额的步骤,并且在那几个步骤之间非常快地活动。

美高梅开户网址 34

我们先创立如下的 HTML 代码:

XHTML

<section class=”fave”></section>

1
<section class="fave"></section>

Position

假如有2个要素你想要与它交互,可是你又不想让它影响您的网页布局,没有适当的习性可以处理那种景色(opacity
和 visibility 影响布局, display
不影响布局但又力不从心直接互动——译者注)。在那种景况下,你只可以考虑将成分移出可视区域。这几个点子既不会潜移默化布局,有能让要素保持能够操作。上面是行使那种艺术的
CSS:

CSS

.hide { position: absolute; top: -9999px; left: -9999px; }

1
2
3
4
5
.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

下边的事例证明了什么通过相对定位的法门隐藏成分,并让它和如今的可怜例子效果等同:

看 @SitePoint 提供的例证“用 position
属性隐藏元素”

那种情势的关键原理是透过将成分的 top 和 left
设置成丰裕大的负数,使它在显示屏上不可知。采纳那几个技术的七个利益(可能地下的症结)是用它隐藏的要素的剧情能够被读屏软件读取。那一点一滴能够知晓,是因为你只是将成分移到可视区域外面让用户不能看出它。

你得幸免采纳这么些措施去潜伏任何能够获取主旨的要素,因为一旦那么做,当用户让那多少个元素得到主题时,会导致三个不可预料的热点切换。那一个法子在开立自定义复选框和单选按钮时平常被选用。(用
DOM 模拟复选框和单选按钮,但用那个主意隐藏真正的 checkbox 和 radio
成分来“接收”大旨切换——译者注)

$(document).ready(function() {
    
   $("#orderedlist").addClass("red");
});

背景图片

接下去, 大家得以添加一些体制并安装背景图片地点:

美高梅开户网址 35

CSS

.fave { width: 70px; height: 50px; background:
url(images/twitter_fave.png) no-repeat; background-position: 0 0; }

1
2
3
4
5
6
.fave {
  width: 70px;
  height: 50px;
  background: url(images/twitter_fave.png) no-repeat;
  background-position: 0 0;
}

加了甘休状态后,一旦鼠标悬停在该因素上,背景就会从我们钦定的岗位移动到这一层层图片中最终一张的职位上(为了协作浏览器,注意要添加相应的浏览器内核前缀——译者注)。

CSS

.fave:hover{ animation: fave 1s steps(55); } @keyframes fave{ 0%{
background-position:0 0; } 100%{ background-position:-3519px 0; } }

1
2
3
4
5
6
7
8
9
10
11
.fave:hover{
  animation: fave 1s steps(55);
}
@keyframes fave{
  0%{
    background-position:0 0;
  }
  100%{
    background-position:-3519px 0;
  }
}

请留心第②个规则 animation。在本例中,大家选用 steps
时序函数,让background-position 属性经历了3个持续时间为1秒的连接。在
steps 部分的“55”那几个值,代表了那段动画是由55帧组成的。

当我们将鼠标悬停在那个因素上时,所见到的效果是其背景图片通过5八个一律的步子经历了一次对接。

其它那些案例,也得以用 transition 实现:

CSS

.fave:hover { background-position: -3519px 0; transition: background 1s
steps(55); }

1
2
3
4
.fave:hover {
  background-position: -3519px 0;
  transition: background 1s steps(55);
}

Clip-path

隐藏成分的另一种办法是经过剪裁它们来落到实处。在往日,那可以因此 clip
属性来贯彻,不过那几个本性被放弃了,换到叁个更好的品质叫做
clip-path。Nitish Kumar 最近在 SitePoint 发表了“介绍 clicp-path
属性”那篇小说,通过翻阅它能够领会这一个特性的越多高档用法。

记住,clip-path 属性还一直不在 IE 可能 艾德ge
下被全然支持。要是要在你的
clip-path 中使用外部的 SVG 文件,浏览器接济度还要更低。使用
clip-path 属性来隐藏成分的代码看起来如下:

.hide { clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px); }

1
2
3
.hide {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

上面是3个事实上运用它的例子:

看 @SitePoint 提供的事例“用 clip-path
属性隐藏成分”

比方您把鼠标悬停在第一个因素上,它照旧能够影响第1个要素,固然第四个要素已经因此
clip-path 隐藏了。即便你点击它,它会移除用来掩藏的
class,让大家的成分从拾贰分地方显现出来。被隐藏成分中的文字仍旧能够透过读屏软件读取,许多
WordPress 站点使用 clip-path 或许从前的 clip
来达成专门为读屏软件提供的文字。

虽说大家的要素本人不再显示,它也依旧占据应有占据的矩形大小,它周围的要素的作为就不啻它可知时一致。记住用户交互例如鼠标悬停只怕点击在剪裁区域之外也不容许奏效。在我们的例证里,剪裁区大小为零,这象征用户将不能够与潜伏的要素直接互动。其余,那特个性能够利用各个过渡动画来兑现不一致的成效。

此间将starterkit中的2个CSS样式red附加到了orderedlist上(译者Keel注:参考测试包中的css目录下的core.css,当中定义了red样式)。由此,在你刷新了starterkit.html后,你将会合到第3个静止列表(ordered
list )背景象变成了甲戌革命,而第三个静止列表没有变化.
未来,让我们抬高级中学一年级些新的体制到list的子节点.

干什么不应用gif?

即使如此也能够使用 gif 动画,但在这几个案例中并不是很确切。gif
文件的深浅常常较大还要帧速率也不便控制。而使用那几个主意,大家就足以用 CSS
对那些动画实行结束、倒回以及各式种种的调动。

结论

在那篇教程里,大家看了 5 种分化的通过 CSS
隐藏成分的章程。每一个格局都与其它三种有有个别界别。知道您想要实现怎么着有助于你决定使用哪1个属性,随着时间推移,你就能依照实际须要本能地挑选最佳办法了。假设您对此隐藏成分的那个主意还有其他难点,请在言三语四中留言。

1 赞 5 收藏
评论

美高梅开户网址 36

$(document).ready(function() {
    
   $("#orderedlist >
li").addClass("blue");
});

“steps()”的此外用法

背景动画天使(background sprites)仅仅只是 steps
时序函数的用法之一。除此之外该函数还适用于创设其余索要一层层离散步骤的动画片。例如,你能够用该函数制作三个摆钟。

那般,全部orderedlist中的li都增大了体制”blue”。

备忘小条

假设您欣赏那篇小说,你能够将它分享在脸书,恐怕封存下边包车型地铁备忘小条,以便参考。

美高梅开户网址 37

打赏支持自身翻译越多好小说,多谢!

打赏译者

于今大家再做个复杂一点的,当把鼠标放在li对象方面和移开时展开体制切换,但只在list的最后三个element上生效。

打赏帮衬自身翻译越多好作品,多谢!

任选一种支付办法

美高梅开户网址 38
美高梅开户网址 39

赞 收藏
评论

$(document).ready(function() {
    
   $("#orderedlist li:last").hover(function() {
               
$(this).addClass("green");
        }, function() {
               
$(this).removeClass("green");
    
   });
});

有关笔者:刘健超-J.c

美高梅开户网址 40

前端,在路上…
个人主页 ·
小编的篇章 ·
19 ·
    

美高梅开户网址 41

再有大量的好像的CSS和XPath例子,愈多的事例和列表能够在那边找到。(译者Keel注:入门看此文,修行在个人,要想在入门之后懂更加多,所以那段话的多少个链接迟早是要一定要看的!)

每贰个onXXX事件都有效,如onclick,onchange,onsubmit等,都有jQuery等价表示方法(译者Keel注:jQuery不喜欢onXXX,所以都改成了XXX,去掉了on)。其余的片段事件,如ready和hover,也提供了对应的艺术。

您能够在Visual jQuery找到任何的轩然大波列表,在伊夫nts栏目下.

用那几个选用器和事件你早就得以做过多的作业了,但那里有八个更强的好东东!

$(document).ready(function() {
    
   $("#orderedlist").find("li").each(function(i) {
               
$(this).html( $(this).html() + " BAM! " + i );
    
   });
});

  • find() 让你在已经选取的element中作标准查找,因此$(“#orderedlist).find(“li”) 就像 $(“#orderedlist li”).
  • each()一样迭代了有着的li,并能够在此基础上作越来越多的处理。
    大多数的艺术,如addClass(), 都能够用它们自个儿的 each() 。
  • 在这一个例子中, html()用来取得各样li的html文本,
    追加一些文字,并将之设置为li的html文本。(译者Keel注:从那个例子能够看到.html()方法是获得对象的html代码,而.html(‘xxx’)是设置’xxx’为目的的html代码)

另八个平时遇上的任务是在尚未被jQuery覆盖的DOM成分上call一些艺术,想像二个在你用AJAX方式成功交付后的reset:

$(document).ready(function() {
        //
use this to reset a single form
        $("#reset").click(function() {
 
              $("#form")[0].reset();
    
   });
});

(译者Keel注:这里笔者将form的id也写成了form,源文件有<form
id=”form”>,那是非凡糟糕的写法,你能够将以此ID改成form1照旧testForm,然后用$(“#form1”)或者$(“#testForm”)来代表它,再进行测试。)

本条代码采取了装有ID为”form”的要素,并在其首先个上call了2个reset()。假诺你有二个以上的form,你能够这么做:

$(document).ready(function() {
        //
use this to reset several forms at once
        $("#reset").click(function()
{
                $("form").each(function() {
                      
 this.reset();
                });
    
   });
});

(译者Keel注:请留心早晚要亲自将那么些代码写在custom.js中并在starterkit.html上测试效果才能具有体会!供给时要考察starterkit.html的html代码)

那样你在点击Reset链接后,就选拔了文书档案中有着的form成分,并对它们都履行了一遍reset()。

还有一个你或许要直面的题材是不希望某个特定的要素被选取。jQuery
提供了filter() 和not() 方法来消除这么些题材。
filter()以过滤表达式来压缩不吻合的被采取项,
not()则用来撤废全部符合过滤表明式的被挑选项.
考虑2个无序的list,你想要选取具有的远非ul子元素的li成分。

$(document).ready(function() {
    
   $("li").not("[ul]").css("border", "1px solid
black");
});

本条代码选用了装有的li成分,然后去除了没有ul子成分的li成分。刷新浏览器后,全部的li成分都有了三个边框,唯有ul子元素的不胜li成分例外。

(译者Keel注:请留意体会方便之极的css()方法,并再度提示请务必实际测试旁观效果,比方说换个CSS样式呢?再加多个CSS样式呢?像这么:$(“li”).not(“[ul]”).css(“border”,
“1px solid black”).css(“color”,”red”);)

地方代码中的[expression]
语法是从XPath而来,能够在子成分和性格(elements and
attributes)上用作过滤器,比如你大概想选取具有的带有name属性的链接:

$(document).ready(function() {
    
   $("a[@name]").background("#eee");
});

其一代码给拥有带有name属性的链接加了四个背景观。(译者Keel注:那么些颜色太不分明了,建议写成$(“a[@name]”).background(“red”);)

更广阔的情景是以name来抉择链接,你大概需求选拔2个有特色href属性的链接,那在不一样的浏览器下对href的通晓或然会不雷同,所以大家的有的匹配(“*=”)的不二法门来代表完全协作(“=”):

$(document).ready(function() {
    
   $("a[@href*=/content/gallery]").click(function() {
                // do
something with all links that point somewhere to /content/gallery
    
   });
});

到未来终结,选拔器都用来选取子成分只怕是过滤元素。此外还有一种情形是选用上三个或许下2个因素,比如三个FAQ的页面,答案首先会暗藏,当难点点击时,答案呈现出来,jQuery代码如下:

$(document).ready(function() {
    
   $('#faq').find('dd').hide().end().find('dt').click(function() {
       
 var answer = $(this).next();
         if (answer.is(':visible')) {
    
        answer.slideUp();
         } else {
            
answer.slideDown();
         }
 
   });
});

那里我们用了部分链式表明法来收缩代码量,而且看上去更直观更便于精通。像’#faq’
只选择了2回,利用end()方法,第②次find()方法会截至(undone),所以大家得以接着在末端继续find(‘dt’),而不须要再写$(‘#faq’).find(‘dt’)。

在点击事件中的,大家用 $(this).next()
来找到dt下边紧接的三个dd成分,那让大家得以相当的慢地挑选在被点击难点下边包车型大巴答案。

(译者Keel注:那些事例真是太酷了,FAQ中的答案能够减弱!从利用next()的笔触到落到实处这一个职能都有无数地点需求大家消化,注意
if
(answer.is(‘:visible’))用法,注意answer.slideUp();不懂的地方尽快查自身在最开端波及的多个一定要看API文书档案)

除外选取同级其他要素外,你也得以选拔父级的成分。大概您想在用户鼠标移到小说某段的有些链接时,它的父级成分–也正是小说的这一段非凡体现,试试那么些:

$(document).ready(function() {
    
   $("a").hover(function() {
               
$(this).parents("p").addClass("highlight");
        }, function() {
    
           $(this).parents("p").removeClass("highlight");
    
   });
});

测试效果能够阅览,移到文章某段的链接时,它所在的段全用上highlight样式,移走之后又卷土重来原样。

(译者Keel注:highlight是core.css中定义的样式,你也得以改变它,注意那里有第②个function()那是hover方法的特色,请在API文书档案中查阅hover,下面也有例子表明)
在大家后续此前大家先来探望这一步:
jQuery会让代码变得更短从而更便于明白和维护,上面是$(document).ready(callback)的缩写法:

$(function() {
        // code to
execute when the DOM is ready
});

利用到大家的Hello world例子中,能够如此:

$(function() {
    
   $("a").click(function() {
                alert("Hello world!");
    
   });
});

当今,大家手上有了这个基础的文化,大家得以更进一步的研商其余方面包车型地铁事物,就从AJAX开首!

本章的连锁链接:

  • jQuery API documentation
  • Visual jQuery – A categorized browsable API
    documentation
  • jQuery Expressions:
    CSS
  • jQuery Expressions:
    XPath
  • jQuery Expressions:
    Custom
  • jQuery Special Events
  • jQuery DOM Traversing

发表评论

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

网站地图xml地图