jquery怎么实现点击一个元素更换背景图片,连续点击永远在2张图片之间...

发布网友发布时间：2022-04-26 22:59

共4个回答

热心网友时间：2022-04-21 02:12

实现的方法和操作步骤如下：

1、首先，打开html编辑器，创建一个新的html文件，例如index.html，然后引入jquery，如下图所示。

2、其次，完成上述步骤后，在index.html的<script>标记中，输入下图红框中的jquery代码，如下图所示。

3、接着，完成上述步骤后，浏览器运行index.html页面，显示出了其中1张背景图片，如下图所示。

4、最后，完成上述步骤后，再次单击“点击更换”按钮，这时背景图像被更改为另一幅，如下图所示。这样，问题就解决了。

热心网友时间：2022-04-21 03:30

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：index.html，并引入jquery。

2、在index.html中的<script>标签，输入jquery代码：。

var no = 0;

var arr = ['small2.png', 'small3.png'];

function fun() {

no ^= 1;

$('body').css('background-image', 'url(' + arr[no] + ')');

}

3、浏览器运行index.html页面，此时显示出了其中1张背景图片。

4、再点击“点击更换”按钮，此时背景图片又被更换到另一张。

热心网友时间：2022-04-21 05:05

可以采用如下思路：分别将两种背景图片设为两个类，然后使用toggleClass()方法切换类：

$(selector).toggleClass('class_a').toggleClass('class_b');

示例如下：

创建Html代码：一个简单的div用于显示背景图片

设置css样式：分别为两个背景设计一个类

div.test{width:2px;height:152px;margin:50px;border:4px dashed #ccc;}
.bg1{background:url('bg1.png');}
.bg2{background:url('bg2.png');}

编写jquery代码：点击切换类实现背景的变换

$(function(){
$("div.test").addClass('bg1'); // 初始化时添加背景1
$("div.test").click(function() {
$(this).toggleClass('bg1').toggleClass('bg2');
});
})

观察效果

初始状态

一次点击

再次点击

热心网友时间：2022-04-21 06:56

$("#button").toggle(function(){$("body").css("background","img1URL")},function(){$("body").css("background","img2URL")})