杰拉斯的博客

标签:前端

新浪微博表情插件——jQuery Sina Emotion 3.0 发布

杰拉斯 杰拉斯 | 时间:2018-01-12, Fri | 63,048 views
前端开发 

jQuery Sina Emotion

一个用于方便快速地创建新浪微博表情选择对话框的 jQuery 插件。

有何特点

  • 使用简单,一行代码即可创创建出表情选择对话框
  • 自带智能表情解析方法(但还是建议表情解析在服务端进行)
  • 兼容IE6+、Chrome、Firefox、Opera等各种浏览器

(阅读全文…)

[知乎]关于选择器优先级的计算

杰拉斯 杰拉斯 | 时间:2013-11-25, Mon | 23,683 views
前端开发 

探寻真理者不可心存傲慢”,再一次给自己敲响警钟。

曾经以为

CSS的优先级

不过如此,虽然自己列不出(主要是不喜欢死记理论)所有CSS选择器的优先级顺序,但我在写代码的时候一定能够写对,所以一直看轻了它,直到今天遇到了这样一个问题:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS Selectors Level</title>
	<style type="text/css">
	.inner:not(#outer) p{color: blue;}
	.outer .inner p{color: orange;}
	</style>
</head>
<body>
	<div class="outer">
		<p>outer</p>
		<div class="inner">
			<p>inner</p>
		</div>
	</div>
</body>
</html>

猜猜是什么颜色?

(阅读全文…)

借@阿里巴巴 耍了个帅——HTML5 JavaScript实现图片文字识别与提取

杰拉斯 杰拉斯 | 时间:2013-09-16, Mon | 45,058 views
前端开发 

写在前面

8月底的时候,@阿里巴巴 推出了一款名为“拯救斯诺克”的闯关游戏,作为前端校园招聘的热身,做的相当不错,让我非常喜欢。后来又传出了一条消息,阿里推出了A-star(阿里星)计划,入职阿里的技术培训生,将接受CTO等技术大牛的封闭培训,并被安排到最有挑战的项目中,由技术带头人担任主管。

(阅读全文…)

[实用小代码]网页中的各种长宽、坐标

杰拉斯 杰拉斯 | 时间:2013-08-28, Wed | 19,930 views
前端开发 
<!doctype html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>网页中的各种长宽、坐标</title>
</head>
</head>
<body onmousemove="getXandY()">
	<label>window.event.clientX:</label><label id="xa" class="xy"></label><br />
	<label>window.event.clientY:</label><label id="ya" class="xy"></label><br />
	<label>window.event.x		 :</label><label id="xb" class="xy"></label><br />
	<label>window.event.y		 :</label><label id="yb" class="xy"></label><br />
	<label>window.event.screenX:</label><label id="xc" class="xy"></label><br />
	<label>window.event.screenY:</label><label id="yc" class="xy"></label><br /><br />
	<label>window.screen.height:</label><label id="screenHeight" class="xy"></label><br />
	<label>window.screen.width:</label><label id="screenWidth" class="xy"></label><br /><br />
	<label>window.document.body.clientHeight:</label><label id="ch" class="xy"></label><br />
	<label>window.document.body.clientWidth:</label><label id="cw" class="xy"></label><br />
	<label>window.document.body.clientLeft:</label><label id="cl" class="xy"></label><br />
	<label>window.document.body.clientTop:</label><label id="ct" class="xy"></label><br /><br />
	<label>window.document.body.scrollHeight:</label><label id="sh" class="xy"></label><br />
	<label>window.document.body.scrollWidth:</label><label id="sw" class="xy"></label><br />
	<label>window.document.body.scrollLeft:</label><label id="sl" class="xy"></label><br />
	<label>window.document.body.scrollTop:</label><label id="st" class="xy"></label><br /><br />
	<label>window.document.body.offsetHeight:</label><label id="oh" class="xy"></label><br />
	<label>window.document.body.offsetWidth:</label><label id="ow" class="xy"></label><br />
	<label>window.document.body.offsetLeft:</label><label id="ol" class="xy"></label><br />
	<label>window.document.body.offsetTop:</label><label id="ot" class="xy"></label><br />
	<script type="text/javascript">
	function getXandY(){
		var Xa = window.event.clientX;
		var Ya = window.event.clientY;
		document.getElementById("xa").innerHTML = Xa;
		document.getElementById("ya").innerHTML = Ya;
		var Xb = window.event.x;
		var Yb = window.event.y;
		document.getElementById("xb").innerHTML = Xb;
		document.getElementById("yb").innerHTML = Yb;
		var Xc = window.event.screenX;
		var Yc = window.event.screenY;
		document.getElementById("xc").innerHTML = Xc;
		document.getElementById("yc").innerHTML = Yc;
		var screenHeight = window.screen.height;
		var screenWidth = window.screen.width;
		document.getElementById("screenHeight").innerHTML = screenHeight;
		document.getElementById("screenWidth").innerHTML = screenWidth;
		var clientHeight = window.document.body.clientHeight;
		var clientWidth = window.document.body.clientWidth;
		var clientLeft = window.document.body.clientLeft;
		var clientTop = window.document.body.clientTop;
		document.getElementById("ch").innerHTML = clientHeight;
		document.getElementById("cw").innerHTML = clientWidth;
		document.getElementById("cl").innerHTML = clientLeft;
		document.getElementById("ct").innerHTML = clientTop;
		var scrollHeight = window.document.body.scrollHeight;
		var scrollWidth = window.document.body.scrollWidth;
		var scrollLeft = window.document.body.scrollLeft;
		var scrollTop = window.document.body.scrollTop;
		document.getElementById("sh").innerHTML = scrollHeight;
		document.getElementById("sw").innerHTML = scrollWidth;
		document.getElementById("sl").innerHTML = scrollLeft;
		document.getElementById("st").innerHTML = scrollTop;
		var offsetHeight = window.document.body.offsetHeight;
		var offsetWidth = window.document.body.offsetWidth;
		var offsetLeft = window.document.body.offsetLeft;
		var offsetTop = window.document.body.offsetTop;
		document.getElementById("oh").innerHTML = offsetHeight;
		document.getElementById("ow").innerHTML = offsetWidth;
		document.getElementById("ol").innerHTML = offsetLeft;
		document.getElementById("ot").innerHTML = offsetTop;
	}
	</script>
</body>
</html>

收集整理自网上

[常用布局]左栏固定宽度,右栏自适应的两种纯CSS方法

杰拉斯 杰拉斯 | 时间:2013-08-26, Mon | 32,761 views
前端开发 

其一,左栏固定宽度,右栏自适应之绝对定位法:

<!doctype html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>左栏固定宽度,右栏自适应之绝对定位法</title>
	<style type="text/css">
	body{
		margin: 0;
	}
	#nav{
		top: 0;
		left: 0;
		width: 230px;
		height: 600px;
		background: #ccc;
		position: absolute;
	}
	#main{
		height: 600px;
		margin-left: 230px;
		background: #0099ff;
	}
	</style>
</head>
<body>
	<div id="container">
		<div id="nav">
			左栏
		</div>
		<div id="main">
			右栏
		</div>
	</div>
</body>
</html>

看起来很美好,但是。。

由于左栏使用绝对定位,脱离了文档流,因此有一个缺陷,即当左栏高度大于右栏时,无法将container撑开,这个缺陷单单只看两栏布局并没有太大影响,但如果两栏布局下面有一个底栏,就会出现底栏与左栏重叠的情况

(阅读全文…)