Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Artboard 1
P
r
ocess
A
u
t
omation
Our p
r
ocess and Industrial
A
u
t
omation personnel a
r
e
t
r
ained
t
o of
f
er a b
r
oad
scope of se
r
vices
t
o meet or
e
x
ceed
y
our p
r
oject goals.
T
echnical
Se
r
vices
W
e ensu
r
e that
y
our p
r
ocess,
manufacturing, packaging
equipment, facility and utilities
pe
r
form as the intended design.
P
r
oject
Management
W
e help
y
our ope
r
ations
complete their p
r
oject on time,
under budget and meeting
100% of the
r
equi
r
ements.
Engineering
Cost
r
eduction and
p
r
oductivity enhancement.
Principia engineers h
a
v
e
hands-on experience in
driving successful Ene
r
gy
Management P
r
og
r
ams.
Industries
Our highly skilled staff is
disciplined
t
o work within a
r
ange of industries in the
dynamic Li
f
e Sciences sec
t
o
r
,
t
o meet demanding and
e
v
olving expectations.
V
alidation
(Q&C and CS
V
)
As pa
r
t of our wide expe
r
tise,
we p
r
o
vide Commissioning &
Qualification and Computer
System
V
alidation Solutions.
I
T
Manufacturing
Our Manufacturing E
x
ecution
Systems comprise
applications that connect the
r
eal-time data originated at the
shop floor with the enterprise
l
ev
el applications.
Learn more
css
.container { width: 100%; height: 480px; } #learn-more { fill-opacity: 0; fill: #fff; stroke: #fff; stroke-width: 2; border-radius: 5px; stroke-linejoin: round; -webkit-transition: all 250ms ease-in; transition: all 250ms ease-in; cursor: pointer; } #learn-more:hover { fill-opacity: 1; } #learn-more:hover ~ .learn-more-text { fill: #005fa4; } .learn-more-text { font-family: 'Roboto'; fill: #fff; pointer-events: none; font-size: 14px; -webkit-transition: all 250ms ease-in; transition: all 250ms ease-in; } .center { fill: #005fa4; } .pointer { fill: #fff; stroke: #3b8fc0; stroke-width: 2; } .nav-copy { font-family: 'Roboto'; fill: #fff; fill-opacity: 1; -webkit-transition: all 250ms ease-in; transition: all 250ms ease-in; } .nav-copy.changing { fill-opacity: 0; } .service { cursor: pointer; } .service text { font-size: 14px; font-family: 'Roboto'; text-anchor: middle; } .service .icon-wrapper { -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } .service .icon-wrapper, .service .icon-wrapper > * { -webkit-transition: all 250ms ease-in; transition: all 250ms ease-in; } .service circle { fill: #005fa4; } .service circle.shadow { fill-opacity: 0; -webkit-filter: url(#service-shadow); filter: url(#service-shadow); } .service use { fill: #fff; } .service text { fill: #4d4d4d; } .service.active .icon-wrapper, .service:hover .icon-wrapper { -webkit-transform: scale(1.15) translateY(-5px); transform: scale(1.15) translateY(-5px); } .service.active .icon-wrapper, .service.active .icon-wrapper > *, .service:hover .icon-wrapper, .service:hover .icon-wrapper > * { -webkit-transition: all 250ms ease-out; transition: all 250ms ease-out; } .service.active .icon-wrapper circle.shadow, .service:hover .icon-wrapper circle.shadow { fill-opacity: 0.4; } .service.active text, .service:hover text { fill: #005fa4; font-weight: bold; }
JavaScript
"use strict"; var center = { x: 325, y: 175 }; var serv_dist = 250; var pointer_dist = 172; var pointer_time = 2; var icon_size = 42; var circle_radius = 38; var text_top_margin = 18; var tspan_delta = 16; //name is used as the title for the bubble //icon is the id of the corresponding svg symbol var services_data = [{ name: "Industries", icon: "industries" }, { name: "Validation\n(C&Q and CSV)", icon: "validation" }, { name: "Engineering", icon: "engineering" }, { name: "Project\nManagement", icon: "management" }, { name: "Manufacturing\nIT", icon: "manufacturing" }, { name: "Technical\nServices", icon: "technical" }, { name: "Process\nAutomation", icon: "process" }]; var services = document.getElementById("service-collection"); var nav_container = document.getElementById("circle-nav-services"); var symbol_copy = document.getElementById("circle-nav-copy"); var use_copy = document.querySelector("use.nav-copy"); //Keeps code DRY avoiding namespace for element creation function createSVGElement(el) { return document.createElementNS("http://www.w3.org/2000/svg", el); } //Quick setup for multiple attributes function setAttributes(el, options) { Object.keys(options).forEach(function (attr) { el.setAttribute(attr, options[attr]); }); } //Service bubbles are created dynamically function addService(serv, index) { var group = createSVGElement("g"); group.setAttribute("class", "service serv-" + index); /* This group is needed to apply animations in the icon and its background at the same time */ var icon_group = createSVGElement("g"); icon_group.setAttribute("class", "icon-wrapper"); var circle = createSVGElement("circle"); setAttributes(circle, { r: circle_radius, cx: center.x, cy: center.y }); var circle_shadow = circle.cloneNode(); setAttributes(circle, { class: 'shadow' }); icon_group.appendChild(circle_shadow); icon_group.appendChild(circle); var symbol = createSVGElement("use"); setAttributes(symbol, { 'x': center.x - icon_size / 2, 'y': center.y - icon_size / 2, 'width': icon_size, 'height': icon_size }); symbol.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#" + serv.icon); icon_group.appendChild(symbol); group.appendChild(icon_group); var text = createSVGElement("text"); setAttributes(text, { x: center.x, y: center.y + circle_radius + text_top_margin }); var tspan = createSVGElement("tspan"); if (serv.name.indexOf('\n') >= 0) { var tspan2 = tspan.cloneNode(); var name = serv.name.split('\n'); jQuery(tspan).text(name[0]); jQuery(tspan2).text(name[1]); setAttributes(tspan2, { x: center.x, dy: tspan_delta }); text.appendChild(tspan); text.appendChild(tspan2); } else { jQuery(tspan).text(serv.name); text.appendChild(tspan); } group.appendChild(text); services.appendChild(group); var service_bubble = jQuery(".serv-" + index); //Uses tween to look for right position twn_pivot_path.seek(index); TweenLite.set(service_bubble, { x: pivot_path.x, y: pivot_path.y, transformOrigin: "center center" }); service_bubble.click(serviceClick); } //Creates pointer function createPointer() { var service_pointer = createSVGElement("circle"); setAttributes(service_pointer, { cx: center.x - pointer_dist, cy: center.y, r: 12, class: "pointer" }); nav_container.appendChild(service_pointer); service_pointer = document.querySelector("svg .pointer"); var pointer_circle = [{ x: 0, y: 0 }, { x: pointer_dist, y: pointer_dist }, { x: pointer_dist * 2, y: 0 }, { x: pointer_dist, y: -pointer_dist }, { x: 0, y: 0 }]; twn_pointer_path.to(service_pointer, pointer_time, { bezier: { values: pointer_circle, curviness: 1.5 }, ease: Power0.easeNone, transformOrigin: "center center" }); } //Defines behavior for service bubbles function serviceClick(ev) { //There's always an active service jQuery(".service.active").removeClass("active"); var current = jQuery(ev.currentTarget); current.addClass("active"); //There's a "serv-*" class for each bubble var current_class = current.attr("class").split(" ")[1]; var class_index = current_class.split('-')[1]; //Hides current text of the main bubble jQuery(use_copy).addClass("changing"); //Sets pointer to the right position twn_pointer_path.tweenTo(class_index * (pointer_time / (2 * 6))); //After it's completely hidden, the text changes and becomes visible setTimeout(function () { var viewBoxY = 300 * class_index; symbol_copy.setAttribute("viewBox", "0 " + viewBoxY + " 300 300"); jQuery(use_copy).removeClass("changing"); }, 250); } //Array describes points for a whole circle in order to get //the right curve var half_circle = [{ x: -serv_dist, y: 0 }, { x: 0, y: serv_dist }, { x: serv_dist, y: 0 }, { x: 0, y: -serv_dist }, { x: -serv_dist, y: 0 }]; //A simple object is used in the tween to retrieve its values var pivot_path = { x: half_circle[0].x, y: half_circle[0].y }; //The object is animated with a duration based on how many bubbles //should be placed var twn_pivot_path = TweenMax.to(pivot_path, 12, { bezier: { values: half_circle, curviness: 1.5 }, ease: Linear.easeNone }); services_data.reduce(function (count, serv) { addService(serv, count); return ++count; }, 0); //The variable is modified inside the function //but its also used later to toggle its class var twn_pointer_path = new TimelineMax({ paused: true }); createPointer(); //Adding it immediately triggers a bug for the transform setTimeout(function () { return jQuery("#service-collection .serv-0").addClass("active"); }, 200);
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>圆形导航-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号