<ul class="paralx-position">
<li class="paralx-dots"><span class="icon-text" id="2">Accelerate</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div2" id="img2" tabindex="0"></img></li>
<li class="paralx-dots"><span class="icon-text" id="3">Transform</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div3" id="img3" tabindex="0"></img></li>
<li class="paralx-dots"><span class="icon-text" id="1">Build</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" class="Active" data-box="div1" id="img1" tabindex="0"><span class="icon-position"><!--<img src="images/logos/noun_build_1909132.svg" class="icon"></img></span></img>--></li>
<li class="paralx-dots"><span class="icon-text" id="4">Ignite</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div4" id="img4" tabindex="0"></img></li>
<li class="paralx-dots"><span class="icon-text" id="5">Develop</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div5" id="img5" tabindex="0"></img></li>
<li class="paralx-dots"><span class="icon-text" id="6">Engineer</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div6" id="img6" tabindex="0"></img></li>
</ul>
</div>
我正在用 css 做这个动画,但它有一些问题
.paralx-dot-1:focus{
animation-name:bright-dot;
animation-duration:1.5s;
height: 24.75px;
width: 24.75px;
outline: none;
-webkit-animation-fill-mode: forwards;
}
@keyframes bright-dot {
from {transform:scale(1,1);}
to {transform:scale(2,2);}
}
在这个 css 中,动画工作正常,它只适用于选定的图像,因为焦点属性,但是当你点击其他任何地方时动画会重置,所以我用 Jquery 尝试了同样的方法,它工作但现在它适用于所有选定的图像,只包含点击的图像
$('.paralx-dot-1').on('click', function () {
$(this).transition({ scale: 1.5 });
});
我用 Jquery 做了同样的功能,但我希望它只适用于选定的图像(点)
(https://ibb.co/PhCZ16f)在这张图片中你可以看到它适用于所有选定的图像,因为它应该适用仅选择图像
希望这是你所期待的,谢谢
$('.paralx-dot-1').on('click', function () {
$(this).transition({ scale: 1.5 });
$(this).parent().siblings().find('img').transition({ scale: 1 });
});
.paralx-dot-1:focus{
animation-name:bright-dot;
animation-duration:1.5s;
height: 24.75px;
width: 24.75px;
outline: none;
-webkit-animation-fill-mode: forwards;
}
@keyframes bright-dot {
from {transform:scale(1,1);};
to {transform:scale(2,2);}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
<ul class="paralx-position">
<li class="paralx-dots"><span class="icon-text" id="2">Accelerate</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div2" id="img2" tabindex="0"></img></li>
<li class="paralx-dots"><span class="icon-text" id="3">Transform</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div3" id="img3" tabindex="0"></img></li>
<li class="paralx-dots"><span class="icon-text" id="1">Build</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" class="Active" data-box="div1" id="img1" tabindex="0"><span class="icon-position"><!--<img src="images/logos/noun_build_1909132.svg" class="icon"></img></span></img>--></li>
<li class="paralx-dots"><span class="icon-text" id="4">Ignite</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div4" id="img4" tabindex="0"></img></li>
<li class="paralx-dots"><span class="icon-text" id="5">Develop</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div5" id="img5" tabindex="0"></img></li>
<li class="paralx-dots"><span class="icon-text" id="6">Engineer</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div6" id="img6" tabindex="0"></img></li>
</ul>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句