mootools_MooTools手电筒效果

最新推荐文章于 2023-06-04 22:10:45 发布

culuo8053

最新推荐文章于 2023-06-04 22:10:45 发布

阅读量112

点赞数

文章标签： javascript python jquery js html ViewUI

原文链接：https://davidwalsh.name/mootools-flashlight

版权

mootools

Another reason that I love Twitter so much is that I'm able to check out what fellow developers think is interesting. Chris Coyier posted about a flashlight effect he found built with jQuery. While I agree with Chris that it's a little corny, it is a neat effect so I ported it over to MooTools.

我非常喜欢Twitter的另一个原因是，我能够查看其他开发人员认为有趣的东西。克里斯·科耶尔(Chris Coyier)发表了关于他发现使用jQuery构建的手电筒效果的文章。尽管我同意Chris的观点，但它确实很不错，因此我将其移植到MooTools。

View Demo 观看演示

意象 (The Imagery)

CSS (The CSS)


	body { background:#00022a url(flashlight.jpg) 50% 50% no-repeat; }

MooTools JavaScript (The MooTools JavaScript)


window.addEvent('domready',function() {
	$(document.body).addEvent('mousemove',function(e) {
		this.setStyle('background-position',[e.page.x - 250,e.page.y - 250]);
	});
});

View Demo 观看演示

What's really impressive about this effect is how little code is involved. While I wouldn't recommend this for a commercial website, it doesn't have some fun value.

这种效果真正令人印象深刻的是涉及的代码很少。虽然我不建议在商业网站上使用它，但它没有任何有趣的价值。