图片显示效果切换插件Adipoli

查看演示立即下载

插件描述：Adipoli是一个使用html5实现了鼠标移到图片上对图片的显示效果进行切换的 jQuery 插件。

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:灰度

悬停效果：

normal
popout
sliceDown
sliceDownLeft
sliceUp
sliceUpLeft
sliceUpRandom
sliceUpDown
sliceUpDownLeft
fold
foldLeft
boxRandom
boxRain
boxRainReverse
boxRainGrow
boxRainGrowReverse

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jquery垂直时间轴
下一个特效： jqFloat.js - 浮动效果与jQuery！