字母Show-CSS精灵技术

最新推荐文章于 2022-12-12 12:47:39 发布

云朵儿的媛码

最新推荐文章于 2022-12-12 12:47:39 发布

阅读量233

点赞数

分类专栏：硅步致远文章标签： css

本文链接：https://blog.csdn.net/qq_38889321/article/details/108444742

版权

硅步致远专栏收录该内容

9 篇文章 0 订阅

订阅专栏

效果：用户输入1-3个大写字母，下方显示对应字母的样式组合；
技术：CSS精灵技术
亮点：使用一张包含26个字母的图片，完成多字母随机组合
效果图：

Html

<body>
    <div class="choose">
        <input type="text" id="txtName" class="name" placeholder="请输入1-3个大写英文字母">
        <input type="button" value="Show" class="btnname" onclick="getName()">
        <br>
        <div class="imgShow" id="imgShowId">
        </div>
        <div class="imgShow" id="imgShowIdS">
        </div>
        <div class="imgShow" id="imgShowIdT">
        </div>
    </div>
</body>

样式

        .choose {
            margin: 30px 0 0 30px;
        }

        .name {
            border: 2px solid #fa7894;
            width: 200px;
            height: 20px;
        }

        .btnname {
            color: #fa7894;
            background-color: rgb(241, 239, 239);
            border-radius: 12px;
            width: 80px;
            height: 25px;
            cursor: pointer;
        }

        .imgShow {
            margin-top: 50px;
            /* width:193px;
            height:186px; */
            background-color: rgb(241, 168, 168);
            background: url(../images/03-t.jpg) no-repeat;
            /* background-position:-14px -13px; */
            float: left;
        }

      function getName() {
            var oName = document.getElementById("txtName");
            var oChars = {
                "A": [14, 13, 93, 86], "B": [107, 13, 73, 86], "C": [180, 13, 76, 86], "D": [248, 13, 90, 86], "E": [338, 7, 75, 100], "F": [413, 8, 76, 100],
                "G": [9, 100, 95, 104], "H": [104, 100, 83, 104], "I": [187, 100, 61, 104], "J": [248, 100, 76, 104], "K": [324, 100, 89, 104], "L": [413, 100, 76, 104],
                "M": [9, 204, 107, 90], "N": [116, 204, 90, 90], "O": [206, 204, 71, 90], "P": [277, 204, 72, 90], "Q": [349, 204, 85, 90], "R": [434, 204, 66, 90],
                "S": [9, 294, 83, 103], "T": [92, 294, 87, 103], "U": [179, 294, 98, 103], "V": [277, 294, 93, 103], "W": [370, 294, 119, 103], "X": [135, 397, 82, 103],
                "Y": [217, 397, 82, 103], "Z": [299, 397, 82, 103]
            };
            var oImgShow = document.getElementById("imgShowId");
            if (oName.value.substring(0, 1) && oChars[oName.value.substring(0, 1)][2]) {
                var oindex = oName.value.substring(0, 1);
                oImgShow.style.width = oChars[oindex][2] + 'px';
                oImgShow.style.height = oChars[oindex][3] + 'px';
                oImgShow.style.backgroundPositionX = -oChars[oindex][0] + 'px'
                oImgShow.style.backgroundPositionY = -oChars[oindex][1] + 'px';
            }else{
                oImgShow.style.width =0 + 'px';
                oImgShow.style.height =0 + 'px';
            }
            var oImgShowS = document.getElementById("imgShowIdS");
            if (oName.value.substring(1, 2) && oChars[oName.value.substring(1, 2)][2]) {
                var oindex = oName.value.substring(1, 2);
                oImgShowS.style.width = oChars[oindex][2] + 'px';
                oImgShowS.style.height = oChars[oindex][3] + 'px';
                oImgShowS.style.backgroundPositionX = -oChars[oindex][0] + 'px'
                oImgShowS.style.backgroundPositionY = -oChars[oindex][1] + 'px';
            } else {
                oImgShowS.style.width = 0 + 'px';
                oImgShowS.style.height = 0 + 'px';
            }
            var oImgShowT = document.getElementById("imgShowIdT");
            if (oName.value.substring(2, 3) && oChars[oName.value.substring(2, 3)][2]) {
                var oindex = oName.value.substring(2, 3);
                oImgShowT.style.width = oChars[oindex][2] + 'px';
                oImgShowT.style.height = oChars[oindex][3] + 'px';
                oImgShowT.style.backgroundPositionX = -oChars[oindex][0] + 'px'
                oImgShowT.style.backgroundPositionY = -oChars[oindex][1] + 'px';
            } else {
                oImgShowT.style.width = 0 + 'px';
                oImgShowT.style.height = 0 + 'px';
            }
        }

云朵儿的媛码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
字母Show-CSS精灵技术

效果：用户输入1-3个大写字母，下方显示对应字母的样式组合；技术：CSS精灵技术亮点：使用一张包含26个字母的图片，完成多字母随机组合效果图：Html<body> <div class="choose"> <input type="text" id="txtName" class="name" placeholder="请输入1-3个大写英文字母"> <input type="button" value=
复制链接

扫一扫