特效介绍
Chocolat.js
Chocolat.js-jQuery图片放大和全屏预览插件实现的多种图片查看特效源码是一段实现了点击缩略图或文字后,在相关区域内会显示与缩略图或文字相对应的大图片,并且在该图片的右上角位置有关闭按钮,如果图片有多张,还支持上一张下一张的切换。大图预览有两种模式:contain和cover,contain模式图片不占满容器,包含框能看见,而cover模式,如果在容器中,就占满容器,如果在窗口中,则完全全屏,支持esc退出全屏。如果图片占满了容器还是没显示全,则支持鼠标移动查看不同位置,在图片上单击即可,鼠标会从放大镜变成放小镜。支持多种事件和回调。
使用方法
1、引入css文件
<link rel="stylesheet" href="dist/css/chocolat.css" />2、html代码(文字点击放大图片)
<a class="chocolat-image" href="demo-images/5.jpg" title="HO">1</a>3、html代码2(缩略图点击放大图片)
<a class="chocolat-image" href="demo-images/3.jpg" title="Rose"> <img src="demo-images/3.jpg" style="width:75px; height:50px" alt=""> </a>4、js调用
$('#example1').Chocolat({ loop : true, //循环 imageSize : 'cover', //图片模式 有cover和contain两种 overlayOpacity : 0.9 });5、更多参数详见demo。