<html>
<head>
<script src="../jquery-2.1.1.min.js"></script> //2.11版本
<style>
.box1 {
position: relative;
top: 0px;
left: 0px;
width: 100px;
height: 100px;
background: red;
transition: all 0.5s ease;
}
{
margin: 0;
padding: 0;}
{
width: 100%;
height: 10%;}
{
width: 100%;
height: 100%;}
</style>
</head>
<body>
<p class="box1">
</p>
<script>
var totalFun = null;
$(document).on("mousemove", totalFun = function () {
showClientPos(event);
move();
bindEvent();
$(document).off("mousemove");
});
function showClientPos(e) {
var posArr = [];
posArr["x"] = e.clientX;
posArr["y"] = e.clientY;
return posArr;
}
function move() {
var objX = showClientPos(event).x + "px";
var objY = showClientPos(event).y + "px";
$(".box1").css("transform", "translate(" + objX + "," + objY + ")");
console.log(objX);
}
function bindEvent() {
var transEndEventName = whichTransitionEvent();
$(".box1").bind(transEndEventName, function () {
$(document).on("mousemove", totalFun)
});
}
function whichTransitionEvent() {
var t;
var el = document.createElement('fakeelement');
var transitions = {
'transition': 'transitionend',
'OTransition': 'oTransitionEnd',
'MozTransition': 'transitionend',
'WebkitTransition': 'webkitTransitionEnd',
'MsTransition': 'msTransitionEnd'
}
for (t in transitions) {
if (el.style[t] !== undefined) {
return transitions[t];
}
}
}
</script>
</body>
</html>
PHP中文网2017-04-10 17:17:58
$(document).on("mousemove", totalFun = function () {
...
move();
bindEvent();
...
});每次mousemove事件都会调用一次move，同时调用一次bindEvent在css变换结束时又绑定了一次mousemove事件。所以每次调用的mousemove都会翻倍。