mootools_使用MooTools或jQuery的iPhone单击效果

矫情吗；* 2023-02-21 15:25 20阅读 0赞

mootools

One thing I love about love about Safari on the iPhone is that Safari provides a darkened background effect when you click a link. It's the most subtle of details but just enforces than an action is taking place. So why not implement that on any page? We can easily do so using MooTools or jQuery.

我喜欢iPhone上的Safari，我喜欢的一件事是，当您单击链接时，Safari会提供深色的背景效果。 这是最微妙的细节，但只是执行而不是执行操作。 那么，为什么不在任何页面上实现呢？ 我们可以使用MooTools或jQuery轻松地做到这一点。

[View Demo][] [观看演示][View Demo]

## CSS **(**The CSS**)** ##

.clicked { padding:1px 2px; -moz-border-radius:5px; background:#aaa; }

Style as you wish!

随心所欲！

## MooTools JavaScript **(**The MooTools JavaScript**)** ##

window.addEvent('domready',function() {
    	var lynx = $$('a');
    	lynx.addEvent('click',function(e) {
    		lynx.removeClass('clicked'); //remove from others
    		this.addClass('clicked');
    	});
    });

The syntax between the two frameworks is very similar.

这两个框架之间的语法非常相似。

## jQuery JavaScript **(**The jQuery JavaScript**)** ##

$(document).ready(function() {
    	var lynx = $('a');
    	lynx.click(function(e) {
    		lynx.removeClass('clicked');
    		$(this).addClass('clicked');
    	});
    });

[View Demo][] [观看演示][View Demo]

My example shows the gray background but what's great is that since the snippet uses a CSS class, you can make the background any color you'd like. You could add a spinner next to the link or italicize the link text. Of course when a link is clicked there's only a moment where you can see the added effect but I think it's worth it!

我的示例显示了灰色背景，但最棒的是，由于该代码段使用CSS类，因此您可以将背景设置为任何所需的颜色。 您可以在链接旁边添加一个微调框，也可以将链接文本用斜体显示。 当然，当单击链接时，只有片刻可以看到增加的效果，但是我认为这是值得的！

> 翻译自: [https://davidwalsh.name/iphone-click][https_davidwalsh.name_iphone-click]

mootools

[View Demo]: https://davidwalsh.name/demo/iphone-link.php
[https_davidwalsh.name_iphone-click]: https://davidwalsh.name/iphone-click