Home 主頁 Service 服務計畫 Android App 手機程式 Expertise 專業領域 Blog 博客 Download 下載 FAQ 網頁製作常見問題 Support 支援 Links 友情連結 Contact Us 聯絡我們

jquery plugin - MyFadeOverImage

發佈: 08-21-2011

分類: Open Source jquery plugins 開源插件

這plugin可以幫助你在圖片mouse over(hover)時,另圖片有fade in的效果。怎麼fade in呢?當然是hover前和後的圖片看上去有些分別才可以吧。借助這plugin,我們不用另外準備別的圖片,單一圖片(本來那幅)就夠了。 這plugin可幫你以css在圖片上加上顏色,而且,你可以選擇hover前後的透明度,因此可以輕易做出單一圖片fade in的效果。請看demo。

Download: jquery.MyFadeOverImage.js

Demo: MyFadeOverImage

License: MIT License

作者: KF Software House

jQuery Code:

//SIMPLEST CASE
$("img").MyFadeOverImage({
  imageWidth:100,
  imageHeight:100
});

//OR
$("img").MyFadeOverImage({
  normalAlpha:0.5,
  hoverAlpha: 1,
  normalToneColor:"#fff", //smog effect
  imageWidth:100,
  imageHeight:100
});

//OR
$("img").MyFadeOverImage({
  normalAlpha:0.8,
  hoverAlpha: 1,
  normalToneColor:"#fff", //smog effect
  imageWidth:100,
  imageHeight:100,
  fadeInSpeed: "500",
  fadeOutSpeed: "500"
});
訪客: Copyright ©2011 KF Software House 版權所有 | 網站地圖