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