fügen Sie kreisförmige Linie in Symbolkreis ein

Ich versuche, einen kreisförmigen Ikonenhalter zu schaffen. Alles funktioniert perfekt, aber ich möchte eine kreisförmige Linie hinzufügen, die alle Symbole verbindet, um einen Kreis zu erstellen. Hier ist, was ich will fügen Sie kreisförmige Linie in Symbolkreis ein

Hier ist, was ich derzeit bin haben

Hier die Codes verwende ich

<div class="three60_wrapper clearfix"> 


    <ul> 
     <li><img src="image url" alt="logo"></li> 
     <li><a href=""><img src="image url" alt="360 icon"></a> 
     </li> 
     <li><a href=""><img src="image url" alt="360 icon"></a> 
     </li> 
     <li><a href=""><img src="image url" alt="360 icon"></a> 
     </li> 
     <li><a href=""><img src="image url" alt="360 icon"></a> 
     </li> 
     <li><a href=""><img src="image url" alt="360 icon"></a> 
     </li> 
     <li><a href=""><img src="image url" alt="360 icon"></a> 
     </li> 
     <li><a href=""><img src="image url" alt="360 icon"></a> 
     </li> 


    </ul> 


</div> 


.three60_wrapper ul { 


    list-style-type: none; 
    padding: 0; position: relative; 

} 
.three60_wrapper li { 
    position: absolute; 
    -webkit-transition: all 2s linear; 
    -moz-transition: all 2s linear; 
    transition: all 2s linear; 
} 

.three60_wrapper li a{ display: block; 
} 
.three60_wrapper li img{ display: block; min-width: 130px; height: auto; max-width: 180px;} 




jQuery(function() { 

    var type = 1, //circle type - 1 whole, 0.5 half, 0.25 quarter 
    radius = '20em', //distance from center 
    start = -90, //shift start from 0 
    $elements = jQuery('.three60_wrapper ul li:not(:first-child)'), 
    numberOfElements = (type === 1) ? $elements.length : $elements.length - 1, //adj for even distro of elements when not full circle 
    slice = 360 * type/numberOfElements; 

$elements.each(function(i) { 
    var $self = jQuery(this), 
     rotate = slice * i + start, 
     rotateReverse = rotate * -1; 

    $self.css({ 
     'transform': 'rotate(' + rotate + 'deg) translate(' + radius + ') rotate(' + rotateReverse + 'deg)' 
    }); 
}); 


});

es basiert man diese jsfiddle

Quelle

2017-05-05 t.i.rony

Haben Sie das mit SVG gemacht? – Manngo

Wenn Sie nicht mit SVG arbeiten, können Sie auch das oberste Bild und das Image verwenden. –

@GaryHayes Ich denke OP will auch den dynamischen Effekt nach der Geige. – Manngo

Dies wird fast Sie bekommen, was ich glaube, Sie wollen:

li:first-child { 
    border: medium solid red; 
    width: 24em; 
    height: 24em; 
    margin-left: -10em; 
    margin-top: -10em; 
    border-radius: 50%; 
}

Sie benötigen würde mehr den tatsächlichen Dimensionen zu experimentieren. Sie müssen auch z-index Werte hinzufügen, um sicherzustellen, dass die tatsächlichen Symbole vor dem Kreis sind.

Quelle

2017-05-05 06:54:01 Manngo

es funktioniert für mich. das war einfach danke. Gibt es eine bessere Lösung, die Sie vorschlagen können, um diese Art von Cicular Icons zu machen? Danke noch einmal –

Wäre es nicht möglich, einen Kreis zu erstellen und den vorhandenen UL der Bilder zu überlappen, lösen Sie das, was Sie suchen zum?

Quelle

2017-05-05 06:48:14

fügen Sie kreisförmige Linie in Symbolkreis ein

Antwort

Verwandte Themen