jQuery 3D 텍스트 효과 구현 방법
이 jQuery 기반의 3D 텍스트 효과 프레젠테이션은 진정한 3D가 아니라 여러 문자로 이루어진 3D 효과입니다. 만약에 웹 페이지를 처음 불러오는 데 오류가 발생하면 페이지를 새로 고쳐 주십시오. 물론 사용 중에 이런 문제가 발생하지 않을 것입니다.
jQuery 3D
<br> $(document).ready(function(){
<br> var element = $('#list a');;
<br> var offset = 0;
<br> var stepping = 0.03;
<br> var list = $('#list');
<br> var $list = $(list)
<br> $list.mousemove(function(e){
<br> var topOfList = $list.eq(0).offset().top
<br> var listHeight = $list.height()
<br> stepping = (e.clientY - topOfList) / listHeight * 0.2 - 0.1;
<br> });
<br> for (var i = element.length - 1; i >= 0; i--)
<br> {
<br> element[i].elemAngle = i * Math.PI * 2 / element.length;
<br> }
<br> setInterval(render, 20);
<br> function render(){
<br> for (var i = element.length - 1; i >= 0; i--){
<br> var angle = element[i].elemAngle + offset;
<br> x = 120 + Math.sin(angle) * 30;
<br> y = 45 + Math.cos(angle) * 40;
<br> size = Math.round(40 - Math.sin(angle) * 40);
<br> var elementCenter = $(element[i]).width() / 2;
<br> var leftValue = (($list.width()/2) * x / 100 - elementCenter) + "px"
<br> $(element[i]).css("fontSize", size + "pt");
<br> $(element[i]).css("opacity",size/100);
<br> $(element[i]).css("zIndex" ,size);
<br> $(element[i]).css("left" ,leftValue);
<br> $(element[i]).css("top", y + "%");
<br> }
<br> offset += stepping;
<br> }
<br> });
<br>
본고에서 서술한 것이 여러분의 jQuery 프로그램 설계에 도움이 되었으면 합니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
