几个重要建站名词的个人理解

基本关键词解释

服务器:

其实服务器也是一台特殊的电脑,我们上网的过程就是从服务器取得网页页面的过程。打开网页的过程可理解成是取得服务器上面的一个文件,大多数时候是html文件,或者动态生成的html文件。

域名:

但是服务器的地址是ip形式的,我们平时可是通过www网址的形式访问的。这里说到的www.XXX.com就是域名,可以理解为服务器地址的一个别名,域名不止这一种形式,还有.cn.org.net 等后缀。

DNS服务器

我们输入网址之后,不会立刻带到目标服务器(除非是输入ip地址),而是要先经过DNS服务器。DNS服务器上面保存了世界上所有的网站的域名和ip地址的对应关系。

- 阅读剩余部分 -

CSS实现大于父元素宽度的图片居中

通常在Banner的时候需要居中,而且Banner通常都是比较宽的。如果当前页面比Banner宽,那么text-align:center即可。

图片居中演示

不过当页面缩小的时候,图片的左边就会抵住窗口左边,不会随着窗口的缩小而左移。

DEMO演示:当父元素小于图片宽度的时候 图片不居中

上面的演示大家可以改变窗口来看。

解决的方法有三种:

方法一:

这个是最先想到的,就是把图片作为背景来设置到Banner上面。

- 阅读剩余部分 -

Canvas 和 SVG 的初步印象

起因:

它们都是比较新的、现代的东西,有些混淆了。

浏览器支持为IE9及以上,Chrome和FF这些高级的浏览器自动支持。

Canvas 和 SVG 的比较
CanvasSVG
基于像素的,就像是真的画布 基于元素的,矢量图形,类似HTML元素,可以通过浏览器的开发者工具查看到各个元素
对于浏览器就是单个元素,类似于图片元素 多个元素组成的DOM
通过纯Javascript脚本呈现 通过XML文件来描述,并且可以通过CSS来控制样式
事件控制只能通过Canvas这个唯一的元素来监听,如果想要控制具体某个画面元素部分,则只能手动通过JS来读取鼠标的坐标,进而加上进行互动操作 事件可以直接绑定到画面的元素上面,因为那些线、多边形、路径都是可以直接选中的元素

DEMO演示

首先是Canvas的演示,效果是读取一张照片,然后读取照片的像素,将其转换为灰度并输出:

- 阅读剩余部分 -

JS控制滚轮横向滚动页面

本文的目的:

有时候遇到一个很宽的页面,想要用滚轮横向滚动,这时候一般的鼠标估计都不能做到吧?

演示

说得有点抽象,Demo请点击:JS控制滚轮横向滚动演示

鼠标滚轮事件介绍

鼠标滚轮事件一直以来没有统一的事件。太混乱了,各种浏览器甚至操作系统都会产生差异。

简单点来看,分成两个时间段。

最初的时候,所有的浏览器,除了FireFox,都支持一个叫做MouseWheelEvent的事件,甚至IE6都支持哦

addEventListener使用mousewheel即可,attachEvent则是onmousewheel

对于FireFox有一个类似的DOMMouseScroll事件,addEventListener的时候监听addEventListener

然后,到了后来,其实也就是现在,有了一个新的、标准的滚轮事件,就叫WheelEvent了。

得到了下列浏览器的支持:

Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
31 17.0 (17.0) 9.0 Not supported Not supported

不过MDN说

This is really different event object from MouseWheelEvent.

具体怎么不一样,没有说,不过我不在意,不过估计主要是Delta增量的不一样。

不同浏览器不同操作系统下wheelDelta, wheelDeltaX and wheelDeltaY value的差异:MDN原文(En)

对我来说,Delta量多少都无所谓,我只需要得到正向还是反向滚轮就好了,正负判断即可,一次滚轮事件触发一次想要的效果。

- 阅读剩余部分 -

document.body 和 document.documentElement的区别

<p>文章的起因:之前对这两者的区别一直很模糊,因为也比较少用到,直到最近在写一个返回顶部的按钮的时候。 以前的话,用jQuery,很简单,大家也很熟悉的:</p>

$('html,body').scrollTop(0);

<p>不过现在的公司不使用jQuery作为主力,所以我就想用原生的JS来实现,然后受上一条习惯的影响,写出了如下的语句:</p>

document.getElementsByTagName('html')[0].scrollTop = 0;
document.getElementsByTagName('body')[0].scrollTop = 0;

<p>效果是达到了。不过看起来怪怪的,好像也没见过别的地方有人这么写过。 然后参考其他网站,同时也谷歌了一下,发现常用的是下面的写法:</p>

document.documentElement.scrollTop = document.body.scrollTop = 0;

<p>看起来简洁多了,是吧。不过我发现上面两个document的属性都好陌生啊,document.documentElement是什么,document.body又是什么?</p>

<p>好了,然后,下面的语句让我明白了:</p>

document.getElementsByTagName('html')[0] === document.documentElement;
//true
document.getElementsByTagName('body')[0] === document.body;
//依然true

<p>恍然大悟的感觉有没有!原来document.documentElement就是html,document.body就是body,就这么简单。</p>

- 阅读剩余部分 -