时间戳

首页 > 解决方案 > Javascript图像转换器（一个图片文件中的2张图片）一键式

javascript - Javascript图像转换器（一个图片文件中的2张图片）一键式

问题描述

https://i.stack.imgur.com/LhvYb.png - 这是我想使用的图像，到目前为止，我在点击按钮时改变了位置，但我想在我再次点击按钮回到第一个位置。

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div></div>
    <button>Press me</button>
    <script src="index.js"></script>
</body>
</html>

这是CSS

div {
    width: 125px;
    height: 122px;
    background-image: url(picture2.png);
    background-repeat: no-repeat;
}

这是js

var image = document.getElementsByTagName('div')[0];
var button = document.getElementsByTagName('button')[0];

button.addEventListener('click',switchPic,false);

function switchPic (e){
    image.style.backgroundPosition="-150px 0";
}

标签： javascriptdom

解决方案

只需使用 classList.toggle

const myDiv    = document.getElementById('my-div')
  ,   myButton = document.getElementById('my-button')
  ;
myButton.onclick=()=>
  {
  myDiv.classList.toggle('right150')
  }
div#my-div {
  width: 125px;
  height: 122px;
  background-image: url(https://i.stack.imgur.com/LhvYb.png);
  background-repeat: no-repeat;
}
div#my-div.right150 {
  background-position-x: -150px;
}
<div id="my-div"></div>

<button id="my-button">Press me</button>

或者，使用 addEventListener...

const myDiv    = document.getElementById('my-div')
    , myButton = document.getElementById('my-button')
    ;
myButton.addEventListener('click',switchPic)

function switchPic (e)
  {
  myDiv.classList.toggle('right150')
  }

推荐阅读