我在使用懸停偵聽器事件時遇到 jquery 問題，代碼只是在桌面上運行，而在移動設備上我無法讓它與懸停偵聽器一起使用。所以我只想在網站運行時實作單擊功能而不是懸停顯示在手機上并懸停在電腦/筆記本電腦上。我在下面分享我的代碼。我也在使用 blastjs 和 animate.css 進行文本影片。
影片的標題元素
<h2>About Me..</h2>
jQuery代碼
$(document).ready(function () {
$("h2").blast({
delimiter: "character",
tag: "span",
});
var pageAbout = $(".about_wrapper");
$(".blast").on("hover", function () {
var el = $(this);
$(this).addClass("animated rubberBand");
$(this).one(
"webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",
function () {
el.removeClass("animated rubberBand");
}
);
});
});
uj5u.com熱心網友回復：
您可以在制作事件偵聽器之前檢查設備寬度
$(document).ready(function () {
$("h2").blast({
delimiter: "character",
tag: "span",
});
// You choose the event depending on the screen width
let event;
screen.width > 400 ? event = 'hover' : event = 'click'
//
var pageAbout = $(".about_wrapper");
$(".blast").on(event, function () {
var el = $(this);
$(this).addClass("animated rubberBand");
$(this).one(
"webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",
function () {
el.removeClass("animated rubberBand");
}
);
}); });
如果 screen.width 不合適，您可以在此討論中找到一些檢測設備型別的方法
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/437828.html
標籤：javascript html jQuery css
上一篇：如何正確縮放三角形div背景？