Saber 酱的抱枕

Fly me to the moon

10/22
2016
学习

使用CSS3的user-select属性禁止选择元素

前段时间看到一个网站屏蔽了选择操作,禁用JavaScript也无效,后来终于发现是这个网页上设置了user-select属性,禁止了用户选取网页上的元素。

user-select是css3的属性,可以设置允许用户选择哪些元素以及是否允许选择等。现在要使用user-select属性,还需要加私有前缀,如下:

-ms-user-select
-moz-user-select
-webkit-user-select

-ms-user-select 可设置 4 个值:
auto – 如果该元素包含可编辑的文本(如输入元素或可编辑内容的元素),则可以选择文本。否则,元素内容是否可选择由父节点的值决定。
none – 不可以选择文本
text – 可以选择文本
element – 可以选择文本,但选择范围受元素边界的约束

-moz-user-select和-webkit-user-select:
auto   默认值,用户可以选中元素中的内容
none  用户不能选择元素中的任何内容
text   用户可以选择元素中的文本
element  文本可选,但仅限元素的边界内(只有IE和FF支持)
all   在编辑器内,如果双击/上下文点击发生在子元素上,改值的最高级祖先元素将被选中。

-moz-user-select还有个私有的值:-moz-none,它表示元素和子元素的文本将不可选,但是,子元素可以通过text重设回可选。

Read More →

使用CSS3的user-select属性禁止选择元素

10/19
2016
学习

JavaScript停止事件冒泡以及阻止浏览器默认行为

原生JavaScript写法附带兼容性处理:

if (!!window.attachEvent) {	//区分浏览器指派事件
	document.getElementById("a").attachEvent("onclick",fun,false);
}else{
	document.querySelector("#a").addEventListener("click",fun,false);
}
function fun (event) {
	//处理event对象的兼容性
	var e=event||window.event;	//firefox里的event是临时的,不是window下的全局变量
	//停止事件冒泡
	e.stopPropagation?e.stopPropagation():e.cancelBubble=true;	//低版本ie使用cancelBubble属性,其他浏览器使用stopPropagation方法
	//阻止浏览器默认行为
	e.preventDefault?e.preventDefault():e.returnValue = false;	//低版本ie设置returnValue属性,其他浏览器使用preventDefault方法
}

IE8及更低版本的IE,添加事件要使用私有的attachEvent(),也不支持stopPropagation()和preventDefault(),真是毒瘤啊。

如果使用jQuery的话,写起来更加方便,因为jQuery已经做了兼容性处理,我们用w3c标准方法就行了:

$("a").click(function (e) {
    e.stopPropagation(); //停止事件冒泡
    e.preventDefault(); //阻止浏览器默认行为
    return false; //同时停止冒泡和阻止默认行为。
});

注意,jQuery中的return false和原生JavaScript里的return false是有区别的:
原生JavaScript中的return false不会停止冒泡,只会阻止默认行为。但jQuery中的return false会同时停止冒泡和阻止默认行为。

JavaScript停止事件冒泡以及阻止浏览器默认行为

10/18
2016
ACG

白夜茶会&月夜茶会 下载

白夜茶会 月夜茶会 下载 种子 磁力链接

《白夜茶会》和《月夜茶会》是日本的插画家、漫画家Tinkle(てぃんくる)发售的萝莉画集,也是经典的作品了,想必各位死宅都或多或少看到过。

刚才我下载了一个miui上的萝莉主题,但它的壁纸不是萝莉的,我想找萝莉图片做壁纸,就又搜了一遍这个资源。(记得我以前明明下载过……)

种子:
http://pan.baidu.com/s/1nv97u1V

磁链:
magnet:?xt=urn:btih:C72458A621A7DF45CD33386A2ACDFEDF45DDE897

508张图片,6.08G ,迅雷可离线+高速。

度盘下载 jpg格式
Read More →

白夜茶会&月夜茶会 下载

10/14
2016
学习

使用css3动画给评论头像增加旋转效果

刚才我给评论区头像添加了鼠标经过旋转的效果,是使用css3动画做的。

在css样式表里先定义一个旋转的动画,然后在鼠标经过头像时触发动画:

@keyframes rotate_once{
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
.comment-meta .avatar:hover{
	animation: rotate_once .5s;
}

有时候必须结合JavaScript事件播放动画的时候,可以先把animation那句放到一个单独的class名里,然后通过JavaScript来动态添加、删除改动画的className,来达到播放动画或去除动画的效果。

示例:

element.addEventListener("mouseover",function(){
	element.className=nowClassName+" rotate_once";
	element.addEventListener("animationend",function(){
		element.className=nowClassName;
	})
});

鼠标经过元素时添加rotate_once这个className,播放动画。动画播放完毕之后再去掉这个className。

这里有个知识点,就是JavaScript里有三个能监听动画播放的事件:

animationStart 动画开始执行
animationEnd 动画执行结束
animationIteration  重复动画开始执行(只有重复动画才会触发)

使用css3动画给评论头像增加旋转效果