精灵图的使用yu题_网页精灵图不加载-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_46039848/article/details/108939784

精灵图的使用

精灵图的使用
- 精灵图坐标难点
- - 题

精灵图的使用

在我们浏览网页的时候，如果网页中图片数量过多，浏览器就要不断的与服务器进行链接，一次又一次的将图片下载。我们可以将很多小图片合成一张大图片，这样我们只需要与服务器链接一次，下载一次图片就可以，提高网页的加载速度。

我们需要做的是给定一个容器，控制容器的大小，通过容器的位置的移动来显示图片内容。

如图，这是一张由九张小图片组成的大图片，我们利用这一张大图片移动它的位置来显示九张小图片。

在这里插入图片描述

首先给定一个列表并分别给每张图片一个盒子。


```html
<ul>
			<li class="a">
				001
				<div></div>
			</li>
			<li class="b">
				002
				<div></div>
			</li>
			<li class="c">
				003
				<div></div>
			</li>
			<li class="d">
				004
				<div></div>
			</li>
			<li class="e">
				005
				<div></div>
			</li>
			<li class="f">
				006
				<div></div>
			</li>
			<li class="g">
				007
				<div></div>
			</li>
			<li class="h">
				008
				<div></div>
			</li>
			<li class="i">
				009
				<div></div>
			</li>
		</ul>

然后在style里对每一个li进行浮动处理，并增加彼此之间的间距，再给div一个固定的大小，并且给定背景色。

* {
				margin: 0;
				padding: 0;
			}
			ul {
				list-style: none;
			}
			ul li {
				float: left;
				margin: 5px;
				text-align: center;
			}
			ul li div {
				width: 100px;
				height: 100px;
				background-color: cadetblue;
			}

我们要在不同的div里显示不同的图片部分，因为背景图的位置是可以改变的，而盒子的大小却是确定的，且我们的图片大小是300×300，所以我们设置盒子的大小为100×100，最后通过改变背景图的坐标来实现不同的图片部分显示。

			.a:hover div { background: url(imgs/timg.jpg) 0 0;}
			.b:hover div { background: url(imgs/timg.jpg) -100px 0;}
			.c:hover div { background: url(imgs/timg.jpg) -200px 0;}
			.d:hover div { background: url(imgs/timg.jpg) 0 -100px;}
			.e:hover div { background: url(imgs/timg.jpg) -100px -100px;}
			.f:hover div { background: url(imgs/timg.jpg) -200px -100px;}
			.g:hover div { background: url(imgs/timg.jpg) 0 -200px;}
			.h:hover div { background: url(imgs/timg.jpg) -100px -200px;}
			.i:hover div { background: url(imgs/timg.jpg) -200px -200px;}

这里利用了hover属性，当鼠标滑入的时候则显示图片内容。
下面是效果演示。

在这里插入图片描述

当鼠标划入在001处时

在这里插入图片描述

整个代码为

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			ul {
				list-style: none;
			}
			ul li {
				float: left;
				margin: 5px;
				text-align: center;
			}
			ul li div {
				width: 100px;
				height: 100px;
				background-color: cadetblue;
			}
			.a:hover div { background: url(imgs/timg.jpg) 0 0;}
			.b:hover div { background: url(imgs/timg.jpg) -100px 0;}
			.c:hover div { background: url(imgs/timg.jpg) -200px 0;}
			.d:hover div { background: url(imgs/timg.jpg) 0 -100px;}
			.e:hover div { background: url(imgs/timg.jpg) -100px -100px;}
			.f:hover div { background: url(imgs/timg.jpg) -200px -100px;}
			.g:hover div { background: url(imgs/timg.jpg) 0 -200px;}
			.h:hover div { background: url(imgs/timg.jpg) -100px -200px;}
			.i:hover div { background: url(imgs/timg.jpg) -200px -200px;}
		</style>
	</head>
	<body>
		<ul>
			<li class="a">
				001
				<div></div>
			</li>
			<li class="b">
				002
				<div></div>
			</li>
			<li class="c">
				003
				<div></div>
			</li>
			<li class="d">
				004
				<div></div>
			</li>
			<li class="e">
				005
				<div></div>
			</li>
			<li class="f">
				006
				<div></div>
			</li>
			<li class="g">
				007
				<div></div>
			</li>
			<li class="h">
				008
				<div></div>
			</li>
			<li class="i">
				009
				<div></div>
			</li>
		</ul>
	</body>
</html>

精灵图坐标难点

精灵图片的使用难点在于如何在这一张图片中定位到我们需要的部分，首先我们需要理解三个坐标：浏览器坐标、组件坐标、图片坐标；每个组件都有自己的坐标点，左上角为原点，往上y值为负数，越来越小；往左x为负数，越来越小

在案例中组件（即小图片）的宽高分别为100px，图片宽高为300px，我们发现如果将图片作为组件的背景图片，将会从图片0,0左边点开始显示，只能显示图片的100px，因为组件只有这么大，多余的图片就被舍弃了。

假如此时想要截取图片中第二行第二列的小图片，此时图片需要分别往左移动和往上移动一定距离。原来图片的坐标和组件的坐标重叠都是0,0，此时图片往上移动，相当于y减小了100px（假设值），此时y坐标为-100px；往左移动24px，此时x坐标为-24px，所以我们得到第二行第二列的小图片图标为（ -100px -100px）。

题

在这里插入图片描述
代码

/**
 * Note: The returned array must be malloced, assume caller calls free().
 */
int* twoSum(int* nums, int numsSize, int target, int* returnSize){
    int i, j;
    *returnSize = 0;
    for (i = 0; i < numsSize-1; i++)
    {
        for (j = i+1; j < numsSize; j++)
        {
            if (nums[i] + nums[j] == target)
            {
                int* arr = malloc(sizeof(int) * 2);
                arr[0] = i;
                arr[1] = j;
                *returnSize = 2;
                return arr;
            }
        }
    }
    *returnSize = 0;
    return NULL;
}

在解析里看到用哈希算法。。。如下

struct hashTable {
    int key;
    int val;
    UT_hash_handle hh;
};

struct hashTable* hashtable;

struct hashTable* find(int ikey) {
    struct hashTable* tmp;
    HASH_FIND_INT(hashtable, &ikey, tmp);
    return tmp;
}

void insert(int ikey, int ival) {
    struct hashTable* it = find(ikey);
    if (it == NULL) {
        struct hashTable* tmp = malloc(sizeof(struct hashTable));
        tmp->key = ikey, tmp->val = ival;
        HASH_ADD_INT(hashtable, key, tmp);
    } else {
        it->val = ival;
    }
}

int* twoSum(int* nums, int numsSize, int target, int* returnSize) {
    hashtable = NULL;
    for (int i = 0; i < numsSize; i++) {
        struct hashTable* it = find(target - nums[i]);
        if (it != NULL) {
            int* ret = malloc(sizeof(int) * 2);
            ret[0] = it->val, ret[1] = i;
            *returnSize = 2;
            return ret;
        }
        insert(nums[i], i);
    }
    *returnSize = 0;
    return NULL;
}

作者：LeetCode-Solution