html - 带有部分的 SVG 圆圈，与其他 div 间隔自动更改，如果单击部分显示选定的 div。

标签 html css svg frontend

我知道标题令人困惑，但这正是我的意思:

我有一个像链接预览一样分为 5 个部分的 SVG 圆圈

右侧有一个 div，它根据圆圈的选定部分更改其内容，例如，如果选定的部分是数字 3

该部分的文本变为白色，路径的背景变为蓝色，右侧的 div 将其内容更改为所选部分。

我的问题是，我需要制作相同的功能，但我需要它是自动的，这意味着要从第一部分进行更改--二--三--四五，并且右侧 div 上的内容应该也以相同的间隔改变。我试过使用 JavaScript 的间隔，它确实有效，但只适用于其中一个部分，即圆圈或 div。

如有任何帮助，我们将不胜感激。

这是实例 link to live example

代码:

HTML:

<div class="whatwedosection" style="position: relative;">
        <p class="title1">OUR PRODUCTS</p>
        <p class="title2">OUR APPS for Salesforce.com</p>
        <div class="line" style="margin-bottom: 30px;"></div>

        <div class="row">
            <div class="col-md-2"></div>
              <div class="col-md-3">

              <svg viewBox='0 0 110 110' style="margin-top: 10px;transform: rotate(18deg);">
                 <defs>                   <!-- Circular path with a radius of 40 -->

                   <path id="clockwise" d='M55,15 A40,40 0 0 1 55,95 A40,40 0 0 1 55,15'
                         transform="rotate(-54,55,55)"/>

                   <path id="counterclockwise" d="M35,93 a55,95 0 0,0 40,0" transform="rotate(-55,55,55)"></path>
                   <path id="counterclockwise2" d="M35,93 a55,95 0 0,0 40,0" transform="rotate(7,55,55)"></path>



                 </defs>


                 <a xlink:href="" style="text-decoration: none;">
                    <path  class="frag logoa" id="f1" data-link="1" d='M55,55 L14.54915028125263,25.61073738537635 A50,50 0 0,1 70.45084971874736,7.447174185242318z' >
                    </path>
                    <text class="zone textosvg1" data-link="1" >
                       <textPath xlink:href="#clockwise" startOffset="10%" text-anchor="middle" >
                          one
                       </textPath>
                    </text>
                 </a>


                 <a xlink:href="" style="text-decoration: none;">
                    <path class="frag logoa" id="f2" data-link="2"  d='M55,55 L70.45084971874736,7.447174185242318 A50,50 0 0,1 105,54.999999999999986z' ></path>
                    <text class="zone textosvg2" data-link="2" >
                       <textPath xlink:href="#clockwise" startOffset="30%" text-anchor="middle">
                          two
                       </textPath>
                    </text>
                 </a>



                 <a xlink:href="" style="text-decoration: none;">
                    <path class="frag logoa" id="f3" data-link="3"  d='M55,55 L105,55 A50,50 0 0,1 70.45084971874738,102.55282581475768z'></path>
                    <text class="zone textosvg3" data-link="3"  >
                       <textPath xlink:href="#counterclockwise"  x="5" y="50"  startOffset="50%" text-anchor="middle">
                          three
                       </textPath>
                    </text>

                 </a>


                 <a xlink:href="" style="text-decoration: none;" >
                    <path class="frag logoa" id="f4" data-link="4" d='M55,55 L70.45084971874738,102.55282581475768 A50,50 0 0,1 14.549150281252636,84.38926261462366z' ></path>
                    <text class="zone textosvg4" data-link="4" >
                       <textPath xlink:href="#counterclockwise2"  x="5" y="50"  startOffset="30%" text-anchor="middle">
                         four
                       </textPath>
                    </text>
                 </a>
                 <a xlink:href=""  style="text-decoration: none;" >
                    <path class="frag logoa" id="f5" data-link="5" d='M55,55 L14.549150281252636,84.38926261462366 A50,50 0 0,1 14.54915028125263,25.61073738537635z' ></path>
                    <text class="zone textosvg5" data-link="5" >
                       <textPath xlink:href="#clockwise"  startOffset="90%" text-anchor="middle">
                         five
                       </textPath>
                    </text>
                 </a>
                 <circle class="cente" cx='55' cy='55' r='35' ></circle>
                 <circle class="minicirculo" cx='55' cy='55' r='15' ></circle>
              </svg>

            </div>
             <div class="col-md-5" >
                <div class="casa monitores" data-link="1">
                    <div class="fixed">
                      <img src="http://placehold.it/200x200" class="sideruedai">
                    </div>
                    <div class="flex-item">
                    <p class="title22" style="margin-top: 15px;" >first</p>
                    <p class="textsliderp" style="margin-top: -20px;">first</p>
                    <p class="textoinfo">
                   first
                    </p>
                   <button class="botonavandel hvr-grow">Read More</button></div>
                </div>

                <div class="casa monitores" data-link="2">
                    <div class="fixed">
                      <img src="http://placehold.it/200x200" class="sideruedai">
                    </div>
                    <div class="flex-item">
                    <p class="title22" style="margin-top: 15px;" >Second</p>
                    <p class="textsliderp" style="margin-top: -20px;">Second</p>
                    <p class="textoinfo">
                    second
                    </p>
                   <button class="botonavandel hvr-grow">Read More</button></div>
                </div>

                <div class="casa monitores" data-link="3">
                    <div class="fixed">
                      <img src="http://placehold.it/200x200" class="sideruedai">
                    </div>
                    <div class="flex-item">
                    <p class="title22" style="margin-top: 15px;" >third</p>
                    <p class="textsliderp" style="margin-top: -20px;">third</p>
                    <p class="textoinfo">
                    third
                    </p>
                   <button class="botonavandel hvr-grow">Read More</button></div>
                </div>

                <div class="casa monitores" data-link="4">
                    <div class="fixed">
                      <img src="http://placehold.it/200x200" class="sideruedai">
                    </div>
                    <div class="flex-item">
                    <p class="title22" style="margin-top: 15px;" >four</p>
                    <p class="textsliderp" style="margin-top: -20px;">four</p>
                    <p class="textoinfo">
                    four
                   <button class="botonavandel hvr-grow">Read More</button></div>
                </div>

                <div class="casa monitores" data-link="5">
                    <div class="fixed">
                      <img src="http://placehold.it/200x200" class="sideruedai">
                    </div>
                    <div class="flex-item">
                    <p class="title22" style="margin-top: 15px;" >fifth</p>
                    <p class="textsliderp" style="margin-top: -20px;">fifth</p>
                    <p class="textoinfo">
                    fifth.
                    </p>
                   <button class="botonavandel hvr-grow">Read More</button></div>
                </div>




             <div class="col-md-2" >

            </div>
          </div>  
        </div>


    </div>

CSS:

.textosvg1{
  fill:gray;
  font-size: 6px;
}
.textosvg2{
  fill:gray;
  font-size: 6px;
}
.textosvg3{
  fill:gray;
  font-size: 6px;
}
.textosvg4{
  fill:gray;
  font-size: 6px;
}
.textosvg5{
  fill:gray;
  font-size: 6px;
}
.textosvg6{
  fill:gray;
  font-size: 6px;
}

.slidertext{
  font-size: 14px;
  color:#1456a0;
  text-align: left;s
}
.frag {
  fill: white;
  stroke: black;
  stroke-width: .5;
  transition: fill 0.3s ;
}
text a {
  text-anchor: middle;
  dominant-baseline: middle; /* doesn't work in IE */
  text-decoration: none;
  color: gray;
}

JS:

$('.monitores:not(:nth-child(1))').hide();
 $('.textosvg1').css({ fill: 'white' });
 $('#f1').css({ fill: '#1456a0' });

    $('.zone').click(
        function() {
            $('.monitores').hide();
            $('.monitores[data-link=' + $(this).data('link') + ']').fadeIn();

        });


    $('.textosvg1').click(function() {
        $('.textosvg1').css({ fill: 'white' });
        $('#f1').css({ fill: '#1456a0' });

        $('.textosvg2').css({ fill: 'gray' });
        $('#f2').css({ fill: 'white' });

        $('.textosvg3').css({ fill: 'gray' });
        $('#f3').css({ fill: 'white' });

        $('.textosvg4').css({ fill: 'gray' });
        $('#f4').css({ fill: 'white' });

        $('.textosvg5').css({ fill: 'gray' });
        $('#f5').css({ fill: 'white' });


    });
    $('.textosvg2').click(function() {
        $('.textosvg2').css({ fill: 'white' });
        $('#f2').css({ fill: '#1456a0' });

        $('.textosvg1').css({ fill: 'gray' });
        $('#f1').css({ fill: 'white' });

        $('.textosvg3').css({ fill: 'gray' });
        $('#f3').css({ fill: 'white' });

        $('.textosvg4').css({ fill: 'gray' });
        $('#f4').css({ fill: 'white' });

        $('.textosvg5').css({ fill: 'gray' });
        $('#f5').css({ fill: 'white' });

    });

     $('.textosvg3').click(function() {
        $('.textosvg3').css({ fill: 'white' });
        $('#f3').css({ fill: '#1456a0' });

        $('.textosvg1').css({ fill: 'gray' });
        $('#f1').css({ fill: 'white' });

        $('.textosvg2').css({ fill: 'gray' });
        $('#f2').css({ fill: 'white' });

        $('.textosvg4').css({ fill: 'gray' });
        $('#f4').css({ fill: 'white' });

        $('.textosvg5').css({ fill: 'gray' });
        $('#f5').css({ fill: 'white' });

    });
     $('.textosvg4').click(function() {
        $('.textosvg4').css({ fill: 'white' });
        $('#f4').css({ fill: '#1456a0' });

        $('.textosvg1').css({ fill: 'gray' });
        $('#f1').css({ fill: 'white' });

        $('.textosvg2').css({ fill: 'gray' });
        $('#f2').css({ fill: 'white' });

        $('.textosvg3').css({ fill: 'gray' });
        $('#f3').css({ fill: 'white' });

        $('.textosvg5').css({ fill: 'gray' });
        $('#f5').css({ fill: 'white' });

    });
    $('.textosvg5').click(function() {
        $('.textosvg5').css({ fill: 'white' });
        $('#f5').css({ fill: '#1456a0' });

        $('.textosvg1').css({ fill: 'gray' });
        $('#f1').css({ fill: 'white' });

        $('.textosvg2').css({ fill: 'gray' });
        $('#f2').css({ fill: 'white' });

        $('.textosvg3').css({ fill: 'gray' });
        $('#f3').css({ fill: 'white' });

        $('.textosvg4').css({ fill: 'gray' });
        $('#f4').css({ fill: 'white' });

    });

最佳答案

我自己找到了解决方案，在 Jquery 中创建了不同的函数以备不时之需!

事情是有一个变量来检查在间隔期间是否单击了某些东西停止它然后清空每种颜色。

var cont = 1;
var clicked = false;
var intervalo;


function spinner(c){
     intervalo = setInterval( function (){
            if (cont==5) {
                $('.textosvg' + cont).css({ fill: 'gray' });
                $('#f' + cont).css({ fill: 'white' });
                cont = 0;
                $('.textosvg' + cont).css({ fill: 'white' });
                $('#f' + cont).css({ fill: '#1456a0' });
            }
         $('.textosvg' + cont).css({ fill: 'gray' });
         $('#f' + cont).css({ fill: 'white' });
        cont++; 
         $('.textosvg' + cont).css({ fill: 'white' });
         $('#f' + cont).css({ fill: '#1456a0' });
        var first = $(".monitores:first-of-type").remove();
        $(".monitores").parent().append(first);


    }, 2300); 


}

spinner(cont);

$(document).on("click","path,text",function() {
     clicked = true;
     var element =  $('.monitores[data-link=' + $(this).attr('data-link') + ']').remove();
     $(".monitores").parent().prepend(element);
       if (clicked == true) {
        clearInterval(intervalo);
        vaciarCircle();
        var pat =  ('.textosvg' + $(this).attr('data-link') + '');
        var txt =  ('#f' + $(this).attr('data-link') + '');
        $(pat).css({ fill: 'white' });
        $(txt).css({ fill: '#1456a0' });
    }

});

function vaciarCircle(){
    for (var i = 5; i >= 0; i--) {
            $('.textosvg' + i).css({ fill: 'gray' });
            $('#f' + i).css({ fill: 'white' });
        }
}

关于html - 带有部分的 SVG 圆圈，与其他 div 间隔自动更改，如果单击部分显示选定的 div。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45925277/

上一篇：html - Jekyll 帖子显示内容，但没有正确格式化正确的布局

下一篇：html - 使用 Flexbox 的响应式导航菜单

相关文章：

html - 如何让 "fit-content"占据全 Angular ？ (CSS)

xml - 使用 XSLT 和 SVG 从 XML 创建条形图 - 缩放条形图

javascript - 在 svg 中渲染 javascript

java ->> 转换为 ï¿

python - 如何在使用 Beautifulsoup find_all 时跳过标签？

css - 对于布局，Flexbox 的宽度和高度是否与常规盒模型相同？

javascript - 如何获取 SVG 变换属性的矩阵元素

css - 带无序列表的导航栏

html - <td> 上的溢出属性不会创建滚动条

jquery - 我正在尝试访问一个类(class)，但我无法访问

©2024 IT工具网  联系我们