jQuery는 원형 아이콘 메뉴 회전 전환 기능을 만듭니다.-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

jQuery는 원형 아이콘 메뉴 회전 전환 기능을 만듭니다.

php中世界最好的语言

Apr 25, 2018 pm 05:38 PM

jquery 상 메뉴

이번에는 원형 아이콘 메뉴 회전 전환을 위한 jQuery 기능을 가져왔습니다. jQuery에서 원형 아이콘 메뉴 회전 전환을 위한 Notes는 무엇입니까?

feature.presenter.1.5.css

body {
 margin: 0;
 font-family: Tahoma;
}
.feature-presenter {
 position: absolute;
}
.feature-presenter-icon {
 background-color: white;
 text-align: center;
 transition: transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
 -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
 border-radius: 50%;
 cursor: pointer;
}
.feature-presenter img {
 max-width: 100%;
 transition: transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
 -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
 border-radius: 50%;
 cursor: pointer;
 box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
 filter: blur(0px);
 -webkit-filter: blur(0px);
 image-rendering: -webkit-optimize-contrast;
}
.feature-presenter i {
 font-size: 85px;
 /*filter: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter id="gaussian_blur"><feGaussianBlur in="SourceGraphic" stdDeviation="0" /></filter></defs></svg>#gaussian_blur');*/
}
.feature-presenter-circle-container {
 border-radius: 50%;
 display: inline-block;
 border: 1px solid rgba(0,0,0,0.09);
 box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.09);
 transition: transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
 -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
 background-color: white;
}
.feature-presenter-text-container {
 line-height: 1.3;
 display: inline-block;
 vertical-align: top;
 z-index: 1001;
 position: relative;
 overflow: hidden;
}
.feature-presenter-text-heading {
 -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: transform 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
  margin-bottom: 10px;
  color: rgba(0, 0, 0, 0.8);
}
.feature-presenter-text-description {
 -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.075, 0.82, 0.165, 1) 0.4s;
  transition: transform 0.4s cubic-bezier(0.075, 0.82, 0.165, 1) 0.4s;
  color: rgba(0, 0, 0, 0.5);
}
.feature-presenter-text-container-out {
 -webkit-transform: translate(200%, 0);
  transform: translate(200%, 0);
  -webkit-transition: -webkit-transform 0.5s ease-in;
  transition: transform 0.5s ease-in;
}

로그인 후 복사

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>基于jQuery环形图标菜单旋转切换特效</title>
<link href=&#39;css/feature.presenter.1.5.css&#39; rel=&#39;stylesheet&#39; type=&#39;text/css&#39;>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
</head>
<body>
<p id="test-element"></p>
<script src="js/feature.presenter.1.5.min.js"></script>
<script>
/* 图片地址可以是相对路径或绝对路径；标题和描述可以包含HTML */
var settings = [ {image: 'images/zzsc1.png', heading: '脚本之家', description: 'www.jb51.net'},
  { image: 'images/zzsc2.png', heading: '脚本之家', description: 'www.jb51.net' },
  { image: 'images/zzsc3.png', heading: '脚本之家', description: 'www.jb51.net' },
  { image: 'images/zzsc4.png', heading: '脚本之家', description: 'www.jb51.net' },
  { image: 'images/zzsc5.png', heading: '脚本之家', description: 'www.jb51.net' },
  { image: 'images/zzsc6.png', heading: '脚本之家', description: 'www.jb51.net' }
  ];
var options = {
 circle_radius: 220,
 normal_feature_size: 100,
 highlighted_feature_size: 150,
 top_margin: 100,
 bottom_margin: 50,
 spacing: 40,
 min_padding: 50,
 heading_font_size: 30,
 description_font_size: 20,
 type: 'image'
};
var fp = new FeaturePresenter($("#test-element"), settings, options);
fp.createPresenter();
</script>
</body>
</html>

로그인 후 복사

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7503

Cakephp 튜토리얼

1377

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

Win11에서 작업 표시줄 축소판 미리 보기를 비활성화하는 방법은 마우스를 움직여 작업 표시줄 아이콘 표시 축소판 기술입니다. Feb 29, 2024 pm 03:20 PM

이번 글에서는 Win11 시스템에서 작업 표시줄 아이콘을 마우스로 움직일 때 표시되는 썸네일 기능을 끄는 방법을 소개하겠습니다. 이 기능은 기본적으로 켜져 있으며 사용자가 작업 표시줄의 응용 프로그램 아이콘 위에 마우스 포인터를 올리면 응용 프로그램의 현재 창 축소판이 표시됩니다. 그러나 일부 사용자는 이 기능이 덜 유용하거나 경험에 지장을 준다고 생각하여 이 기능을 끄고 싶어할 수도 있습니다. 작업 표시줄 축소판은 재미있을 수도 있지만 주의를 산만하게 하거나 짜증나게 할 수도 있습니다. 이 영역 위로 마우스를 가져가는 빈도를 고려하면 실수로 중요한 창을 몇 번 닫았을 수도 있습니다. 또 다른 단점은 더 많은 시스템 리소스를 사용한다는 것입니다. 따라서 리소스 효율성을 높일 수 있는 방법을 찾고 있다면 비활성화하는 방법을 알려드리겠습니다. 하지만

PPT 슬라이드에 엑셀 아이콘을 삽입하는 방법 Mar 26, 2024 pm 05:40 PM

1. PPT를 열고 엑셀 아이콘을 삽입해야 하는 페이지로 페이지를 넘깁니다. 삽입 탭을 클릭합니다. 2. [개체]를 클릭하세요. 3. 다음과 같은 대화상자가 나타납니다. 4. [파일에서 생성]을 클릭한 후 [찾아보기]를 클릭하세요. 5. 삽입할 엑셀 표를 선택하세요. 6. 확인을 클릭하면 다음 페이지가 나타납니다. 7. [아이콘으로 표시]를 체크하세요. 8. 확인을 클릭합니다.

iPhone 홈 화면에서 삭제를 취소하는 방법 Apr 17, 2024 pm 07:37 PM

홈 화면에서 중요한 항목을 삭제하고 다시 복구하려고 하시나요? 다양한 방법으로 앱 아이콘을 화면에 다시 표시할 수 있습니다. 우리는 당신이 따라갈 수 있는 모든 방법과 홈 화면에 앱 아이콘을 다시 넣을 수 있는 방법에 대해 논의했습니다. 방법 1 - 앱 라이브러리에서 앱 아이콘 바꾸기 앱 라이브러리에서 직접 홈 화면에 앱 아이콘을 배치할 수 있습니다. 1단계 – 옆으로 스와이프하여 앱 라이브러리의 모든 앱을 찾습니다. 2단계 – 이전에 삭제한 앱 아이콘을 찾습니다. 3단계 – 메인 라이브러리의 앱 아이콘을 홈 화면의 올바른 위치로 드래그하기만 하면 됩니다. 이것은 응용 다이어그램입니다

win11에서 바로가기 아이콘 화살표를 숨기는 방법은 무엇입니까? 숨겨진 메소드 공유 May 09, 2024 pm 01:00 PM

많은 사용자가 데스크탑의 작은 아이콘 화살표를 숨기는 데 익숙합니다. 그렇다면 어떻게 해야 할까요? 자세한 데모를 제공하기 위해 win11 시스템을 예로 들어보겠습니다. Win11 아이콘 화살표 방법 1. 단축키 win+r을 누르고 regedit를 입력한 후 확인을 클릭합니다. 2. 레지스트리 편집기에 들어가서 HKEY_CLASSES_ROOTlnkfile을 열고 오른쪽 창에서 lsShortcut 항목을 선택합니다. 3. lsShortcut 항목을 마우스 오른쪽 버튼으로 클릭하고 삭제 옵션을 클릭한 후 lsShortcut을 삭제합니다. 4. 마지막으로 컴퓨터를 다시 시작하면 바탕화면 바로가기의 작은 화살표가 사라지는 것을 볼 수 있습니다. 타사 도구: Xiaozhi Launcher Xiaozhi Launcher는 매우 친절하고 실용적인 데스크톱 구성 도구입니다.

Win10 입력 방법 아이콘이 사라진 경우 어떻게 해야 합니까? Win10 입력 방법 아이콘이 사라진 후 어떻게 검색합니까? Feb 29, 2024 am 11:52 AM

Win10 입력 방법 아이콘이 사라진 후 많은 사용자가 이를 검색하는 방법을 모릅니다. 이 기사에서는 사용자가 Win10 입력 방법 아이콘을 검색하여 입력 방법을 쉽게 전환하고 작업 효율성을 향상시키는 데 도움이 되는 간단한 방법을 소개합니다. 1. 입력방법이 누락되는 이유 1. 자판 배열 문제 : 중국어에서 영어나 다른 언어로 바꾸는 등 실수로 자판 배열을 바꾸면 입력 방법이 일시적으로 사라질 수 있습니다. 2. 입력 방법 설정 문제: 시스템 설정에서 입력 방법의 표시 모드를 사용자 정의할 수 있습니다. 설정이 잘못되면 입력 방법이 표시되지 않거나 숨겨질 수 있습니다. 3. 입력 방법 오류 또는 충돌: 입력 방법 소프트웨어 자체에 오류나 충돌이 발생하여 입력 방법이 제대로 표시되지 않을 수 있습니다. 2. 입력 방법을 불러오는 방법 방법 1: 1. [Win+]를 누릅니다.

Google 크롬 아이콘을 변경하는 방법은 무엇입니까? Chrome 아이콘을 변경하는 방법 Mar 13, 2024 pm 08:50 PM

Google 크롬 아이콘을 변경하는 방법은 무엇입니까? 일부 사용자는 Chrome의 기본 아이콘에 지쳐서 다른 아이콘으로 변경하고 싶어합니다. 그러나 Google Chrome은 사용자에게 설정만 하면 되는 무료 아이콘 수정 기능을 제공합니다. 다음으로 에디터가 구글 크롬 아이콘 수정 방법을 공유해드리겠습니다. 관심 있으신 분들은 꼭 오셔서 사용해 보세요. 변경방법 : 1. 바탕화면의 구글 크롬 바로가기를 찾아 [우클릭]-[속성]을 클릭합니다. 2. 그림과 같이 [아이콘 변경]을 클릭하세요. 3. 그림과 같이 필요한 아이콘을 선택하고 [확인]을 클릭하세요.

jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까? Feb 28, 2024 pm 03:12 PM

jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까? jQuery에서 PUT 요청을 보내는 방법은 다른 유형의 요청을 보내는 것과 유사하지만 몇 가지 세부 사항과 매개 변수 설정에 주의해야 합니다. PUT 요청은 일반적으로 데이터베이스의 데이터 업데이트 또는 서버의 파일 업데이트와 같은 리소스를 업데이트하는 데 사용됩니다. 다음은 jQuery에서 PUT 요청 메소드를 사용하는 구체적인 코드 예제입니다. 먼저 jQuery 라이브러리 파일을 포함했는지 확인한 다음 $.ajax({u를 통해 PUT 요청을 보낼 수 있습니다.

win11 오른쪽 하단 아이콘 사이의 거리가 멀어지는 문제를 해결하는 방법은 무엇입니까? 솔루션 목록 Jun 10, 2024 pm 03:47 PM

win11 시스템에서 일부 사용자는 win11의 오른쪽 하단 모서리에 있는 아이콘 간격이 커지는 문제를 경험했습니다. 그렇다면 이 문제를 해결하는 방법은 무엇입니까? 아래를 살펴보겠습니다! 먼저 Win11의 설정 인터페이스를 열어야 합니다. 작업 표시줄에서 시작 버튼을 클릭하고 설정을 선택합니다. 설정 인터페이스에서 "개인 설정" 옵션을 찾아 "작업 표시줄"을 클릭하세요. 작업 표시줄 설정에 "아이콘 간격" 옵션이 있습니다. 자신에게 맞게 크기를 조정하고 적용 버튼을 클릭하여 설정을 저장합니다. 해결 방법은 간단하지만 주의해야 할 사항이 몇 가지 있습니다. 우선 아이콘 간격을 조정할 때 너무 작게 조정하지 않도록 주의하세요. 그렇지 않으면 아이콘이 겹쳐서 사용에 영향을 미칠 수 있습니다. 둘째, 만약 당신이

See all articles

jQuery는 원형 아이콘 메뉴 회전 전환 기능을 만듭니다.

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제