Adipoli 鼠標懸浮圖片顯示效果切換

Adipoli  鼠標懸浮圖片顯示效果切換129
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

也許你還喜歡

乱码理论卡一卡二新区网站_日本性感美女极致诱惑_亲爱的老师3高清中文播放_韩国美女主播在线观看