JQuery img style是一個非常有用的JQuery插件,它可以幫助我們輕松地控制圖片樣式。
$(function(){ //選擇所有的圖片元素并添加樣式 $("img").css({ "border": "1px solid #ccc", "margin": "10px" }); });
上面的代碼塊展示了添加CSS樣式到所有圖片的例子。這個樣式包含一個外邊框和一個10像素的邊距。這個工具可以讓您以最小的代碼量自定義您的網站上的圖片。
$(function(){ //選擇所有"data-image"屬性的圖片元素并添加樣式 $("img[data-image]").css({ "border": "1px solid #ccc", "margin": "10px" }); });
如果您不想把所有圖片的樣式都修改,您可以根據"data-image"屬性選擇所有需要改動的圖片。上面的代碼塊只會對那些帶有"data-image"屬性的圖片應用修改后的CSS樣式。
$(function(){ //選擇所有圖片元素并添加一個mouseover事件 $("img").mouseover(function() { $(this).css("opacity", "0.7"); }).mouseout(function() { $(this).css("opacity", "1"); }); });
最后,您可以在圖片上應用滑過效果。當鼠標懸停在圖片上方時,圖片會變得透明一些。鼠標移開時,圖片又變為不透明。
總體而言,JQuery img style是一個非常強大的工具,可以讓您更輕松地控制您的圖片樣式和交互效果。
下一篇移動端css技巧