이미지 숨겨진, 그런 다음 마우스 움직임에 페이드 인, 페이드 아웃 및 페이드 인이 다시 나타납니다.
-
20-09-2019 - |
문제
3 초 동안 마우스 동작이 없을 때 이미지가 사라지고 마우스가 다시 움직일 때 페이드를 만들려고합니다.
마우스가 움직일 때까지 이미지를 숨길 수있는 방법을 말해 줄 수 있다면 감사 할 것입니다. 따라서 페이지가로드되면 마우스가 움직일 때까지 이미지가 표시되지 않습니다.
이것이 내가 지금까지 가지고있는 것입니다 ...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title></title>
<script type="text/javascript">
var timer;
$(document).mousemove(function() {
if (timer) {
clearTimeout(timer);
timer = 0;
}
$('#top:visible').fadeIn();
timer = setTimeout(function() {
$('#top').fadeOut()
}, 3000)
})
</script>
</head>
<body>
<div id="top">
<img src="graphics/logo/logo.psd" title="" alt="">
</div>
</body>
</html>
도와 주셔서 감사합니다!
해결책
올인원 페이지로 답변을 업데이트했습니다. 바라건대 이것은 상황이 더 명확해질 것입니다. 자체 파일에 JavaScript를 사용하는 것이 좋습니다. 그러나 이것은 당신이 갈 것입니다.
이 라인을 확인하십시오 :
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
올바른 위치와 이름을 가진 jQuery 파일을 올바르게 가리 킵니다.
어떻게 진행되는지 알려주세요.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>tester page</title>
<style>
<!--
-->
</style>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var $top = $('#top');
var $document = $(document);
var timer = null;
var timerIsRunning = false;
$top.hide();
$('#menu').mousemove(function(e){
e.stopPropagation();
});
setTimeout(function() {
$document.mousemove(function(e) {
if($top.is(':hidden')) {
$top.fadeIn();
} else {
if(!timerIsRunning) {
timerIsRunning = true;
clearTimeout(timer);
timer = setTimeout(function() { $top.fadeOut(); }, 5000);
setTimeout(function() {timerIsRunning = false;}, 2000);
}
}
});
}, 500);
});
</script>
</head>
<body>
<div id="top">
<img src="graphics/logo/logo.psd" title="" alt="">
</div>
</body>
</html>
다른 팁
이 시도:
$(document).ready(function() {
var timer;
// hide initially
$('#top').hide();
$(document).mousemove(function() {
if (timer) {
clearTimeout(timer);
timer = 0;
}
$('#top').fadeIn();
timer = setTimeout(function() {
$('#top').fadeOut();
}, 3000)
});
});
제휴하지 않습니다 StackOverflow