5 perpustakaan JavaScript kabur yang memudahkan reka bentuk web-tutorial js-php.cn

Dalam pusingan ini, kita akan melihat 5 perpustakaan JavaScript yang benar-benar boleh memudahkan pembangunan tapak web moden yang menarik. Perpustakaan yang akan kita bincangkan berbeza daripada perpustakaan seperti jQuery atau YUI. Mereka lebih kecil dan lebih khusus. Tetapi mereka melakukan yang terbaik dalam bidang mereka dan menawarkan ciri unik.

1. Gunakan DD_BelatedPNG untuk membetulkan PNG dalam IE6

Dicipta oleh: Drew Diller
Lesen: MIT
Tujuan: Betulkan alpha lutsinar PNG dalam IE6
Saiz: 6.86kb (mampat)
Keserasian: IE6 sahaja
Lihat Demo
下载

DD_belatedPNG dicipta untuk tujuan tunggal membenarkan penggunaan PNG alfa-lutsinar dalam IE6 tanpa menggunakan penapis proprietari AlphaImageLoader Microsoft. Sesiapa sahaja yang telah mencuba menggunakan PNG dalam IE6 tahu bahawa walaupun mereka boleh bekerja pada tahap yang sangat asas, perkara seperti mengulangi imej latar belakang adalah di luar persoalan.

Menggunakan penapis AlphaImageLoader hanya menyelesaikan separuh daripada masalah PNG dalam IE6 kerana ia hanya berfungsi dengan imej latar belakang. Untuk berada dalam 5 个简化网页设计的晦涩 JavaScript 库

Pustaka mempunyai kaedah, pembetulan, untuk menyediakan pemilih CSS mudah untuk sasaran perpustakaan, apa-apa sahaja dengan atribut PNG src 5 个简化网页设计的晦涩 JavaScript 库

2.Gunakan sebarang fon dengan Cufon

Dicipta oleh: Simo Kinnunen
Lesen: MIT
Tujuan: Benamkan fon bukan standard tanpa Flash
Saiz: 17.8kb (mampat)
Keserasian: Semua (semua versi biasa daripada semua vendor biasa, termasuk IE6)
Lihat Demo
Muat turun

Tipografi ialah bidang pembangunan web yang menyaksikan kemajuan yang minimum berbanding dengan bidang industri yang lain. Pembangun web terpaksa bergantung pada set kecil fon "selamat web" yang mungkin dipasang pada komputer kebanyakan pelawat mereka. Penyelesaian berasaskan imej dan denyar telah muncul, kedua-duanya mempunyai kelemahan untuk digunakan.

Cufon menyediakan pembangun dengan penyelesaian yang berkuasa dan pantas yang boleh dipaparkan dalam penyemak imbas menggunakan fungsi terbina dalam penyemak imbas, tanpa memerlukan pemalam pihak ketiga. Fon Cufon boleh digunakan sebagai VML dalam pelaksanaan IE asli, atau sebagai elemen

Penggunaan

Perpustakaan ini berbeza daripada yang lain kerana ia memerlukan beberapa persediaan sebelum digunakan; fail fon baharu perlu dijana, yang boleh dilakukan dengan mudah menggunakan laman web cufon. Fon SVG akan dijana dan disimpan dalam fail JS. Fail ini kemudiannya perlu dipautkan kepada mana-mana sumber <script> lain selepas fail teras kufon: </script>

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

Salin selepas log masuk

Jadi ini hanyalah satu kes untuk memberitahu Cufon elemen mana yang perlu diganti:

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

Salin selepas log masuk

API ini menyediakan penyelesaian lain untuk menggunakan berbilang fon pada halaman yang sama dan meningkatkan prestasi IE. Walaupun saya merujuk bahagian ini sebagai "Gunakan Sebarang Fon"... anda harus ingat bahawa anda hanya perlu menggunakan fon yang dilesenkan untuk dibenamkan. Tangkapan skrin di bawah menunjukkan tajuk yang diganti:

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

3.Gunakan Firebug dalam mana-mana pelayar

Pencipta: Mike Ratcliff
Lesen:BSD Style
Tujuan: Gunakan semua ciri Firebug dalam pelayar selain Firefox
Saiz: 76.9kb (mampat)
Keserasian: Semua pelayar bukan Firefox
Lihat Demo
下载

Firebug sudah pasti salah satu aset terbesar yang tersedia untuk pembangunan web, sudah tentu, saya menggunakannya setiap hari apabila melakukan pembangunan web, dan saya tahu ia adalah pemalam pilihan untuk ramai yang lain juga. Kesan sampingan yang malang dari prestasi unggul Firebug ialah ia tidak begitu baik berbanding dengan alat yang serupa dalam pelayar lain. Sebagai contoh, penyelesaian masalah susun atur dan ralat CSS dalam IE boleh menjadi latihan yang sia-sia.

Di situlah Firebug Lite hadir; ia adalah perpustakaan JavaScript mudah yang mencipta semula kebanyakan ciri utama antara muka Firebug, membawa penyahpepijat pilihan kami kepada semua platform lain. Membetulkan reka letak dan menyelesaikan isu merentas penyemak imbas adalah mudah sekali lagi.

Salah satu kelebihan terbesar Firebug Lite ialah anda tidak perlu memuat turun atau memasang apa-apa untuk mula menggunakannya apabila anda ingin menyahpepijat halaman yang anda sedang kerjakan dalam penyemak imbas bukan Firefox, anda hanya memasukkan skrip SRC; fail menunjuk ke versi dalam talian Boleh:

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

Salin selepas log masuk

Itu sahaja, Firebug Lite akan muncul pada halaman apabila anda menjalankannya dalam mana-mana penyemak imbas lain. Untuk kegunaan luar talian, fail skrip boleh dimuat turun bersama-sama dengan fail CSS dan harus digunakan seperti mana-mana fail JS atau CSS yang lain. Tangkapan skrin berikut menunjukkan Firebug Lite dalam 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"/>

Salin selepas log masuk

就是这样，没有其他依赖项。现在我们可以开始创建 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>

Salin selepas log masuk

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

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