鼠标事件
mouseenter鼠标移入 mouseleave鼠标移出
★在进入子元素区域的时候不会触发
console.log('mouseenter');
})
$('.div1').mouseleave(function(){
console.log('mouseleave');
})
mouseover鼠标移入 mouseout鼠标移出
在进入子元素区域的时候也会触发
console.log('mouseover')
})
$('.div1').mouseout(function(){
console.log('mouseout')
})
hover 由mouseenter和mouseleave组成
键盘事件
keydown 按下键盘时
keyup 释放按键时
keypress 产生可打印的字符时 连续敲击键盘的时候触发
$('input[type=text]').keydown(function(){
alert('我按下了')
})
/* 释放按键时 */
$('input[type=password]').keyup(function(){
alert('鼠标抬起了')
})
/* 产生可打印的字符时 连续敲击键盘的时候触发 */
$('input[type=password]').keypress(function(){
alert('连续敲击键盘')
})
/* 敲击回车的时候触发 */
if(e.keyCode==13){
alert('我提交了')
}
})
轮播图
<script>
let i = 0;
let timer = null
$('img').eq(i).show().siblings().hide();
/* 自动播放 */
show();
//触摸切换图片
$('.b').hover(function(){
clearInterval(timer)
$(this).css('opacity','1').siblings().css('opacity','');
let idx= $(this).index()
console.log(idx);
$('img').eq(idx).show().siblings().hide();
},function(){
$('.b').css('opacity','')
show()
})
$('.left').click(function () {
/* 先清空定时器 阻止自动播放 */
clearInterval(timer)
i--;
/* 防止减到-1 找不到对应的图片 */
if (i == -1) {
i = $('img').length - 1
}
/* 展示当前对应的图片其他图片淡出 */
$('img').eq(i).show().siblings().hide();
/* 继续开始自动播放 */
show();
})
$('.right').click(function () {
/* 先清空定时器 阻止自动播放 */
clearInterval(timer)
i++;
/* 防止减到-1 找不到对应的图片 */
if (i == $('img').length) {
i = 0
}
/* 展示当前对应的图片其他图片淡出 */
$('img').eq(i).show().siblings().hide();
/* 继续开始自动播放 */
show();
})
/* 定时器 过2秒 显示一张图 显示最后一张图的时候
再跳到第一张 */
function show() {
timer = setInterval(function () {
i++
if (i == $('img').length) {
i = 0
}
/* fadeIn淡入 fadeOut淡出 */
$('img').eq(i).fadeIn().siblings().fadeOut();
}, 2000)
}
</script>
