5 obskure JavaScript-Bibliotheken, die das Webdesign vereinfachen-js-Tutorial-php.cn

In dieser Zusammenfassung werfen wir einen Blick auf 5 JavaScript-Bibliotheken, die die Entwicklung moderner, attraktiver Websites wirklich vereinfachen können. Die Bibliotheken, die wir besprechen werden, unterscheiden sich von Bibliotheken wie jQuery oder YUI. Sie sind kleiner und spezialisierter. Aber sie sind die Besten auf ihrem Gebiet und bieten einzigartige Funktionen.

1. Verwenden Sie DD_BelatedPNG, um PNG in IE6 zu reparieren

Erstellt von: Drew Diller
Lizenz: MIT
Zweck: Alpha-transparentes PNG in IE6 reparieren
Größe: 6,86 KB (komprimiert)
Kompatibilität: nur IE6
Demo ansehen
Herunterladen

DD_belatedPNG wurde ausschließlich zu dem Zweck erstellt, die Verwendung von alpha-transparenten PNGs in IE6 zu ermöglichen, ohne auf den proprietären AlphaImageLoader Filter von Microsoft zurückzugreifen. Jeder, der versucht hat, PNGs in IE6 zu verwenden, weiß, dass sie zwar in einem sehr einfachen Ausmaß funktionieren, Dinge wie sich wiederholende Hintergrundbilder jedoch nicht in Frage kommen.

Die Verwendung des AlphaImageLoader-Filters löst nur die Hälfte der PNG-Probleme im IE6, da er nur mit Hintergrundbildern funktioniert. Um dabei zu sein 5 个简化网页设计的晦涩 JavaScript 库

Die Bibliothek verfügt über eine Methode, fix, die einen einfachen CSS-Selektor für das Bibliotheksziel bereitstellt, alles mit einem PNG-src-Attribut 5 个简化网页设计的晦涩 JavaScript 库

2.Verwenden Sie eine beliebige Schriftart mit Cufon

Erstellt von Simo Kinnunen
Lizenz: MIT
Zweck: Nicht standardmäßige Schriftarten ohne Flash einbetten
Größe: 17,8 KB (komprimiert)
Kompatibilität: Alle (alle gängigen Versionen aller gängigen Anbieter, einschließlich IE6)
Demo ansehen
Herunterladen

Typografie ist ein Bereich der Webentwicklung, der im Vergleich zu anderen Bereichen der Branche nur minimale Fortschritte gemacht hat. Webentwickler sind gezwungen, sich auf einen kleinen Satz „websicherer“ Schriftarten zu verlassen, die wahrscheinlich auf den Computern der meisten ihrer Besucher installiert sind. Es sind bild- und flashbasierte Lösungen entstanden, die beide Nachteile in der Anwendung haben.

Cufon bietet Entwicklern eine leistungsstarke und schnelle Lösung, die mithilfe der integrierten Funktionalität des Browsers im Browser angezeigt werden kann, ohne dass Plug-Ins von Drittanbietern erforderlich sind. Cufon-Schriftarten können als VML in nativen IE-Implementierungen oder als

Verwendung

Diese Bibliothek unterscheidet sich von anderen dadurch, dass vor der Verwendung eine gewisse Vorbereitung erforderlich ist; eine neue Schriftartendatei muss generiert werden, was einfach über die cufon-Website erfolgen kann. Eine SVG-Schriftart wird generiert und in einer JS-Datei gespeichert. Diese Datei muss dann mit allen anderen <script> Ressourcen nach der cufon-Kerndatei verknüpft werden: </script>

<script type="text/javascript" src="cufon.js"></script>
<script type="text/javascript" src="Breip_500.font.js"></script>

Nach dem Login kopieren

Hier geht es also nur darum, Cufon mitzuteilen, welche Elemente ersetzt werden sollen:

<script type="text/javascript">
  Cufon.replace('h1.replacedFont');
</script>

Nach dem Login kopieren

Diese API bietet weitere Lösungen zur Verwendung mehrerer Schriftarten auf derselben Seite und zur Verbesserung der IE-Leistung. Obwohl ich diesen Abschnitt als „Beliebige Schriftart verwenden“ bezeichne, sollten Sie bedenken, dass Sie nur Schriftarten verwenden sollten, die zum Einbetten lizenziert sind. Der Screenshot unten zeigt den ersetzten Titel:

5 个简化网页设计的晦涩 JavaScript 库

3.Verwenden Sie Firebug in einem beliebigen Browser

Erstellt von: Mike Ratcliffe
Lizenz: BSD-Stil
Verwendung: Nutzen Sie alle Funktionen von Firebug in anderen Browsern als Firefox
Größe: 76,9 KB (komprimiert)
Kompatibilität: Alle Nicht-Firefox-Browser
Demo ansehen
Herunterladen

Firebug ist zweifellos eines der größten Hilfsmittel für die Webentwicklung. Ich verwende es natürlich jeden Tag bei der Webentwicklung und ich weiß, dass es auch für viele andere das Plugin der Wahl ist. Ein unglücklicher Nebeneffekt der überlegenen Leistung von Firebug ist, dass es im Vergleich zu ähnlichen Tools in anderen Browsern verblasst. Beispielsweise kann die Behebung von Layoutproblemen und CSS-Fehlern im IE eine sinnlose Übung sein.

Hier kommt Firebug Lite ins Spiel; es handelt sich um eine einfache JavaScript-Bibliothek, die die meisten Schlüsselfunktionen der Firebug-Schnittstelle nachbildet und unseren bevorzugten Debugger auf alle anderen Plattformen bringt. Das Korrigieren von Layouts und das Beheben von browserübergreifenden Problemen ist wieder einfach.

Einer der größten Vorteile von Firebug Lite besteht darin, dass Sie nichts herunterladen oder installieren müssen, um es zu verwenden. Wenn Sie die Seite, an der Sie arbeiten, in einem Nicht-Firefox-Browser debuggen möchten, fügen Sie einfach ein SRC-Skript hinzu Datei, die auf die Online-Version verweist. Kann:

<script type="text/javascript" src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script>

Nach dem Login kopieren

Das ist alles, Firebug Lite wird auf der Seite angezeigt, wenn Sie es in einem anderen Browser ausführen. Für die Offline-Nutzung kann die Skriptdatei zusammen mit der CSS-Datei heruntergeladen werden und sollte wie jede andere JS- oder CSS-Datei verwendet werden. Der folgende Screenshot zeigt Firebug Lite in Safari:

5 个简化网页设计的晦涩 JavaScript 库

4. 使用 Raphael JS 渲染交互式 3D 形状

创建者：德米特里·巴拉诺夫斯基
许可：麻省理工学院
用途：在页面上绘制 SVG 形状
大小：58.4kb（压缩后）
兼容性：全部（来自所有常见供应商的所有常见版本，包括 IE6）
View Demo
下载

好吧，这个库并不是那么小，但这是有原因的；该库可以做很多事情，并向网页添加完整的 SVG 控制。说实话，它的威力是非常强大的。想象一下能够在网页上绘制平滑的曲线并动态创建自定义形状 - 拉斐尔做到了。

您可以制作完全跨浏览器的圆角，没有图像（除了库实际绘制的图像之外），您可以为任何图像创建褪色反射，动态旋转图像等等。由于所有路径都是使用 SVG 元素绘制的，因此您可以将 JavaScript 事件附加到它们，以便人们可以在鼠标悬停或单击（或任何其他 JS 事件）时与图像进行交互。可能性是无限的，API 提供了多种不同的方法，使使用该库成为一种乐趣。

用法

该库当然必须链接到：

<script type="text/javascript" src="raphael.js"/>

Nach dem Login kopieren

就是这样，没有其他依赖项。现在我们可以开始创建 SVG 形状：

<script type="text/javascript">
  var canvas = Raphael(50, 50, 620, 100);
  var shape = canvas.rect(0, 0, 500, 100, 10);
  shape.attr("fill", "#fff");
  canvas.text(250, 50, "Using Raphael to create custom shapes\ndrawn on the fly is extremely easy").attr("font", "20px 'Arial'");
 </script>

Nach dem Login kopieren

该库易于使用，在本示例中我们仅使用了其功能的一小部分。使用此功能的页面应如下所示：

5 个简化网页设计的晦涩 JavaScript 库