所以我目前正在创建一个“按钮”,里面有多个图像,就像幻灯片一样,每当我将鼠标悬停在它上面时,图像就会变成另一个图像。
但是,每当幻灯片图像发生变化时,MouseOver 效果就会被移除并变为 MouseOut 状态,因为从技术上讲鼠标不再位于图像上。
我也尝试为我的按钮添加淡入淡出效果,但我的大部分搜索导致使用悬停功能而不是 MouseOver 和 MouseOut。
所以我想知道,就其潜在功能而言,Hover 是否优于 MouseOver?
是否可以在悬停等情况下暂停幻灯片放映事件?我该怎么做呢?
这是我当前的代码:
函数.js
$(function () {
$('#01 img:gt(0)').hide();
setInterval(function () {
$('#01 :first-child').fadeOut(1500)
.next('img').fadeIn(1500)
.end().appendTo('#01');
},
3000);
});
$(document).ready(function () {
$("#image1").mouseover(function () {
$(this).attr("src", "images/board_01_over.jpg");
});
$("#image1").mouseout(function () {
$(this).attr("src", "images/board_01_01.jpg");
});
});
main.css
#board {
float: left;
width: 998px;
overflow: hidden;
}
.fadein {
float: left;
position: relative;
width: 240px;
height: 140px;
margin: 1px 1px 1px 1px;
}
.fadein img {
position: absolute;
left: 0;
top: 0;
height: 140px;
opacity: 0.6;
overflow: hidden;
}
.fadein img:hover {
opacity: 1;
}
Main.html
<div id="board">
<div class="fadein" id="01">
<img src="images/board_01_01" id="image1" />
<img src="images/board_01_02.jpg" id="image2" />
</div>
</div>
最佳答案
由于您使用的是 jQuery,因此您可以使用 hover()
函数。
$("#image1").hover(function () {
$(this).attr("src", "images/board_01_over.jpg");
},
function () {
$(this).attr("src", "images/board_01_01.jpg");
});
对于你的 slider 来说,用它做一个小物体更容易,所以更容易控制。
var Slideshow = {
interval:null,
start: function () {
...
initialize
...
// catch the interval ID so you can stop it later on
this.interval = window.setInterval(this.next, 3000);
},
next: function () {
/*
* You cannot refer to the keyword this in this function
* since it gets executed outside the object's context.
*/
...
your logic
...
},
stop: function () {
window.clearInterval(this.interval);
}
};
现在你可以轻松调用
Slideshow.start();
Slideshow.stop();
从任何地方开始和停止你的 slider 。
关于javascript - 网页鼠标悬停的缺点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16549095/