frontend - 虽然不需要高对比度模式（括号预览）

Question

您好，提前感谢您的帮助...我一直在网站上工作，最近在该网站上添加了一些 jquery（我不确定这是否是我的问题的原因），尽管我觉得值得指出在我添加 jquery 之前没有遇到问题......我还使用 gimp 为我的背景图像添加了渐变。当我单击实时预览时，我正在使用 Adobe Brackets 开发此站点。该站点现在显示为“高对比度模式”。我从来没有选择这个。我确信它与我的代码或添加了渐变的背景图像有关，而不是与任何括号或 Chrome 设置有关...这是因为当我预览同一站点的早期版本（pre-jquery/gradient）时，它们不会显示在“高对比度”模式下...我对此不是 100% 确定...在 o 之前我错了。

谢谢...这是我的代码...

索引.html：

<!DOCTYPE html>
<html>
<head lang="en">

    <title>background image test</title>  
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <link rel="stylesheet" href="style.css">

    
</head>

<body>
    <nav>
        <div class="logo">
            <h4>Marilyn Voicing</h4>
        </div>
                <ul class="nav-links">
                    <li><a href="#">Home</a></li>
                    <li><a href="#About">About</a></li>
                    <li><a href="player.html">Demos</a></li>
                    <li><a href="#">Projects</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
        <div class="burger">
                <div class="line1"></div>
                <div class="line2"></div>
                <div class="line3"></div>
        </div>
    </nav>
    
    <script src="main.js"></script>
</body>
</html>

播放器.html

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Audio Player</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    
    <nav>
        <div class="logo">
            <h4>Marilyn Voicing</h4>
        </div>
                <ul class="nav-links">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="#About">About</a></li>
                    <li><a href="player.html">Demos</a></li>
                    <li><a href="#">Projects</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
        <div class="burger">
                <div class="line1"></div>
                <div class="line2"></div>
                <div class="line3"></div>
        </div>
    </nav>
    
    <div id="container">
        <div id="audio-image">
            <img class="cover">
        </div>
        
        <div id="audio-player">
            <div id="audio-info">
                <span class="artist"></span> - <span class="title"></span>
            </div>
            <input id="volume" type="range" min="0" max="10" value="7">
            <br>
            <div id="buttons">
                <span>
                    <button id="prev"></button>
                    <button id="play"></button>
                    <button id="pause"></button>
                    <button id="stop"></button>
                    <button id="next"></button>
                </span>
            </div>
            <div class="clearfix"></div>
            <div id="tracker">
                <div id="progress-bar">
                    <span id="progress"></span>
                </div>
                <span id="duration">0:00</span>
            </div>
            <div class="clearfix"></div>
            <ul id="playlist" class="hidden">
                <li song="advert-1.mp3" cover="cover1a.png" artist="Miss Ramos">advert-1.mp3</li>
                <li song="advert-2.mp3" cover="cover1a.png" artist="Miss Ramos">advert-2.mp3</li>
                <li song="advert-3.mp3" cover="cover1a.png" artist="Miss Ramos">advert-3</li>
                <li song="advert-4.mp3" cover="cover1a.png" artist="Miss Ramos">advert-4.mp3</li>
                <li song="audiobook-part-1.mp3" cover="cover1a.png" artist="Miss Ramos">audiobook-part-1.mp3</li>
                <li song="audiobook-part-2.mp3" cover="cover1a.png" artist="Miss Ramos">audiobook-part-2.mp3</li>
                <li song="telephon-1.mp3" cover="cover1a.png" artist="Miss Ramos">telephon-1.mp3</li>
            </ul>
        </div>
    
    </div>
    <script src="js/jquery-3.5.1.js"></script>
    <script src="js/main.js"></script>
</body>    
</html>

样式.css：

*{
    margin:0;
    padding:0;
    border:none;
    outline:none;
}

body{
    
    background:url(../images/circled-pause.png);
    background-repeat: no-repeat;
    background-size: auto 100vh;
    
    font-family:Arial;
    font-size:13px;
    line-height:1.5em;
    color:#fff;
    
    
/*
    background:#78284a; old browsers
    background:-moz-linear-gradient(left, #78284a 0%, #6d8a9f 100%);  FF3.6+ 
    background:-webkit-gradient(linear, left top, right top, color-stop(0%,#78284a), color-stop(100%,#6d8a9f));
    background:-webkit-linear-gradient(left, #78284a 0%, #6d8a9f 100%);  Chrome10+, Safari5.1+ 
    background:-o-linear-gradient(left, #78284a 0%, #6d8a9f 100%);  Opera 11.10+ 
    background:-ms-linear-gradient(left, #78284a 0%, #6d8a9f 100%);  IE10+ 
    background:linear-gradient(to right, #78284a 0%, #6d8a9f 100%);  W3C 
*/
    
/*
    background:
    linear-gradient(180deg, rgba(0,0,0,0) 78%, rgba(255,255,255,0.5) 86%, rgba(255,255,255,1) 100%), url(images/rmbr2.JPG) no-repeat;
    background-size: auto 100vh;    
    width:100%;
    height:100%;
*/
    
    
}

.clearfix{
    clear:both;
}

#container{
    width:330px;
    min-height:400px;
/*
    width: 25%;
    height: 70%;
*/
    background:#333;
    overflow:auto;
    margin:20px auto;
    border-radius:10px;
    box-shadow:0 10px 8px -8px #333;
}

#audio-image{
    position:relative;
    overflow:hidden;
    height:200px;
    margin-bottom:15px;
}

#audio-image .cover{
    width:100%;
}

#audio-info{
    text-align:center;
    margin-bottom: 7px; /* added by self */
}

#audio-info .artist{
    font-weight:bold;
}

input#volume{
    width:95%;
    margin-left:2%;
/*    -webkit-appearance:none !important;   browser vol sytles overridden in vid*/
    background:#ccc;
    height:1px;
    margin-bottom:20px;
}

input#volume::-webkit-slider-thumb{
/*
    -webkit-appearance:none !important; browser volume styles overriden in vid
    background:url(../images/knob.png) no-repeat;   knob png required
*/
    height:12px;
    width:12px;
}

#buttons{
    width:90%;
    display:block;
    margin:15px auto;
    margin-left:23px;
    overflow:auto;
}

button#play{
    width:50px;     /*vid values set to 70px*/
    height:50px;    /*vid values set to 70px*/
    background:url(../images/circled-play.png);
    background-size:cover;      /*look for background short-hand*/
    background-repeat:no-repeat;
    background-position:center center;
    float:left;
    margin-left:-2px;
}


button#pause{
    width:50px;     /*vid values set to 70px*/
    height:50px;    /*vid values set to 70px*/
    background:url(../images/circled-pause.png);
    background-size:cover;      /*look for background short-hand*/
    background-repeat:no-repeat;
    background-position:center center;
    float:left;
    margin-left:-2px;
}

button#stop{
    width:50px;     /*vid values set to 70px*/
    height:50px;    /*vid values set to 70px*/
    background:url(../images/stop-circled.png);
    background-size:cover;      /*look for background short-hand*/
    background-repeat:no-repeat;
    background-position:center center;
    float:left;
    margin-left:3px;
}

button#prev{
    width:50px;     /*vid values set to 70px*/
    height:50px;    /*vid values set to 70px*/
    background:url(../images/rewind-button-round.png);
    background-size:cover;      /*look for background short-hand*/
    background-repeat:no-repeat;
    background-position:center center;
    float:left;
    margin-top:0; /*vid set to 15px*/
}

button#next{
    width:50px;     /*vid values set to 70px*/
    height:50px;    /*vid values set to 70px*/
    background:url(../images/fast-forward-round.png);
    background-size:cover;      /*look for background short-hand*/
    background-repeat:no-repeat;
    background-position:center center;
    float:left;     /*vid value set 'right'*/
    margin-left:0px;    /*vid value set 15px*/
}

#tracker{
    position:relative;
    width:100%;
}

#progress-bar{
    width:80%;
    margin-left:2%;    /*vid set to 2% */
    margin-bottom:20px;
    margin-top:9px;
    height:10px;
    background:url(../images/progress-bar.png) no-repeat;
    float:left;
}

#progress{
    background:url(../images/ ) no-repeat;  /* remember to update this selector (watch chap45 @ 08:36) */
    height:10px;
    display:inline-block;
}

#duration{
    position:absolute;
    top:0;
    right:10px;
    padding: 4px 8px;
    background:#000;
    border-radius:5px;
}

#playlist{
    list-style:none;
}

#playlist li{
    cursor:pointer;
    margin:5px;
}

#playlist li.active{
    font-weight:bold;
    padding:3px;
    background:#666;
}

主.js：

/////// app.js ///
const navSlide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-links');
    const navLinks = document.querySelectorAll('.nav-links li');
    
    
    
    
    burger.addEventListener('click', () => {
        //Toggle Nav
        nav.classList.toggle('nav-active');
        
        //Animate Links
        navLinks.forEach((link, index)=>{
            if (link.style.animation) {
                link.style.animation = '';
            } else {
                link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
            }
        });
    });

}

navSlide();
///////////////////////////////////////



var audio;

//Hide Pause
$('#pause').hide();

initAudio($('#playlist li:first-child'));

function initAudio(element){
    var song = element.attr('song');
    var title = element.text();
    var cover = element.attr('cover');
    var artist = element.attr('artist');
    
    //Create audio object
    audio = new Audio('media/'+ song);
    
    //Insert audio info
    $('.artist').text(artist);
    $('.title').text(title);
    
    //Insert song cover
    $('img.cover').attr('src','images/covers/'+cover);
    
    $('#playlist li').removeClass('active');
    element.addClass('active');
}



//Play button
$('#play').click(function(){
    audio.play();
    $('#play').hide();
    $('#pause').show();
    showDuration();
});

//Pause button
$('#pause').click(function(){
    audio.pause();
    $('#play').show();
    $('#pause').hide();
});

//Stop button
$('#stop').click(function(){
    audio.pause();
    audio.currentTime = 0;
});

//Next button
$('#next').click(function(){
    audio.pause();
    var next = $('#playlist li.active').next();
    if(next.length == 0){
        next = $('playlist li:first-child');
    }
    initAudio(next);
    audio.play();
    showDuration();
});

//Prev button
$('#prev').click(function(){
    audio.pause();
    var prev = $('#playlist li.active').prev();
    if(prev.length == 0){
        prev = $('playlist li:last-child');
    }
    initAudio(prev);
    audio.play();
    showDuration();
});

//Playlist song click
$('#playlist li').click(function(){
    audio.pause();
    initAudio($(this));
    $('#play').hide();
    $('#pause').show();
    audio.play();
    showDuration();
});

//Volume control
$('#volume').change(function(){
    audio.volume = parseFloat(this.value / 10);
});

//Time/Duration
function showDuration() {
    $(audio).bind('timeupdate',function(){
        //Get hours and minutes
        var s = parseInt(audio.currentTime % 60);
        var m = parseInt(audio.currentTime / 60) % 60;
        
        if(s < 10) {
            s = '0'+s;
        }
        $('#duration').html(m + ':'+ s);
        var value = 0;
        if(audio.currentTime > 0){
            value = Math.floor((100 / audio.duration) * audio.currentTime);
        }
        $('progress').css('width',value+'%');
    });
}

我也下载了“jquery-3.5.1.js”并将其添加到该网站......

所以再次感谢您查看帖子。并感谢您的帮助。

frontend - 虽然不需要高对比度模式（括号预览）

0 回答 0

Related

Reference