以下是 jQuery节点分布圆形循环信息展示js代码 的示例演示效果:
部分效果截图1:
部分效果截图2:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery节点分布圆形循环信息展示</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="src/s8CyrcleInfoBox.css" media="screen" charset="utf-8">
<link rel="stylesheet" href="css/style.css" media="screen" charset="utf-8">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4">
<p class="title">Cyrcleinfo with Default Value</p>
<div class="circle1">
<ul class="circleWrapper wStyle1">
<li>
<div class="circleFeature fStyle1" data-cyrcleBox="f1">Box1</div>
<div class="circleBox" id="f1"> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Eveniet,
dolorem.
</div>
</li>
<li>
<div class="circleFeature fStyle1" data-cyrcleBox="f2">Box2</div>
<div class="circleBox" id="f2">Lorem ipsum dolor sit.</div>
</li>
<li>
<div class="circleFeature fStyle1" data-cyrcleBox="f3">Box3</div>
<div class="circleBox" id="f3"> Lorem ipsum dolor sit amet, consectetur.</div>
</li>
<li>
<div class="circleFeature fStyle1" data-cyrcleBox="f4">Box4</div>
<div class="circleBox" id="f4"><strong>Lorem ipsum dolor</strong> sit amet, consectetur
adipisicing
elit. Eveniet,Lorem ipsum dolor sit amet, consectetur. dolorem.
</div>
</li>
<li>
<div class="circleFeature fStyle1" data-cyrcleBox="f5">Box5</div>
<div class="circleBox" id="f5">, consectet Lorem ipsum dolor.ur adipisicing
elit.
Eveniet, dolorem.
</div>
</li>
<li>
<div class="circleFeature fStyle1" data-cyrcleBox="f6">Box6</div>
<div class="circleBox" id="f6"> Lorem ipsum Lorem ipsum dolor sit. g elit. Eveniet,
dolorem.
</div>
</li>
<li>
<div class="circleFeature fStyle1" data-cyrcleBox="f7">Box7</div>
<div class="circleBox" id="f7"> Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing.
iet,
dolorem.
</div>
</li>
<li>
<div class="circleFeature fStyle1" data-cyrcleBox="f8">Box8</div>
<div class="circleBox" id="f8"> Lorem ipsum Lorem ipsum. adipisicing elit. Eveniet,
dolorem.
</div>
</li>
</ul>
</div>
</div>
<!--Circle 2-->
<div class="col-sm-4">
<p class="title">Clickable without autoSlide</p>
<div class="circle2">
<ul class="circleWrapper wStyle2">
<li>
<div class="circleFeature fStyle2" data-cyrcleBox="cf1"><span
class="fa fa-cloud-upload fa-2x"></span></div>
<div class="circleBox innerStyle2" id="cf1"><strong>box1</strong><br>Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Natus, omnis.
</div>
</li>
<li>
<div class="circleFeature fStyle2" data-cyrcleBox="cf2"><span
class="fa fa-envelope fa-2x"></span></div>
<div class="circleBox innerStyle2" id="cf2"><strong>box2</strong><br>Lorem ipsum donsectetur
adipisicing elit. Natus, omnis.
</div>
</li>
<li>
<div class="circleFeature fStyle2" data-cyrcleBox="cf3"><span
class="fa fa-desktop fa-2x"></span></div>
<div class="circleBox innerStyle2" id="cf3"><strong>box3</strong><br>Lorem ipsum met.
consectetur adipisicing elit. Natus, omnis.
</div>
</li>
<li>
<div class="circleFeature fStyle2" data-cyrcleBox="cf4"><span class="fa fa-coffee fa-2x"></span>
</div>
<div class="circleBox innerStyle2" id="cf4"><strong>box4</strong><br>Lorem ipsum dolor sit amet,
cons ectetur adipisicing elit. Natus, omnis.
</div>
</li>
<li>
<div class="circleFeature fStyle2" data-cyrcleBox="cf5"><span class="fa fa-cog fa-2x"></span>
</div>
<div class="circleBox innerStyle2" id="cf5"><strong>box5</strong><br>Lorem lor sit amet,
consectetur adipisicing elit. Natus, omnis.
</div>
</li>
<li>
<div class="circleFeature fStyle2" data-cyrcleBox="cf6"><span
class="fa fa-commenting fa-2x"></span></div>
<div class="circleBox innerStyle2" id="cf6"><strong>box6</strong><br>Lorem ipisicing. nsectetur
adipisicing elit. Natus, omnis.
</div>
</li>
</ul>
</div>
</div>
<div class="col-sm-4">
<p class="title">500ms speed and Not Responsive</p>
<div class="circle3">
<ul class="circleWrapper wStyle3">
<li>
<div class="circleFeature fStyle3" data-cyrcleBox="c3f1"><strong>1</strong></div>
<div class="circleBox innerStyle3" id="c3f1"><strong>One</strong></div>
</li>
<li>
<div class="circleFeature fStyle3" data-cyrcleBox="c3f2"><strong>2</strong></div>
<div class="circleBox innerStyle3" id="c3f2"><strong>two</strong></div>
</li>
<li>
<div class="circleFeature fStyle3" data-cyrcleBox="c3f3"><strong>3</strong></div>
<div class="circleBox innerStyle3" id="c3f3"><strong>Three</strong></div>
</li>
<li>
<div class="circleFeature fStyle3" data-cyrcleBox="c3f4"><strong>4</strong></div>
<div class="circleBox innerStyle3" id="c3f4"><strong>Four</strong></div>
</li>
<li>
<div class="circleFeature fStyle3" data-cyrcleBox="c3f5"><strong>5</strong></div>
<div class="circleBox innerStyle3" id="c3f5"><strong>Five</strong></div>
</li>
<li>
<div class="circleFeature fStyle3" data-cyrcleBox="c3f6"><strong>6</strong></div>
<div class="circleBox innerStyle3" id="c3f6"><strong>Six</strong></div>
</li>
<li>
<div class="circleFeature fStyle3" data-cyrcleBox="c3f7"><strong>7</strong></div>
<div class="circleBox innerStyle3" id="c3f7"><strong>Seven</strong></div>
</li>
<li>
<div class="circleFeature fStyle3" data-cyrcleBox="c3f8"><strong>8</strong></div>
<div class="circleBox innerStyle3" id="c3f8"><strong>Eight</strong></div>
</li>
<li>
<div class="circleFeature fStyle3" data-cyrcleBox="c3f9"><strong>9</strong></div>
<div class="circleBox innerStyle3" id="c3f9"><strong>Nine</strong></div>
</li>
<li>
<div class="circleFeature fStyle3" data-cyrcleBox="c3f10"><strong>10</strong></div>
<div class="circleBox innerStyle3" id="c3f10"><strong>Ten</strong></div>
</li>
</ul>
</div>
</div>
</div>
<!--second Row for show the Spread Type-->
<h1 style="padding: 33px;
text-align: center;
color: #00b786;">LEFT RIGHT TOP DOWN "The Four Type For Bubble Spread"</h1>
<div class="row">
<div class="col-lg-3 col-sm-6">
<p class="title">Right Style</p>
<div class="circle4">
<ul class="circleWrapper wStyle4">
<li>
<div class="circleFeature fStyle4" data-cyrcleBox="c4f1"><span class="fa fa-male fa-3x"></span></div>
<div class="circleBox" id="c4f1">Lorem ipsum dolor sit.</div>
</li>
<li>
<div class="circleFeature fStyle4" data-cyrcleBox="c4f2"><span class="fa fa-link fa-3x"></span></div>
<div class="circleBox" id="c4f2">Lorem Lorem ipsum dolor sit.ipsum dolor sit.</div>
</li>
<li>
<div class="circleFeature fStyle4" data-cyrcleBox="c4f3"><span class="fa fa-key fa-3x"></span></div>
<div class="circleBox" id="c4f3">Lorem Lorem Lorem ipsum dolor.</div>
</li>
<li>
<div class="circleFeature fStyle4" data-cyrcleBox="c4f4"><span class="fa fa-globe fa-3x"></span></div>
<div class="circleBox" id="c4f4">Lorem Lorem Lorem Lorem ipsum dolor sit amet, consectetur. ipsum dolor.</div>
</li>
</ul>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="circle5">
<p class="title">Left Style</p>
<ul class="circleWrapper wStyle4">
<li>
<div class="circleFeature fStyle4" data-cyrcleBox="c5f1"><span class="fa fa-male fa-3x"></span></div>
<div class="circleBox" id="c5f1">Lorem ipsum dolor sit.</div>
</li>
<li>
<div class="circleFeature fStyle4" data-cyrcleBox="c5f2"><span class="fa fa-link fa-3x"></span></div>
<div class="circleBox" id="c5f2">Lorem Lorem ipsum dolor sit.ipsum dolor sit.</div>
</li>
<li>
<div class="circleFeature fStyle4" data-cyrcleBox="c5f3"><span class="fa fa-key fa-3x"></span></div>
<div class="circleBox" id="c5f3">Lorem Lorem Lorem ipsum dolor.</div>
</li>
<li>
<div class="circleFeature fStyle4" data-cyrcleBox="c5f4"><span class="fa fa-globe fa-3x"></span></div>
<div class="circleBox" id="c5f4">Lorem Lorem Lorem Lorem ipsum dolor sit amet, consectetur. ipsum dolor.</div>
</li>
</ul>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<p class="title">Top Style</p>
<div class="circle6">
<ul class="circleWrapper wStyle4">
<li>
<div class="circleFeature fStyle4" data-cyrcleBox="c6f1"><span class="fa fa-male fa-3x"></span></div>
<div class="circleBox" id="c6f1">Lorem ipsum dolor sit.</div>
</li>
<li>
<div class="circleFeature fStyle4" data-cyrcleBox="c6f2"><span class="fa fa-link fa-3x"></span></div>
<div class="circleBox" id="c6f2">Lorem Lorem ipsum dolor sit.ipsum dolor sit.</div>
</li>
<li>
<div class="circleFeature fStyle4" data-cyrcleBox="c6f3"><span class="fa fa-key fa-3x"></span></div>
<div class="circleBox" id="c6f3">Lorem Lorem Lorem ipsum dolor.</div>
</li>
<li>
<div class="circleFeature fStyle4" data-cyrcleBox="c6f4"><span class="fa fa-globe fa-3x"></span></div>
<div class="circleBox" id="c6f4">Lorem Lorem Lorem Lorem ipsum dolor sit amet, consectetur. ipsum dolor.</div>
</li>
</ul>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<p class="title">bottom Style</p>
<div class="circle7">
<ul class="circleWrapper wStyle4">
<li>
<div class="circleFeature fStyle4" data-cyrcleBox="c7f1"><span class="fa fa-male fa-3x"></span></div>
<div class="circleBox" id="c7f1">Lorem ipsum dolor sit.</div>
</li>
<li>
<div class="circleFeature fStyle4" data-cyrcleBox="c7f2"><span class="fa fa-link fa-3x"></span></div>
<div class="circleBox" id="c7f2">Lorem Lorem ipsum dolor sit.ipsum dolor sit.</div>
</li>
<li>
<div class="circleFeature fStyle4" data-cyrcleBox="c7f3"><span class="fa fa-key fa-3x"></span></div>
<div class="circleBox" id="c7f3">Lorem Lorem Lorem ipsum dolor.</div>
</li>
<li>
<div class="circleFeature fStyle4" data-cyrcleBox="c7f4"><span class="fa fa-globe fa-3x"></span></div>
<div class="circleBox" id="c7f4">Lorem Lorem Lorem Lorem ipsum dolor sit amet, consectetur. ipsum dolor.</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="src/s8CyrcleInfoBox.js" type="text/javascript"></script>
<script>$(".circle1").s8CircleInfoBox()</script>
<script>$(".circle2").s8CircleInfoBox({
autoSlide: false,
action: "click"
})</script>
<script>$(".circle3").s8CircleInfoBox({
notResponsive: true,
hoverStyle:"circleSelect3",
slideSpeed: 500,
breakpoint: 0
})</script>
<script>$(".circle4").s8CircleInfoBox({
hoverStyle: "circleSelect4",
spreadStyle: "right"
})</script>
<script>$(".circle5").s8CircleInfoBox({
hoverStyle: "circleSelect4",
spreadStyle: "left"
})</script>
<script>$(".circle6").s8CircleInfoBox({
hoverStyle: "circleSelect4",
spreadStyle: "top"
})</script>
<script>$(".circle7").s8CircleInfoBox({
hoverStyle: "circleSelect4",
spreadStyle: "bottom"
})</script>
</body>
</html>
JS代码(s8CyrcleInfoBox.js):
(function ($){
$.fn.s8CircleInfoBox = function (options){
// set settings var settings = $.extend({
autoSlide:true,// true or fasle slideSpeed:3000,// speed of auto slide notResponsive:false,// not responsive action:"mouseover",// mouseover,Click for each bubble responsive:true,// true:rechange cyrcle shape with window resize or false:set with fix container breakpoint:760,// its a breakpoint size for breaking to simple list style calculate by PX hoverStyle:"circleSelect",// Get Your Css class for hover Style spreadStyle:"all" // the style of spreading the bubbles Top,lef,right,bottom}
,options);
// define variables var $container = $(this).find(".circleWrapper"),$fields = $container.find(".circleFeature"),fieldsLength = $fields.length,spreadStyle = settings.spreadStyle.toLowerCase(),underBreakPoint = true,// by change of the size it will change $infoBox = $container.find(".circleBox");
var current = 0,// Which circle is currently inflated intervalRef = null;
// reference to the setInterval var radius;
var pauseSlideShow = false;
if(settings.notResponsive){
$infoBox.addClass("noResponsive");
$fields.addClass("noResponsive");
$container.addClass("noResponsive");
}
// make the cyrcle var makeCircle = function (){
var angle = 0;
switch (spreadStyle){
case "left":angle=90;
break;
case "top":angle=180;
break;
case "right":angle= 270;
break;
default:angle=0;
break;
}
var step = (spreadStyle === "all")? 360/ fieldsLength:180 / (fieldsLength-1);
$container.css("height",$container.width());
radius = $container.width() / 2;
$fields.css("lineHeight",$fields.height() + "px");
// spin around container by transform from center $fields.each(function (){
var $this = $(this);
$this.css({
'transform':'rotate(' + angle + 'deg) translate(' + radius + 'px) rotate(' + (-1*angle) + 'deg)'}
) angle+=step;
}
)}
;
var boxId;
// Pass in a jquery selection for which circle to inflate var inflate = function ($which){
$fields.removeClass(settings.hoverStyle);
boxId = $which.attr("data-cyrcleBox");
$which.addClass(settings.hoverStyle);
$infoBox.filter("#" + boxId).fadeIn();
}
;
var deflate = function ($which){
$infoBox.fadeOut();
$which.removeClass(settings.hoverStyle);
}
;
if (settings.autoSlide){
var intervalAnimation = function (){
return setInterval(function (){
if (!pauseSlideShow){
deflate($($fields[current]));
current = ( current + 1 ) % fieldsLength;
inflate($($fields[current]));
}
}
,settings.slideSpeed);
}
,firstTimeKickOff = function (){
intervalRef = intervalAnimation();
}
;
// On hover over the container (not individual circles) then pause animation $container.hover(function (e){
pauseSlideShow = true;
}
,function (){
if (!underBreakPoint) pauseSlideShow = false;
}
);
}
// On hover over particular circle $fields.on(settings.action,function (){
if (current != $(this).parent().index() && !underBreakPoint){
$infoBox.fadeOut();
current = $(this).parent().index();
inflate($(this));
}
}
);
// If they shrink the browser,pause the animation;
else turn it back on. $(window).resize(function (){
if(settings.responsive && !underBreakPoint){
makeCircle();
}
if ($(window).width() < settings.breakpoint){
underBreakPoint = true;
pauseSlideShow = true;
$fields.removeClass(settings.hoverStyle);
$container.css("height","auto");
}
else{
underBreakPoint = false;
pauseSlideShow = false;
if (intervalRef === null && settings.autoSlide){
firstTimeKickOff();
}
}
}
);
if ($(window).width() >= settings.breakpoint ){
makeCircle();
underBreakPoint = false;
if(settings.autoSlide) firstTimeKickOff();
}
}
}
)(jQuery);
CSS代码(s8CyrcleInfoBox.css):
.circleWrapper{width:75%;height:75%;border-radius:100%;position:relative;margin:50px auto;}
ul.circleWrapper{list-style-type:none;padding:0;display:block;}
ul.circleWrapper li{display:block;}
.circleFeature{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;cursor:pointer;border-radius:100%;text-align:center;-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-ms-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s;z-index:99999;width:23%;height:23%;}
.circleBox{width:50%;position:absolute;margin:auto;right:0;left:0;top:50%;text-align:center;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);display:none;}
ul.circleWrapper li:first-child .circleBox{display:block;}
.circleSelect{padding:6px;box-sizing:content-box;}
.circleFeature span{vertical-align:middle;display:inline-block;}
@media screen and (max-width:768px){.circleWrapper:not(.noResponsive){border-radius:0;border:none;width:100%;}
.circleWrapper:not(.noResponsive) li{margin-bottom:20px;}
.circleBox:not(.noResponsive){padding:16px 10px;display:block !important;position:static;-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none;}
.circleFeature:not(.noResponsive){position:static;display:block;width:75px;height:75px;line-height:75px !important;margin:auto;-webkit-transform:none !important;-moz-transform:none !important;-ms-transform:none !important;-o-transform:none !important;transform:none !important;}
}
CSS代码(style.css):
.container{padding:50px;background-color:#f1f1f1;border-radius:5px;font-family:sans-serif;}
p.title{text-align:center;font-weight:700;font-size:20px;color:#777;}
.wStyle1{border:3px dashed rgb(250,132,64);}
.fStyle1{background-color:rgb(250,132,64);color:#fff;font-weight:600;}
.circle2{box-sizing:border-box;}
.fStyle2{background:#fff;border:2px dotted #aaa;}
.wStyle2{border:2px dotted #aaa;}
.innerStyle2{background-color:#f9f9f9;width:70% !important;height:70% !important;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:15% 22px;}
.innerStyle3{font-size:25px;font-weight:900;}
.circleSelect3{background-color:#fafafa;}
.fStyle4{background-color:#00b786;color:#fff;}
.fStyle4 span{font-size:23px;}
.wStyle4{border:2px solid #00b786;}
.circleSelect4:after{content:"";width:80%;height:80%;border:2px solid #fff;position:absolute;z-index:999;border-radius:50%;top:0;left:0;right:0;bottom:0;margin:auto;}
@media screen and (max-width:768px){.innerStyle2{background:none;}
}
分享到QQ
分享到微博
微信扫一扫
