基于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.49028c.com'},

{ image: 'images/zzsc2.png', heading: '武林網', description: 'www.49028c.com' },

{ image: 'images/zzsc3.png', heading: '武林網', description: 'www.49028c.com' },

{ image: 'images/zzsc4.png', heading: '武林網', description: 'www.49028c.com' },

{ image: 'images/zzsc5.png', heading: '武林網', description: 'www.49028c.com' },

{ image: 'images/zzsc6.png', heading: '武林網', description: 'www.49028c.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>