Skip to content

Instantly share code, notes, and snippets.

@otizis

otizis/mouseMove.html

Created March 21, 2017 03:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save otizis/341b94d41cddd39cb2bb97dbd9389ac3 to your computer and use it in GitHub Desktop.
Save otizis/341b94d41cddd39cb2bb97dbd9389ac3 to your computer and use it in GitHub Desktop.
Download ZIP
监听鼠标移动，分层移动图层
Raw
mouseMove.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试分层移动</title>
<style>
.box{
position: absolute;
opacity: 0.5;
}
.box1{
width: 300px;
height: 300px;
left:50%;
top:50%;
background: green;
margin:-150px;
}
.box2{
width: 200px;
height: 200px;
left:50%;
top:50%;
background: blue;
margin:-100px;
}
.box3{
width: 100px;
height: 100px;
left:50%;
top:50%;
background: red;
margin:-50px;
}
</style>
<script src="http://libs.cdnjs.net/jquery/3.1.1/jquery.min.js"></script>
<script src="http://libs.cdnjs.net/underscore.js/1.8.3/underscore-min.js"></script>
</head>
<body>
<div class="main">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</div>
<script>
$(function(){
var $box1=$(".box1");
var $box2=$(".box2");
var $box3=$(".box3");
var width = $(window).width();
var height = $(window).height();
var throttled = _.throttle(function(event)
{
// var msg = "Handler for .mousemove() called at ";
// msg += event.pageX + ", " + event.pageY;
// console.log(msg);
$box1.css({"left":50 + ((33 * (event.pageX - (width/2))) / width)+"%",top:50 + ((33 * (event.pageY - (height/2))) / height)+"%"});
$box2.css({"left":50 + ((55 * (event.pageX - (width/2))) / width)+"%",top:50 + ((55 * (event.pageY - (height/2))) / height)+"%"});
$box3.css({"left":50 + ((77 * (event.pageX - (width/2))) / width)+"%",top:50 + ((77 * (event.pageY - (height/2))) / height)+"%"});
},1000/24);
$(document).on("mousemove",throttled);
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment