主页 / user-256479

Елизавета Чепцова's questions

Martin Hope
Елизавета Чепцова
Asked: 2020-10-18 06:33:02 +0000 UTC
  • -1

请告诉我如何修复代码。现在，如果有一个 querySelector，那么脚本可以工作，但只有一个 h1，如果我们将其更改为 getElementsByTagName()，那么脚本将完全停止工作。

var h = document.querySelector('h1');
var p = h.getBoundingClientRect();
var c = document.querySelector('.cursor');

document.body.onmousemove = function(e) {
  /*Adjust the position of the cursor*/
  c.style.left = e.clientX - 50 + 'px';
  c.style.top = e.clientY - 50 + 'px';
  /*Adjust the radial-gradient*/
  h.style.setProperty('--x', (e.clientX - p.top) + 'px');
  h.style.setProperty('--y', (e.clientY - p.left) + 'px');
}
h1 {
  color: #000;
  display: inline-block;
  margin: 50px;
  text-align: center;
  position: relative;
}

h1:before {
  position: absolute;
  content: attr(data-text);
  color: #fff;
  background: #000;
  clip-path: circle(50px at var(--x, -100px) var(--y, -100px));
}

.cursor {
  position: fixed;
  background: #000;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  top: calc(calc(var(--y) * 1px) - 50px);
  left: calc(calc(var(--x) * 1px) - 50px);
  z-index: -2;
}
<h1 data-text="WORK1">WORK1</h1>
<h1 data-text="WORK2">WORK2</h1>
<h1 data-text="WORK">WORK</h1>




<span class="cursor"></span>

代码笔

javascript
Martin Hope
Елизавета Чепцова
Asked: 2020-07-10 20:50:03 +0000 UTC
  • 2
    <header>
       <input><button>Start</button> 
        <div class="container">
            <ul>
                <li><a href="#slideshow">Главная</a></li>
                <li><a href="#services">Услуги</a></li>
                <li><a href="#portfolio">Портфолио</a></li>
                <li><a href="#prices">Цены</a></li>
                <li><a href="#contacts">Контакты</a></li>
            </ul>
        </div>
    </header>

           var owl = $('.owl-carousel');
owl.on('initialized.owl.carousel', function() {
  console.log('установлен');
});
        $('.lp-slider2').owlCarousel({
            items: 1,
            nav: true,
            navText: ['<i class="fa fa-chevron-left"></i>', '<i class="fa fa-chevron-right"></i>'],
            animateOut: 'fadeOut',

       margin:10,
    responsive:{
        0:{
            items:6
        },
        600:{
            items:5
        },            
        960:{
            items:3
        },
        1200:{
            items:1
        }
    }
    }).on('resize.owl.carousel', function() {
  console.log('resized');
}).on('translated.owl.carousel', function() {
  console.log('слайд прееключен');
});

    });
javascript
Martin Hope
Елизавета Чепцова
Asked: 2020-07-05 19:24:58 +0000 UTC
  • 1

通过菜单项，同样校正设置为40px。代码需要改进，以便可以通过data-offset标签属性单独设置此修改section。那些。可以为一个屏幕60px、另一个屏幕20px等设置修正。

(function ($) {
        $(document).ready(function () {
    
          
            function lpHeader() {
                if ($(window).scrollTop() == 0) {        $('header').addClass('top'); 
                } else {
                    $('header.top').removeClass('top'); 
                }
            }
            
            lpHeader(); 
            $(window).on('scroll', lpHeader);
          
            var lpNav = $('header ul');
            
            lpNav.find('li a').on('click', function (e) {
                
                var linkTrgt = $($(this).attr('href'));
                if (linkTrgt.length > 0) { 
                    e.preventDefault(); 
                    var offset = linkTrgt.offset().top; 
                    $('body, html').animate({
                        scrollTop: offset - 40
                    }, 750);
                }
            });
    
           
            function lpSetNavActive() {
                
                var curItem = '';
                
                $('section').each(function () {
                     
                    if ($(window).scrollTop() > $(this).offset().top - 200) {
                        curItem = $(this).attr('id');
                    }
                });
            
          
                if (lpNav.find('li.active a').attr('href') != '#' + curItem || lpNav.find('li.active').length == 0) {
                    
                    lpNav.find('li.active').removeClass('active');
                    
                    lpNav.find('li a[href="#' + curItem + '"]').parent().addClass('active');
                }
            }
            
            lpSetNavActive();
            $(window).on('scroll', lpSetNavActive);
    
        });
    })(jQuery);
header {
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.3);
        width: 100%;
        z-index: 100;
    }
    
    header ul {
        padding: 0;
        margin: 0;
        text-align: center;
    }
    
    header ul li {
        display: inline-block;
    }
    
    header ul li a,
    header ul li a:focus {
        display: inline-block;
        padding: 10px 20px;
        color: #fff;
        text-transform: uppercase;
        text-decoration: none;
        transition: color .25s, padding .25s;
    }
    
    header ul li a:hover,
    header ul li.active a {
        color: #337ab7;
        text-decoration: none;
    }
    
    header.top ul li a {
        padding-top: 15px;
        padding-bottom: 15px;
    }
    
    .lp-content {
        min-height: 500px;
        border: 1px dashed red;
        padding: 40px 0;
    }
    
    .lp-content h2 {
        text-align: center;
        color: #337ab7;
        margin: 0 0 20px 0;
    }
    
    footer {
        background: #337ab7;
        padding: 25px;
    }
    
    footer p {
        text-align: center;
        margin: 0;
        color: #fff;
    }
<!DOCTYPE html>
<html lang="ru">

    <head>
        <meta charset="UTF-8">
        <title>Landing Page</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    
    <body>
    
        <header>
            <div class="container">
                <ul>
                    <li><a href="#slideshow">Главная</a></li>
                    <li><a href="#services">Услуги</a></li>
                    <li><a href="#portfolio">Портфолио</a></li>
                    <li><a href="#prices">Цены</a></li>
                    <li><a href="#contacts">Контакты</a></li>
                </ul>
                
            </div>
        </header>
    
        <section id="slideshow" >
            <div class="container">
                <div class="lp-content">
                    <h2>Слайдшоу</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam quos modi omnis deleniti enim labore totam laudantium minus doloremque ab qui, illo aspernatur, sit cum error eum repudiandae tenetur ea.</p>
                </div>
            </div>
        </section>
    
        <section id="services">
            <div class="container">
                <div class="lp-content">
                    <h2>Наши услуги</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam quos modi omnis deleniti enim labore totam laudantium minus doloremque ab qui, illo aspernatur, sit cum error eum repudiandae tenetur ea.</p>
                </div>
            </div>
        </section>
    
        <section id="portfolio" data-offset="20">
            <div class="container">
                <div class="lp-content">
                    <h2>Наши работы</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam quos modi omnis deleniti enim labore totam laudantium minus doloremque ab qui, illo aspernatur, sit cum error eum repudiandae tenetur ea.</p>
                </div>
            </div>
        </section>
    
        <section id="prices">
            <div class="container">
                <div class="lp-content">
                    <h2>Наши цены</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam quos modi omnis deleniti enim labore totam laudantium minus doloremque ab qui, illo aspernatur, sit cum error eum repudiandae tenetur ea.</p>
                </div>
            </div>
        </section>
    
        <section id="contacts">
            <div class="container">
                <div class="lp-content">
                    <h2>Контакты</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam quos modi omnis deleniti enim labore totam laudantium minus doloremque ab qui, illo aspernatur, sit cum error eum repudiandae tenetur ea.</p>
                </div>
            </div>
        </section>
    
        <footer>
            <div class="container">
                <p>© Landing Page 2017</p>
            </div>
    
        </footer>
      
    
    </body>
    
    </html>

javascript