【jQuery笔记Part3】02-jQuery抖动效果

最新推荐文章于 2024-03-21 06:08:22 发布

萌宅鹿同学

最新推荐文章于 2024-03-21 06:08:22 发布

阅读量414

点赞数

分类专栏： # jQuery笔记文章标签： jQuery 抖动效果 JS

本文链接：https://blog.csdn.net/weixin_43734095/article/details/100084822

版权

jQuery笔记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

jQuery抖动效果

雪碧图(精灵图)
静态页面
展示图片
- 抖动效果

jQuery笔记目录

雪碧图(精灵图)

什么是雪碧图？

雪碧图是根据CSS sprite音译过来的，就是将很多很多的小图标放在一张图片上，就称之为雪碧图。
在这里插入图片描述

使用雪碧图的目的

有时为了美观，我们会使用一张图片来代替一些小图标，但是一个网页可能有很多很多的小图标，浏览器在显示页面的时候，就需要像服务器发送很多次访问请求，这样一来，一是造成资源浪费，二是会导致访问速度变慢。这时候，把很多小图片（需要使用的小图标）放在一张图片上，按照一定的距离隔开，就解决了上述的两个问题。

显示雪碧图的条件

1）需要一个设置好宽和高的容器
2）需要设置 background-position 的值（默认为（0，0），也就是图片的左上角），即移动图片到自己想要的图标位置。

注意点：我们在一个页面上设置了盒子的宽高，想要将一个表情显示在盒子内，我们是不能移动盒子的位置的，我们只能改变图片的位置。

操作步骤：将图片向左移X个单位，然后向上移Y个单位，其中X，Y的具体数值是需要个人调试至合适位置得出。

background: url("images/bg.png") 0px -24px no-repeat;

效果：相当于把图片往上移动了 24 px，所以显示为第二个图标。

在这里插入图片描述

静态页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .box {
            width: 350px;
            height: 350px;
            margin: 100px auto;
            cursor: pointer;
        }

        .box ul li {
            float: left;
            width: 80px;
            height: 80px;
            text-align: center;
            border: 1px solid #ccc;
            box-sizing: border-box;
            margin: 2px;
        }

        .box > ul > li > span {
            display: block;
            width: 24px;
            height: 24px;
            background: url("images/bg.png") 0px -24px no-repeat;
            margin: 10px auto;
        }
    </style>
</head>
<body>
<div class="box">
    <ul>
        <li><span></span>百度</li>
        <li><span></span>淘宝</li>
        <li><span></span>新浪</li>
        <li><span></span>网易</li>
        <li><span></span>搜狐</li>
        <li><span></span>腾讯</li>
        <li><span></span>优酷</li>
        <li><span></span>京东</li>
    </ul>
</div>
</body>
</html>

界面效果：
在这里插入图片描述

展示图片

<script type="text/javascript" src="lib/jquery-3.3.1.js"></script>
<script>
    $(function () {
        //1.展示图片
        var $lis = $('.box>ul>li');
        $lis.each(function (index, value) {
            $(this).children('span').css({
               background: 'url("images/bg.png") 0 -' + index * 24 + 'px no-repeat'
            });
        });
        
    });
</script>

界面效果：
在这里插入图片描述

抖动效果

<script type="text/javascript" src="lib/jquery-3.3.1.js"></script>
<script>
    $(function () {
        //1.展示图片
        var $lis = $('.box>ul>li');
        $lis.each(function (index, value) {
            $(this).children('span').css({
               background: 'url("images/bg.png") 0 -' + index * 24 + 'px no-repeat'
            })
        })

        //2.监听鼠标进入
        $lis.hover(function () {
            // 鼠标进入，抖动动画
            shake(this)
        },function () {
            // 鼠标离开，停止抖动
            stopShakte(this);
        });

        function shake(ele){ // 抖动效果
            $(ele).css({
               position:'relative'
            });

            var animateLeft = $(ele).css('left') === '10px' ? '-10px' : '10px';

            $(ele).animate({
                left: animateLeft
            }, 100, function () {
                shake(ele)
            });
        }
        function stopShakte(ele) {
            $(ele).stop(true, false).css({
                left:'0'
            });
        };
        
    });
</script>

运行效果：鼠标放到哪个图标上面，则这个图标快速抖动；鼠标移开则停止。

萌宅鹿同学

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【jQuery笔记Part3】02-jQuery抖动效果

jQuery抖动效果静态页面展示图片抖动效果静态页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> * { paddin...
复制链接

扫一扫