jQuery是一個優秀的JavaScript庫,可以提供很多便利的功能。其中之一就是通過jQuery來實現鼠標放在圖片上時,自動顯示圖片的標題。下面就是具體的代碼實現:
//HTML代碼 <div class="wrapper"> <img src="img/pic1.jpg" alt="這里是圖片的描述" title="這里是圖片的標題"> <img src="img/pic2.jpg" alt="這里是圖片的描述" title="這里是圖片的標題"> <img src="img/pic3.jpg" alt="這里是圖片的描述" title="這里是圖片的標題"> </div> //CSS代碼 .wrapper{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; } img{ width:300px; height:200px; border:1px solid #ddd; transition:all .3s linear; cursor:pointer; } img:hover{ transform:scale(1.05); } //jQuery代碼 $("img").hover(function(){ var title = $(this).attr("title"); $(this).after("<p>"+title+"</p>"); $("p").css({ "background-color":"#333", "color":"#fff", "padding":"5px 10px", "position":"absolute", "left":"50%", "top":"50%", "transform":"translate(-50%,-50%)", "border-radius":"5px", "opacity":"0", "transition":"all .3s linear" }); $("p").animate({opacity:"1"},300); },function(){ $("p").remove(); });
上述代碼通過使用jQuery的hover()方法綁定鼠標進入和離開事件。當鼠標進入圖片區域時,首先獲取圖片的title屬性,然后通過jQuery的after()方法在該圖片后面添加一個p標簽,用于顯示圖片的title。同時,利用CSS來設置p標簽的樣式。當鼠標離開圖片區域時,移除p標簽即可。
上一篇vue標簽自動加載