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
参数 | 描述 | 默认值 |
height | 遮罩的高度 | 100% |
target | 将要被遮罩的元素 | img |
caption | 将要被显示成标题或描述的属性,可以使用 HTML data 自定义属性 data-caption | title |
duration | 动画持续时间,以毫秒为单位,越大越慢 | - |
fontColor | 字体颜色 | #fff |
backgroundColor | 背景颜色 | rgba(0,0,0,.7) |
reverse | 反向动画 | false |
textAlign | 文字水平位置,可选 left、center、right | center |
verticalMiddle | 文字垂直居中 | true |
withLink | 禁用图片链接,使其不可点 | true |
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791