Box-Shadow на функции изображения не работает - PullRequest
Новая
       10

Box-Shadow на функции изображения не работает

0 голосов
/ 18 мая 2018

Не могу обернуть голову вокруг этого, почему функция onclick на изображении не отбрасывает тень при каждом нажатии?Можете ли вы помочь, пожалуйста, я программист самообучения, был бы признателен.(Посмотрите на мой файл Javascript).

Конечный результат должен быть примерно таким https://jenniferdewalt.com/more_drop_shadow.html, но она написала это в jQuery, и я пока не знаю этот фреймворк

КОД 

    
    var newBlur = 0;
    var newSpread = 0;

document.getElementById("catIMG").addEventListener("click", shadowIMG);

function shadowIMG() {
    var myShadow = genShadow();
    document.getElementById("catIMG").style.boxShadow = myShadow;
    console.log(myShadow);
}

function genShadow() {
    var arr = [0, 0, newBlur, newSpread,];
    newBlur +=1;
    newSpread +=5;
    var newShadow = '"' + arr[0] + 'px ' + arr[1] + 'px ' + arr[2] + 'px ' + arr[3] + 'px ' + 'Black' + '"' ;
    return newShadow;
}
body
{
    margin: 0;
    background-color: lightgrey;
}

input {
    position: absolute;
    left: 10%;
    width: 100px;
    height: 50px;
    font-size: 20px;
    color: white;
    background-color: green;
}

#blueTop {
    font-size: 30px;
    font-family: Arial;
    width: 100%;
    height: 100px;
    background-color: mediumpurple;
}


#catIMG {
    position: absolute;
    left: 50%;
    top: 15%;
    transform: translate(-50%);
    width: 750px;
    height: 500px;
    cursor: pointer;

}

#catText {
    position: absolute;
    left: 50%;
    top: 800px;
    transform: translate(-50%);
    width: 750px;
    text-align: center;
    font-size: 50px;
    font-weight: 100;
    color: rgb(50,20,0);
    cursor: pointer;
}

h5 {
    position: absolute;
    left: 50%;
    top: 1000px;
    transform: translate(-50%);
    font-size: 25px;
    cursor: pointer;
}
<form>
<input id="testButton"type="button" value="Test"/>
</form>
<div id="blueTop"></div>
<img id="catIMG" src="./more_grumpy_shadow.png"/>
<h1 id="catText">"You will always be lucky if you know how to make friends with strange cats."</h1>
<h5>- Colonial proverb</h5>

Ответы [ 3 ]

0 голосов
/ 18 мая 2018

нет необходимости в дополнительной работе, которую вы делаете.упростите использование свойства стиля javascript, увеличивая blur-radius и spread-radius всякий раз, когда пользователь нажимает кнопку. 

var i = 0;
var j = 3;
document.getElementById("makeshadow").addEventListener("click", function() {
    i++;
    j = i * 3;
   document.getElementById("catIMG").style.boxShadow  = 
   "rgba(0, 1, 0, 0.35) 0px 0px "+i+"px "+j+"px";
});
body
{
    margin: 0;
   padding:20px;
}
 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link href="./dropShadow.css" type="text/css" rel="stylesheet"/>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        
           
  

            <img id="catIMG" src="http://via.placeholder.com/350x150"/>
      
<button id="makeshadow">Button</button>

    </body>
    </html>
0 голосов
/ 18 мая 2018

Удаление кавычек в переменной newShadow Решил проблему, спасибо всем, кто мне помог.

0 голосов
/ 18 мая 2018

Проблема в этой строке: 

var newShadow = '"' + arr[0] + 'px ' + arr[1] + 'px ' + arr[2] + 'px ' + arr[3] + 'px ' + 'Black' + '"' ;

Вы добавляете дополнительные кавычки.

// JavaScript source code

var newBlur = 2;
var newSpread = 2;



//functions
document.getElementById("catIMG").addEventListener("click", shadowIMG);

function shadowIMG() {
    var myShadow = genShadow();
    document.getElementById("catIMG").style.boxShadow = myShadow;
    debugger;
    console.log(myShadow);
}

function genShadow() {
    var arr = [10, 10, 10, 10,];
    newBlur +=1;
    newSpread +=5;
    var newShadow = '' + arr[0] + 'px ' + arr[1] + 'px ' + arr[2] + 'px ' + arr[3] + 'px ' + ' black' + '' ;
    console.log(newShadow);
    return newShadow;
}
body
{
    margin: 0;
    background-color: lightgrey;
}

input {
    position: absolute;
    left: 10%;
    width: 100px;
    height: 50px;
    font-size: 20px;
    color: white;
    background-color: green;
}

#blueTop {
    font-size: 30px;
    font-family: Arial;
    width: 100%;
    height: 100px;
    background-color: mediumpurple;
}


#catIMG {
    position: absolute;
    left: 50%;
    top: 15%;
    transform: translate(-50%);
    width: 750px;
    height: 500px;
    cursor: pointer;

}

#catText {
    position: absolute;
    left: 50%;
    top: 800px;
    transform: translate(-50%);
    width: 750px;
    text-align: center;
    font-size: 50px;
    font-weight: 100;
    color: rgb(50,20,0);
    cursor: pointer;
}

h5 {
    position: absolute;
    left: 50%;
    top: 1000px;
    transform: translate(-50%);
    font-size: 25px;
    cursor: pointer;
}
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <form>
            <input id="testButton"type="button" value="Test"/>
        </form>
        <div id="blueTop"></div>
            <img id="catIMG" src=""/>
            <h1 id="catText">"You will always be lucky if you know how to make friends with strange cats."</h1>
            <h5>- Colonial proverb</h5>

    </body>
    </html>
...