mootools_使用MooTools和CSS的NSFW阻止程序

mootools

One of my guilty pleasures is scoping out the latest celebrity gossip from PerezHilton.com, DListed.com, and JoBlo.com. Unfortunately, these sites occasionally post NSFW pictures which makes checking these sites on lunch a huge gamble -- a trip to HR's office could be just a click away.

我的罪恶荣幸之一是从PerezHilton.com，DListed.com和JoBlo.com寻找最新的名人八卦。 不幸的是，这些站点偶尔会发布NSFW图片，这使人们在午餐时检查这些站点是一场巨大的赌博-只需单击一下，即可访问HR办公室。

Since most of the time it's just a portion of a given picture that could be considered inappropriate, I asked myself if there was a way to get the gist of an article's graphic without having to hide the entire image. For that reason, I've created a NSFW blocker using CSS and MooTools.

由于大多数时候它只是给定图片的一部分，可能被认为是不合适的，所以我问自己是否有一种无需隐藏整个图像就能获得文章图形要旨的方法。 因此，我使用CSS和MooTools创建了NSFW阻止程序。

View Demo 观看演示

步骤1：XHTML (Step 1: The XHTML)

<div class="nsfw-wrapper">
	<div class="blocker" style="width:32px;height:50px;margin:68px 0 0 38px;"></div>
	<img src="johnny-cash.jpg" alt="Johnny Cash" />
</div>
<div class="nsfw-wrapper">
	<div class="blocker" style="width:30px;height:30px;margin:47px 0 0 13px;"></div>
	<div class="blocker" style="width:30px;height:30px;margin:60px 0 0 121px;"></div>
	<img src="2pac.jpg" alt="Tupac Shakur" />
</div>
<div class="nsfw-wrapper">
	<div class="blocker" style="width:50px;height:50px;margin:118px 0 0 80px;"></div>
	<img src="bush.jpg" alt="President Bush" />
</div>

Each wrapper DIV is given the nsfw-wrapper class. Inside the DIV is another DIV which serves as a blocker for the other element, the image. I recommend using an inline style to define the height, weight, and position of the blocker.

每个包装DIV都被赋予nsfw-wrapper类。 DIV内部是另一个DIV，它用作其他元素(图像)的遮挡物。 我建议使用内联样式来定义阻止程序的高度，重量和位置。

步骤2：CSS (Step 2: The CSS)

.nsfw-wrapper 	{  width:200px; float:left; margin:0 20px 0 0; }
.blocker			{ background:#f00; position:absolute; }

The nsfw-wrapper class can be formatted any way you'd like. The nsfw class must be positioned absolutely and you can choose any background color you'd like for your blocker.

nsfw-wrapper类可以按照您希望的任何方式进行格式化。 nsfw类必须放置在绝对位置，您可以为阻隔剂选择任何背景颜色。

步骤3：Mootools JavaScript (Step 3: The Mootools JavaScript)

//window on dom ready
window.addEvent('domready', function() {
	$$('.nsfw-wrapper').each(function(el) {
		el.addEvents({
				'mouseenter': function() {
			//fade out the blocker
			el.getElements('div').each(function(div) {
				div.fade('out');
			});
		},
		'mouseleave': function() {
			//fade out the blocker
			el.getElements('div').each(function(div) {
				div.fade('in');
			});
		  }
		});
	});
});

Once the DOM is ready, we grab each wrapper. For every wrapper, we add an event that fades out the blocker(s) on mouse enter and fades the blocker back in when the mouse leaves.

DOM准备就绪后，我们将抓取每个包装器。 对于每个包装器，我们添加一个事件，该事件会在鼠标进入时淡出阻止程序，并在鼠标离开时将阻止程序重新淡入。

View Demo 观看演示

This example is safe for work -- blocked middle fingers only.

此示例可安全工作-仅阻塞中指。

翻译自: https://davidwalsh.name/nsfw-blocker-mootools-css

mootools