jQuery做出圆形图标菜单轮流切换功能-js教程-PHP中文网

首页

web前端

js教程

jQuery做出圆形图标菜单轮流切换功能

php中世界最好的语言

Apr 25, 2018 pm 05:38 PM

jquery 图标菜单

这次给大家带来jQuery做出圆形图标菜单轮流切换功能，jQuery做出圆形图标菜单轮流切换的注意事项有哪些，下面就是实战案例，一起来看一下。

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邮箱登陆入口在哪里

7518

CakePHP 教程

1378

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

Win11怎么禁用任务栏缩略图预览? 关闭鼠标移动任务栏图标显示缩略图技巧 Feb 29, 2024 pm 03:20 PM

本文将介绍如何在Win11系统中关闭鼠标移动任务栏图标时显示的缩略图功能。这一功能在默认情况下是开启的，当用户将鼠标指针悬停在任务栏上的应用程序图标上时，会显示该应用程序的当前窗口缩略图。然而，有些用户可能觉得这个功能不太实用或者会干扰到他们的使用体验，因此想要关闭它。任务栏缩略图可能很有趣，但它们也可能分散注意力或烦人。考虑到您将鼠标悬停在该区域的频率，您可能无意中关闭了重要窗口几次。另一个缺点是它使用更多的系统资源，因此，如果您一直在寻找一种提高资源效率的方法，我们将向您展示如何禁用它。不过

PPT幻灯片插入excel图标的操作方法 Mar 26, 2024 pm 05:40 PM

1、打开PPT，翻页至需要插入excel图标的页面。点击插入选项卡。2、点击【对象】。3、跳出以下对话框。4、点击【由文件创建】，点击【浏览】。5、选择需要插入的excel表格。6、点击确定后跳出如下页面。7、勾选【显示为图标】。8、点击确定即可。

如何在iPhone中撤消从主屏幕中删除 Apr 17, 2024 pm 07:37 PM

从主屏幕中删除了重要内容并试图将其取回？您可以通过多种方式将应用程序图标放回屏幕。我们已经讨论了您可以遵循的所有方法，并将应用程序图标放回主屏幕如何在iPhone中撤消从主屏幕中删除正如我们之前提到的，有几种方法可以在iPhone上恢复此更改。方法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、最后重启电脑就可以看到桌面快捷方式的小箭头消失。第三方工具：小智桌面小智桌面是一款十分友好和实用的桌面整

win10输入法图标不见了怎么办 Win10输入法图标丢失后找回的方法 Feb 29, 2024 am 11:52 AM

Win10输入法图标丢失后，很多用户不知道该如何找回。本文将介绍简单的方法，帮助用户找回Win10输入法图标，让您可以方便地切换输入法，提高工作效率。一、输入法不见的原因1、键盘布局问题：如果意外切换了键盘布局，例如从中文切换到英文或其他语言，输入法可能会暂时消失。2、输入法设置问题：在系统设置中，我们可以自定义输入法的显示方式。如果设置不当，可能导致输入法无法显示或隐藏。3、输入法错误或崩溃：输入法软件本身可能存在错误或崩溃，导致输入法无法正常显示。二、调出输入法的方法方法一：1、按【Win+

谷歌浏览器图标怎么更改？谷歌浏览器图标更改方法 Mar 13, 2024 pm 08:50 PM

　　谷歌浏览器图标怎么更改？部分用户看腻了谷歌浏览器的默认图标，想要换成其他的，而谷歌浏览器是为用户提供了免费的修改图标功能的，只需要设置一下就好。接下来小编带来就来分享修改谷歌浏览器图标的方法，感兴趣的小伙伴快来试试吧。　　更改方法　　1、找到桌面谷歌浏览器快捷方式，点击【右键】-【属性】。　　2、点击【更换图标】，如图所示。　　3、选择你需要的图标，然后点击【确定】即可，如图所示。

jQuery中如何使用PUT请求方式？ Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT请求方式？在jQuery中，发送PUT请求的方法与发送其他类型的请求类似，但需要注意一些细节和参数设置。PUT请求通常用于更新资源，例如更新数据库中的数据或更新服务器上的文件。以下是在jQuery中使用PUT请求方式的具体代码示例。首先，确保引入了jQuery库文件，然后可以通过以下方式发送PUT请求：$.ajax({u

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

Dreamweaver CS6

SublimeText3 Mac版

热门话题