如何使用onmousemove函数在每次鼠标移动时更改背景图像
how do I get my background image to change every time the mouse moves using the onmousemove function?
我希望每次移动鼠标时都能更改背景图像。我该怎么做呢。
<img id="background" src="" onmouseover="next()">
<script>
var picNum = 3;
//number of pictures you have
var picSrc = ["pic1Src", "pic2Src", "pic3Src"];
//provide url for each picture or directory for each
var currentPic = 1;
//initialize var for pic number
next(){
var obj = document.getElementById('background');
//Set obj to background
obj.src = picSrc[currentPic];
//Set obj's source to currentPic
var currentPic = currentPic + 1 % picNum
//Increases currentPic by one for next time, however if it goes over the number of pics you have, it goes back to zero.
}
</script>
您不能将背景图像更改为每个鼠标移动事件。图像加载速度不够快。
我使用了css3动画(仅带有-webkit前缀,如果需要,请根据您的浏览器进行调整)。只有当鼠标移动时才会触发动画。请参阅下面的代码和此演示
<html>
<head>
<style>
body{
background:linear-gradient(90deg, #FF4E50 10%, #F9D423 90%);
}
body.mouseMove{
-webkit-animation-duration: 6s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: bg-change;
}
@-webkit-keyframes bg-change {
0% {background:linear-gradient(90deg, #24C6DC 10%, #514A9D 90%); }
30% { background:linear-gradient(90deg, #FF4E50 10%, #F9D423 90%);}
60% {background:linear-gradient(90deg, #B3FFAB 10%, #12FFF7 90%);}
100% {background:linear-gradient(90deg, #24C6DC 10%, #514A9D 90%); }
}
</style>
</head>
<body>
<script type="text/javascript">
var body= document.querySelector("body");
var endMoveTimeout;
body.addEventListener('mousemove',function(){
clearTimeout(endMoveTimeout);
body.classList.add("mouseMove");
endMoveTimeout= setTimeout(function(){
body.classList.remove("mouseMove");
},1000);
});
body.addEventListener('animationiteration',function(e){
console.log(e);
});
</script>
</body>
</html>
相关文章:
- JS-在一段时间后水平移动图像
- JS-移动图像,暂停设置的时间,然后将图像向后移动
- 如何在kineticjs中移动图像
- 锤击JS平移不移动图像
- 如何使用javascript中的箭头键在画布上移动图像
- 在iPad上使用touchmove移动图像(css3变换)
- 当我在另一个画布上同时拖动另一个图像时,如何移动图像
- 在web应用程序ASP.net中拖放和移动图像
- 如何使用javascript移动图像
- 如何在Javascript中在桌子周围随机移动图像
- 如何使用变换来更改或移动图像
- 如何使用reveal.js、javascript和fragment类移动图像
- 如何在 HTML5 中使用键盘箭头键在画布上移动图像
- 在 Javascript 中以 360° 角度移动图像
- 移动图像,显示值并保存当前值
- 移动图像 ..JavaScript 将变量声明为字符串
- 通过指向 X、Y 坐标来移动图像
- 尝试在单击时移动图像,但是 .click 甚至仅在第一次单击时触发
- 通过单击方向按钮在容器内移动图像
- 使用 JavaScript 移动图像