小白入门 — 一个用jQuery做的超简单的小案例

学不积硅步，无以至千里。

前言

学习是一个枯燥且乏味的过程，每天学一点，其实作用并不大，但是坚持每天学一点时间久了，就能产生质的变化，所以，每天的坚持为了以后的某一天打基础，总有一天会成为一片苍茫大海~

回归正题

这是一个超简单的小案例，小白入门。

---

---

提示：以下是本篇文章正文内容，下面案例可供参考

1.首先创建一个 div

<div id="img"></div>

2.引入 jQuery 库

<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>

3.为 div 设置样式属性

#img {
       width: 200px;
       height: 200px;
       position: absolute;
       left: 200px;
       top: 100px;
       background-color: blueviolet;
     }

这里只是简单的设置了一下样式，也可以引入图片~

重点来了

这里是纯代码，一个简单的逻辑效果，鼠标点击即可跟随呦~

var flag = false; // 默认为不跟随
        $('#img').bind('click',function(){
            if (flag){ // 表示跟随
                flag = false; // 设置为不跟随
            } else{ // 表示不跟随
                flag = true; // 设置为跟随
            }
        });
        // mousemove
        $('html').bind('mousemove',function(event){
            if(flag) {
            // 将图片跟随鼠标移动
            var x = event.clientX;
            var y = event.clientY;

            var width = parseInt($('#img').css('width'));
            var height = parseInt($('#img').css('height'));
			// 这里设置鼠标的悬停位置 - 为样式的正中间
            $('#img').css({
                top : (y - height/2) + 'px',
                left : (x - width/2) + 'px'
            });   
            }
        });

效果如下

---

总结

以上就是今天要讲的内容，本文仅仅简单介绍了 jQuery 的使用，而 jQuery 提供了大量能使我们快速的获取元素的方法。