学不积硅步,无以至千里。
前言
学习是一个枯燥且乏味的过程,每天学一点,其实作用并不大,但是坚持每天学一点时间久了,就能产生质的变化,所以,每天的坚持为了以后的某一天打基础,总有一天会成为一片苍茫大海~
回归正题
这是一个超简单的小案例,小白入门。
提示:以下是本篇文章正文内容,下面案例可供参考
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 提供了大量能使我们快速的获取元素的方法。