Question

我需要创建带有颜色的单选按钮（而不是按钮）。单击特定颜色将显示颜色名称以及该颜色对应的汽车图像。屏幕看起来像这样

在“评分”部分中，进度条和总体评分表都必须具有动画。我应该如何根据要求进行对齐（很遗憾，不允许使用引导程序），这是我到目前为止所做的-

html,
body {
  width: 100%;
  height: 100%;  
  margin: 0;
  padding: 0;
  text-align: center;
}

body {
  box-sizing: border-box;
  padding-top: 180px;
  background: #ffffff;
}

input {
  display: none;
}

.button {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
  margin: 10px;
  cursor: pointer;
}

.button span {
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  padding: 0;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 100%;
  background: #eeeeee;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  transition: ease .3s;
}

.button span:hover {
  padding: 10px;
}

.red .button span {
  background:red;
}

.silver .button span {
  background: silver;
}

.grey .button span {
  background: grey;
}

.blue .button span {
  background: blue;
}

.layer {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: transparent;
  /*transition: ease .3s;*/
  z-index: -1;
}

.grey input:checked ~ .layer {
  background: url("images/grey.jpg")
}

.red input:checked ~ .layer {
  background: url("images/red.jpg")
}

.silver input:checked ~ .layer {
  background:  url("images/silver.jpg")
}

.blue input:checked ~ .layer {
  background:  url("images/blue.jpg")
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="code.css">
  <title>Document</title>
</head>

<body>

  

  <label class="silver">
    <input type="radio" name="color" value="silver">
    <div class="layer"></div>
    <div class="button">
      <span></span>
    </div>
  </label>

  <label class="grey">
    <input type="radio" name="color" value="grey">
    <div class="layer"></div>
    <div class="button">
      <span></span>
    </div>
  </label>

  <label class="red">
    <input type="radio" name="color" value="red">
    <div class="layer"></div>
    <div class="button">
      <span></span>
    </div>
  </label>

  <label class="blue">
    <input type="radio" name="color" value="blue">
    <div class="layer"></div>
    <div class="button">
      <span></span>
    </div>
  </label>

</body>

</html>

Answer 1

以下是一些JavaScript代码，可根据按钮显示不同的图像：

function display() {

    var images = {
        silver: {
            img: "https://stimg.cardekho.com/images/car-images/large/Ford/Ford-Mustang/3835/ford-mustang-ingot-silver_7e7e7e.jpg",
            description: "Car 1",
            speed: 50
        },
        grey: {
            img: "https://stimg.cardekho.com/images/car-images/large/Ford/Ford-Mustang/3835/ford-mustang-magnetic_3e3e3e.jpg",
            description: "Car 2",
            speed: 80

        },
        red: {
            img: "https://stimg.cardekho.com/images/car-images/large/Ford/Ford-Mustang/3835/ford-mustang-race-red_c61008.jpg",
            description: "Car 3",
            speed: 70
        },

        blue: {
            img: "https://stimg.cardekho.com/images/car-images/large/Ford/Ford-Mustang/3835/ford-mustang-absolute-black_1a1a1a.jpg",
            description: "Car 4",
            speed: 90
        }

    };

    for (i = 0; i < 4; i++) {
        if (document.colorpicker.color[i].checked == true) {
            var checkNumber = document.colorpicker.color[i];
            console.log(document.stage.src);
            document.stage.src = images[checkNumber.value].img;
            document.getElementById("description").innerHTML = images[checkNumber.value].description;
            move(images[checkNumber.value].speed);
        }
    }
}

function move(wd) {
    var elem = document.getElementById("progress");
    var width = 1;
    var id = setInterval(frame, 10);

    function frame() {
        if (width >= wd) {
            clearInterval(id);
        } else {
            width++;
            elem.style.width = width + '%';
            elem.innerHTML = "Speed: " + width * 1 + '%';
        }
    }
}

将单选按钮包装在<form id="colorpicker> ... </form>中。

将属性onClick="display(this.form)"添加到每个<input>

在<img src="https://stimg.cardekho.com/images/car-images/large/Ford/Ford-Mustang/3835/ford-mustang-yellow-tricoat_eda600.jpg" name="stage" />表单之前添加占位符图像

将其添加到进度条的html中：

<div id="bar">
<div id="progress"></div>
</div>

栏的CSS：

#bar {
  width: 30%;
  background-color: black;
  margin:auto;

}

#progress {
  width: 1%;
  height: 30px;
  background-color: #fcec03;
  line-height: 30px;
  text-align: center;
}

描述框的HTML： <p id="description">Placeholder Image</p>

这是一个有效的示例：https://codepen.io/saifsmailbox98/pen/JZZgaM [已更新]

单选按钮-使用javascript

1 个答案: