웹 디자인을 단순화하는 5가지 알려지지 않은 JavaScript 라이브러리-JS 튜토리얼-php.cn

이번 정리에서는 현대적이고 매력적인 웹사이트 개발을 진정으로 단순화할 수 있는 5가지 JavaScript 라이브러리를 살펴보겠습니다. 우리가 논의할 라이브러리는 jQuery나 YUI와 같은 라이브러리와 다릅니다. 그들은 더 작고 더 전문적입니다. 하지만 그들은 해당 분야에서 최선을 다하고 독특한 기능을 제공합니다.

1. IE6에서 PNG를 수정하려면 DD_BelatedPNG를 사용하세요

제작자: Drew Diller
라이센스: MIT
목적: IE6에서 알파 투명 PNG 수정
크기: 6.86kb(압축)
호환성: IE6 전용
데모 보기
다운로드

DD_belatedPNG는 Microsoft의 독점 AlphaImageLoader 필터를 사용하지 않고 IE6에서 알파 투명 PNG를 사용할 수 있도록 하는 유일한 목적으로 만들어졌습니다. IE6에서 PNG를 사용해 본 사람이라면 누구나 매우 기본적인 수준으로 작업할 수는 있지만 배경 이미지 반복과 같은 작업은 불가능하다는 것을 알고 있습니다.

AlphaImageLoader 필터를 사용하면 배경 이미지에서만 작동하므로 IE6의 PNG 문제 중 절반만 해결됩니다. 5 个简化网页设计的晦涩 JavaScript 库 에 참여하려면

라이브러리에는 라이브러리 대상, PNG src 속성이 있는 모든 항목에 대한 간단한 CSS 선택기를 제공하는 fix 메서드가 있습니다. 5 个简化网页设计的晦涩 JavaScript 库

2.Cufon으로 원하는 글꼴을 사용하세요

작성자: Simo Kinnunen
라이센스: MIT
목적: Flash 없이 비표준 글꼴 삽입
크기: 17.8kb(압축)
호환성: 모두(IE6을 포함한 모든 일반 공급업체의 모든 일반 버전)
데모 보기
다운로드

타이포그래피는 업계의 다른 분야에 비해 최소한의 진전을 보인 웹 개발 분야입니다. 웹 개발자는 대부분의 방문자의 컴퓨터에 설치될 가능성이 있는 작은 "웹 안전" 글꼴 세트에 의존해야 합니다. 이미지 기반 솔루션과 플래시 기반 솔루션이 등장했지만 둘 다 사용하기에는 단점이 있습니다.

Cufon은 타사 플러그인 없이도 브라우저에 내장된 기능을 사용하여 브라우저에 표시할 수 있는 강력하고 빠른 솔루션을 개발자에게 제공합니다. Cufon 글꼴은 기본 IE 구현에서 VML로 사용되거나 다른 보다 강력한 브라우저에서

사용법

이 라이브러리는 사용하기 전에 약간의 준비가 필요하다는 점에서 다른 라이브러리와 다릅니다. cufon 웹사이트를 사용하여 쉽게 수행할 수 있는 새 글꼴 파일을 생성해야 합니다. SVG 글꼴이 생성되어 JS 파일에 저장됩니다. 그런 다음 이 파일은 cufon 코어 파일 다음의 다른 <script> 리소스에 연결되어야 합니다. </script>

으아악

이것은 Cufon에게 교체할 요소를 알려주는 경우입니다:

으아악

이 API는 동일한 페이지에서 여러 글꼴을 사용하고 IE 성능을 향상시키기 위한 다른 솔루션을 제공합니다. 이 섹션을 "모든 글꼴 사용"이라고 부르긴 하지만... 삽입 라이선스가 부여된 글꼴만 사용해야 한다는 점을 기억해야 합니다. 아래 스크린샷은 대체된 제목을 보여줍니다.

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

3.모든 브라우저에서 Firebug를 사용하세요

제작자: Mike Ratcliffe
라이센스: BSD 스타일
사용법: Firefox 이외의 브라우저에서 Firebug의 모든 기능을 사용하세요
크기: 76.9kb(압축)
호환성: Firefox가 아닌 모든 브라우저
데모 보기
다운로드

Firebug는 의심할 여지 없이 웹 개발에 사용할 수 있는 최고의 자산 중 하나입니다. 물론 저는 웹 개발을 할 때 매일 사용하며 다른 많은 사람들도 이 플러그인을 선택하고 있습니다. Firebug의 우수한 성능으로 인한 불행한 부작용은 다른 브라우저의 유사한 도구와 비교할 때 성능이 떨어진다는 것입니다. 예를 들어, IE의 레이아웃 문제와 CSS 오류를 해결하는 것은 무의미한 연습일 수 있습니다.

Firebug Lite는 Firebug 인터페이스의 주요 기능 대부분을 재현하여 다른 모든 플랫폼에 우리가 선택한 디버거를 제공하는 간단한 JavaScript 라이브러리입니다. 레이아웃을 수정하고 브라우저 간 문제를 해결하는 것이 다시 쉽습니다.

Firebug Lite의 가장 큰 장점 중 하나는 사용을 시작하기 위해 아무것도 다운로드하거나 설치할 필요가 없다는 것입니다. Firefox가 아닌 브라우저에서 작업 중인 페이지를 디버그하려면 SRC 스크립트만 포함하면 됩니다. 온라인 버전을 가리키는 파일:

으아악

그렇습니다. Firebug Lite를 다른 브라우저에서 실행하면 페이지에 나타납니다. 오프라인 사용의 경우 스크립트 파일을 CSS 파일과 함께 다운로드할 수 있으며 다른 JS 또는 CSS 파일처럼 사용해야 합니다. 다음 스크린샷은 Safari의 Firebug Lite를 보여줍니다.

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

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

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

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

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

用法

该库当然必须链接到：

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

로그인 후 복사

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

로그인 후 복사

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

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