jQuery是一款非常流行的JavaScript庫,它可以輕松處理網頁中的動態效果和交互操作。其中,預覽圖片時添加文字簡介是一個非常常見的需求,我們可以通過以下代碼實現:
$(function() { // 當鼠標移到圖片上時 $('img').hover(function() { // 獲取圖片地址 var imgSrc = $(this).attr('src'); // 獲取圖片alt屬性 var imgAlt = $(this).attr('alt'); // 創建預覽區域 var preview = $('<div></div>').addClass('preview-box'); // 創建圖片標簽 var previewImg = $('<img/>').attr('src', imgSrc); // 創建文字簡介標簽 var previewText = $('<p></p>').text(imgAlt); // 添加圖片和文字簡介到預覽區域 preview.append(previewImg).append(previewText); // 顯示預覽區域 $('body').append(preview); }, function() { // 鼠標移出圖片時隱藏預覽區域 $('.preview-box').remove(); }); });
在上面的代碼中,我們首先使用了hover方法來為圖片添加鼠標滑過和移出時的事件,然后使用attr方法獲取了圖片的地址和alt屬性,并創建了一個預覽區域。在預覽區域中,我們使用了img和p標簽來顯示圖片和文字簡介,最后將它們添加到預覽區域中,并使用append方法將預覽區域添加到頁面中。當鼠標移出圖片時,我們使用remove方法將預覽區域從頁面中移除。
以上就是使用jQuery預覽圖片時添加文字簡介的方法,由于預覽和提示展示的文本內容不太一樣,因此在此建議使用title屬性來展示簡短的提示信息,而不是使用alt屬性。