sliphover演示9种不同的图片动画遮罩效果

查看演示 下载资源 下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

HTML

首先我们在页面放置多个图片，并且在img标签上加上标题

<ul>
    <li>
        <a href="http://www.sucaihuo.com/" target="_blank">
            <img src="img/1.jpg" title="这是一个标题或描述">
        </a>
    </li>
    <li>
        <a href="http://www.sucaihuo.com/" target="_blank">
            <img src="img/3.jpg" title="还可以是 HTML 代码">
        </a>
    </li>
.......
</ul>

引入jQuery库和sliphover插件

<script src="js/jquery.min.js"></script>
<script src="js/jquery.sliphover.min.js"></script>

jQuery

$(function(){
    $('#container').sliphover();
});

SlipHover演示

<a class="cur" href="http://www.sucaihuo.com/jquery/demo/207/index.html">1、默认</a> <a href="http://www.sucaihuo.com/jquery/demo/207/index2.html">2、遮罩高度</a> <a href="http://www.sucaihuo.com/jquery/demo/207/index3.html">3、HTML data属性</a> <a href="http://www.sucaihuo.com/jquery/demo/207/index4.html">4、动画时间</a> <a href="http://www.sucaihuo.com/jquery/demo/207/index5.html">5、字体颜色</a> <a href="http://www.sucaihuo.com/jquery/demo/207/index6.html">6、背景颜色</a> <a href="http://www.sucaihuo.com/jquery/demo/207/index7.html">7、反向</a> <a href="http://www.sucaihuo.com/jquery/demo/207/index8.html">8、文字排版</a> <a href="http://www.sucaihuo.com/jquery/demo/207/index9.html">9、禁用链接</a>

SlipHover相关API