基于jQuery插件实现环形图标菜单旋转切换特效

2024-05-06 16:20:24

字体：大中小

来源：转载

供稿：网友

本文给大家分享一款基于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='css/feature.presenter.1.5.css' rel='stylesheet' type='text/css'>

<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>

</head>

<body>

<div id="test-element"></div>

<script src="js/feature.presenter.1.5.min.js"></script>

<script>

/* 图片地址可以是相对路径或绝对路径；标题和描述可以包含HTML */

var settings = [ {image: 'images/zzsc1.png', heading: '武林网', description: 'www.vevb.com'},

{ image: 'images/zzsc2.png', heading: '武林网', description: 'www.vevb.com' },

{ image: 'images/zzsc3.png', heading: '武林网', description: 'www.vevb.com' },

{ image: 'images/zzsc4.png', heading: '武林网', description: 'www.vevb.com' },

{ image: 'images/zzsc5.png', heading: '武林网', description: 'www.vevb.com' },

{ image: 'images/zzsc6.png', heading: '武林网', description: 'www.vevb.com' }

];

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>