blowup.js是一款实用的jQuery图片放大镜插件。它属于轻量级插件,易于使用,可以通过配置参数来设置放大镜的外观样式等属性。
使用方法
使用该图片放大镜插件需要在页面中引入jquery和blowup.min.js文件
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/blowup.min.js"></script>
初始化插件
在页面DOM元素加载完毕之后,可以通过blowup()
方法来初始化该图片放大镜插件。
$(document).ready(function () { $(".demo-img").blowup({ "background" : "#F39C12", "width" : 250, "height" : 250 }); })
配置参数
blowup.js图片放大镜插件的可用配置参数有:
参数 | 默认值 | 描述 |
round | true | 设置为true为圆形的放大镜,false为矩形的放大镜 |
width | 200 | 放大镜的宽度,单位像素 |
height | 200 | 放大镜的高度,单位像素 |
background | "#FFF" | 放大镜的背景色 |
shadow | "0 8px 17px 0 rgba(0, 0, 0, 0.2)" | 放大镜阴影的CSS样式 |
border | "6px solid #FFF" | 放大镜边框的CSS样式 |
cursor | true | 设置为false放大镜中间就不会有十字光标 |
zIndex | 999999 | 放大镜的z-index属性 |
blowup.js图片放大镜插件的github地址为:https://github.com/paulkr/blowup.js