不同方法实现按钮背景图片的变换
Posted 卖面条的老大爷
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了不同方法实现按钮背景图片的变换相关的知识，希望对你有一定的参考价值。
背景图只有一张
第一种方法
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#btn{
background: url("1.png");
width: 120px;
height: 30px;
border-style: none;
}
</style>
</head>
<body>
<button id="btn" onmouseover="changeImg()" onmouseout="changeImg()">切换图片</button>
<script>
var m = 1;
function changeImg(){
var img = document.getElementById("btn");
if(m == 1){
img.style.backgroundPosition = \'0px -30px\';
m = 2;
}else{
img.style.backgroundPosition = \'0px 0px\';
m = 1;
}
}
</script>
</body>
</html>
第二种方法
前面与第一种方法类似，这种方法是通过display属性实现的
<body>
<input type="button" id="btn" value="切换图片" onmouseover="changeImg()" onmouseout="changeImg()">
<input type="button" id="btn1" value="切换图片" style="display: none" onmouseover="changeImg()" onmouseout="changeImg()">
<script>
function changeImg(){
var btn = document.getElementById("btn");
var btn1 = document.getElementById("btn1");
if(btn1.style.display == "none"){
btn1.style.display = "block";
btn.style.display = "none";
}else{
btn.style.display = "block";
btn1.style.display = "none";
}
}
</script>
</body>
第三种方法
与第二种方法基本雷同
<input type="button" id="btn" value="切换图片" onmouseover="changeImg()" onmouseout="changeImg()">
<input type="hidden" id="btn1" value="切换图片" onmouseover="changeImg()" onmouseout="changeImg()">
<script>
function changeImg(){
var btn = document.getElementById("btn");
var btn1 = document.getElementById("btn1");
if(btn.type == "button"){
btn1.type = "button";
btn.type = "hidden";
}else{
btn.type = "button";
btn1.type = "hidden";
}
}
</script>
第四种方法是用jQuery实现的
html文件：
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-3.1.0.min.js"></script>
<script src="jcss.js"></script>
<link rel="stylesheet" type="text/css" href="jcss.css">
</head>
<body>
<button></button>
</body>
</html>
引入文件的时候要注意，把下载的jquery文件放在前面
css文件：
.img1,.img2{
background-image: url("1.png");
width: 120px;
height: 30px;
border-style: none;
}
.img2{
background-position: 0px -30px;
}
js文件：
$(document).ready(function(){
$("button").addClass("img1");
$("button").mouseover(function () {
$("button").addClass("img2");
$("button").removeClass("img1");
}).mouseout(function(){
$("button").addClass("img1");
$("button").removeClass("img2");
})
})
以上是关于不同方法实现按钮背景图片的变换的主要内容，如果未能解决你的问题，请参考以下文章