Adipoli是一個使用html5實現了鼠標移到圖片上對圖片的顯示效果進行切換的 jQuery 插件。使用步驟js引用<script src="js/jquery-1.7.1.js" type="text/javascript"></script><script src="js/jquery.adipoli.min.js" type="text/javascript"></script>
圖片顯示效果6種顯示方式<script> $(function(){ $('.row1').adipoli({ 'startEffect' : 'normal', 'hoverEffect' : 'popout' }); $('.row2').adipoli({ 'startEffect' : 'overlay', 'hoverEffect' : 'sliceDown' }); $('.row3').adipoli({ 'startEffect' : 'transparent', 'hoverEffect' : 'boxRandom' }); $('.row4').adipoli({ 'startEffect' : 'overlay', 'hoverEffect' : 'foldLeft' }); $('.row5').adipoli({ 'startEffect' : 'transparent', 'hoverEffect' : 'boxRainGrowReverse' }); $('.row6').adipoli({ 'startEffect' : 'grayscale', 'hoverEffect' : 'normal' }); });</script>html中引用對應的css<div class="effect-container"> <div class="effect-details">startEffect : overlay, hoverEffect : sliceDown</div> <img class="img-style row2" src="img/gallery-images/2_1.png"/> <img class="img-style row2" src="img/gallery-images/2_2.png"/> <img class="img-style row2" src="img/gallery-images/2_3.png"/></div>
參數配置imageOpacity：不透明圖像啟動效果是透明的或重疊時，會考慮animSpeed：動畫效果的速度fillColor ：覆蓋顏色textColor ：文本顏色overlayText：默認的HTML顯示在覆蓋slices：片數片動畫boxCols：一排箱數箱動畫boxRows：行數箱動畫popOutMargin：保證金圖像彈出式視窗popOutShadow：暗影長度彈出式視窗形象。影子的作品文字陰影CSS的瀏覽器支持。開始效果：transparent:透明normal:正常overlay:覆蓋grayscale:灰度懸停效果：normalpopoutsliceDownsliceDownLeftsliceUpsliceUpLeftsliceUpRandomsliceUpDownsliceUpDownLeftfoldfoldLeftboxRandomboxRainboxRainReverseboxRainGrowboxRainGrowReverse
