穿透石头的水滴,它的力量来源于日积月累。
上一篇博客介绍了jQuery事件,今天用jQuery事件编写一个小案例
希望对有需要的小伙伴有所帮助。
鼠标跟随时间
图片随着鼠标的移动而移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标跟随事件</title>
<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<style>
img {
width: 150px;
position: absolute;
left: 200px;
top: 100px;
}
</style>
</head>
<body>
<img src="pic6.jpg">
<!-- 改变图片的left和top值 -->
<script>
var flag = false; // 默认不跟随
$('img').bind('click',function(){ // 点击图片后跟随
if (flag) {
flag = false;
} else {
flag = true;
}
});
// mousemove()鼠标移动事件
$("html").bind("mousemove",function(evet){
console.log("this is mousemove");
if (flag) {
// 图片跟随鼠标移动
// 得到鼠标的坐标值 【所有页面元素的定位都以左上角为准】
var x = event.clientX;
var y = event.clientY;
// 所有页面元素的定位都以左上角为准,得到图片宽/高的一半就可以获得中间的位置
var width = parseInt($("img").css("width"));
var height = parseInt($("img").css("height"));
console.log(width,height);
$("img").css({
top: (y - height/2) + 'px',
left:(x - width/2) + 'px'
});
}
});
</script>
</body>
</html>