Задать вопрос
Ответы пользователя по тегу CSS
  • Как на JS узнать deg курсора относительно какой-то условной точки?

    @Ridz
    <!DOCTYPE html>
    <html>
    <head>
      <title>Untitled</title>
      <style type="text/css">
      body {
          position: relative;
      }
    
      .target  {
      position: absolute;
      top: 190px; left: 190px;
      width: 60px; height: 60px;
      border-radius: 50%;
      background-color: red;
      text-align: center;
      line-height: 60px;
      color: #FFFFFF;
      }
    
      .line {
      position: absolute;
      top: 220px;
      left: 220px;
      width: 100px;
      height: 4px;
      background-color: red;
      transform-origin: 0;
      }
    
      </style>
      <script>
      document.addEventListener('DOMContentLoaded', function() {
        const target = document.querySelector('.target');
        const line = document.querySelector('.line');
        const pos = {left : 190, top : 190, width : 60, height : 60};
        const lft = pos.left + pos.width / 2;
        const tp = pos.top + pos.height / 2;
        document.addEventListener('mousemove',
        function(event) {
                   let x = event.pageX - lft - 8;
                   let y = event.pageY - tp - 8;
                   let r = Math.sqrt(x * x + y * y);
                   let deg = 180 / Math.PI * Math.atan2(y, x);
                   if(deg < 0) deg += 360;
                   target.innerHTML = (deg|0) + ' deg'
                   line.style.transform = "rotate(" + deg + "deg)";
                   line.style.width = r + 'px'
    
        })
      });
      </script>
    </head>
    <body>
      <div class="line"></div>
      <div class="target"></div>
    </body>
    </html>
    Ответ написан
    Комментировать
  • Почему не работают кнопки на слайдере?

    @Ridz
    $('.nav_btn').click(function() {
            navBtnId = $(this).index();

    заменить на
    $('.nav_btn').on("click", "label", function() {
                    navBtnId = $('.nav_btn label').index(this);
    Ответ написан
    1 комментарий
  • Как реализовать такие dots в slick slider?

    @Ridz
    пример

    <style type="text/css">
      .slick-dots li button:before{
        background-color:#000000;
        top:10px;
        content:'';
        width:1px;
        height:26px;
      }
    
      .slick-dots li.slick-active button:before{
        background-color:#FECC02;
        top:0;
        height:49px;
      }
      </style>
    Ответ написан
    Комментировать
  • Как можно реализовать подобный слайдер?

    @Ridz
    минимализм на тему слайдера, ждите загрузки фото
    <!DOCTYPE html>
    
    <html>
    <head>
      <title>Untitled</title>
      <meta charset="utf-8">
      <style type="text/css">
      body,html{
        height:100%;
      }
    
      #slider>div{
        position:absolute;
        background-size:cover;
        width:20%;
        height:50%;
        transition:all 1s;
        text-align:center;
        line-height:20em;
        background-color: rgba(51, 102, 0, 1);
      }
    
      #slider>div span{
        opacity:0;
        font-size:72px;
        color:rgba(255,255,255,1);
      }
    
      #slider{
        position:relative;
        overflow:hidden;
        width:100%;
        height:100%;
      }
    
      #slider>div:nth-child(1){
        left:-20%;
        top:-50%;
      }
    
      #slider>div:nth-child(2){
        left:0;
        top:0;
      }
    
      #slider>div:nth-child(3){
        left:0%;
        top:50%;
      }
    
      #slider>div:nth-child(4){
        left:20%;
        top:0%;
        width:60%;
        height:100%;
      }
    
      #slider>div:nth-child(4) span{
        opacity:1;
        transition:.8s 1.4s;
      }
    
      #slider>div:nth-child(5){
        left:80%;
        top:0%;
      }
    
      #slider>div:nth-child(6){
        left:80%;
        top:50%;
      }
    
      #slider>div:nth-child(7){
        left:100%;
        top:0%;
      }
    
      #slider>div:nth-child(6)~div{
        visibility:hidden;
      }
      </style>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script>
    $(function() {
    (function fn()
    {
       $("#slider > div:nth-child(1)").appendTo("#slider");
       window.setTimeout(fn,3000)
    }())
    });
      </script>
    </head>
    
    <body>
    <div id="slider">
    <div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=1)"><span>paris</span></div>
    <div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=2)"><span>paris</span></div>
    <div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=3)"><span>paris</span></div>
    <div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=4)"><span>paris</span></div>
    <div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=5)"><span>paris</span></div>
    <div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=6)"><span>paris</span></div>
    <div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=7)"><span>paris</span></div>
    <div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=8)"><span>paris</span></div>
    <div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=9)"><span>paris</span></div>
    <div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=10)"><span>paris</span></div>
    </div>
    
    </body>
    </html>
    Ответ написан
    Комментировать
  • Есть ли адаптивные аналоги Slidable.js?

    @Ridz
    убрать все вызовы slidable() из кода
    поставить это
    jQuery(function() {
        function init() {
            jQuery(".slidable .tall").each(function(indx, element) {
                var height = jQuery(this).data("height");
                if (height) {
                    jQuery(this).css({"height": ""});
                    jQuery(this).removeData("height")
                }
            });
            jQuery(".slidable .controller").remove();
            if (jQuery(window).width() < 426) jQuery(".slidable").slidable({
                minimal: 200,
                speed: 800,
                controls: ["<span>Читать далее</span>", "<span>Скрыть</span>"]
            })
        }
        jQuery(window).resize(init);
        init()
    });
    Ответ написан
  • Почему не работает слайдер?

    @Ridz
    в html пропущен закрывающий тег, сам скрипт запускать через DOMContentLoaded или ставить в конец страницы
    Ответ написан
    1 комментарий