切换网页背景图片原创

深处莫神

发布于 2022-8-19 17:42

浏览

0收藏

切换网页背景图片-鸿蒙开发者社区

切换网页背景图片

1.用到的知识点补充

1.slideToggle函数，在所有p元素上进行 slideUp() 和 slideDown() 之间的切换
2.find()函数方法，返回通过测试（函数内判断）的数组的第一个元素的值。
3.find(“元素(例如：div)”) ，查找元素
4. attr() 函数返回选择元素的属性值。

思路：

获取按钮标签，点击按钮，则会下拉或者上拉照片框，同时其自身上拉和下拉的图片相互切换，立一个flag标签进行判断后切换自身背景图即可
对于盒子的左右移动，主要是判断了奇偶数之后，进行的left值改变
点击小图之后出现大图，找到小图路径后寻找大图路径，主要可以进行的原因是：大图路径被设置为：url(“image/image6.jpg”) 小图路径：url(“image/small/image6.jpg”)

<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>切换网页背景图片</title>
	<link rel="stylesheet" type="text/css" href="9.15.css">
</head>
<script type="text/javascript" src="js/jquery.js"></script>

<body>
	<a href="#" class="button"></a>
	<div id="hf">
		<div class="con">
			<img src="image/up.png" class="left" />
			<img src="image/next.png" class="right" />
			<div class="scroll">
				<div class="scrollCon">
					<ul>
						<li><img src="image/small/image1.jpg" /></li>
						<li><img src="image/small/image2.jpg" /></li>
						<li><img src="image/small/image3.jpg" /></li>
						<li><img src="image/small/image4.jpg" /></li>
						<li><img src="image/small/image5.jpg" /></li>
						<li><img src="image/small/image6.jpg" /></li>
						<li><img src="image/small/image7.jpg" /></li>
						<li><img src="image/small/image8.jpg" /></li>
						<li><img src="image/small/image9.jpg" /></li>
						<li><img src="image/small/image10.jpg" /></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</body>

</html>


<script>
	// 1.获取按钮标签，点击一次按钮，则会下拉照片框 
	// 利用slideToggle函数，在所有元素上进行 slideUp() 和 slideDown() 之间的切换：
	var flag = false;
	$('.button').click(function () {
		var url = "image/pick1.png";
		var url2 = "image/pick.png";
		$('#hf').slideToggle();
		if (!flag) {
			$(this).css("background", "url(" + url + ")")
			flag = true;
		}
		else {
			$(this).css("background", "url(" + url2 + ")")
			flag = false;
		}
	})

	// 设置数字之后怕判断奇数偶数之后进行盒子的左移
	var num = 0;
	$('.left').click(function () {
		num++;
		if (num % 2 != 0) {
			$('.scrollCon').css({ 'left': '-1080px' });
		}
		else {
			$('.scrollCon').css({ 'left': '0px' });
		}
	})

	$('.right').click(function () {
		num++;
		if (num % 2 != 0) {
			$('.scrollCon').css({ 'left': '-1080px' });
		}
		else {
			$('.scrollCon').css({ 'left': '0px' });
		}
	})


	// 点击小图之后出现大图
	$('.scrollCon ul li').click(function () {
		// 找到小图路径
		//find()函数方法，返回通过测试（函数内判断）的数组的第一个元素的值。
		// attr() 函数返回选择元素的属性值。
		var sImg = $(this).find("img").attr("src");//找到小图的路径
		// console.log(sImg);
		// 根据小图路径找到大图路径
		var bImg = sImg.replace("/small", "");//根据小图的路径找到大图的路径
		console.log(bImg);
		// 将大图路径添加到背景之中
		$('body').css('backgroundImage', "url(" + bImg + ")");//将大图的路径添加到背景中
	})



</script>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.