个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 03:06:30 25 4
gpt4 key购买 nike

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

我有一个像链接预览一样分为 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/

25 4 0
文章推荐： javascript - 添加一个类到 input[text]/delete previous append
文章推荐： html - 使用 Flexbox 的响应式导航菜单
文章推荐： html - Jekyll 帖子显示内容，但没有正确格式化正确的布局
文章推荐： html - 为什么带有非常大的 h.264 编码 mp4(带有 +faststart，即开头的元数据)的 HTML5 视频需要很长时间才能加载？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com