图片效果-jQuery超酷图片放大镜特效插件

OKZoom是一款非常优秀的图片放大镜特效jQuery插件。该图片放大镜插件可以制作出一个圆形或者方形的放大镜区域,效果和真实的放大镜效果非常相似。你还可以为放大镜设置边框颜色和阴影效果。

使用方法

使用该图片放大镜插件首先要引入jQuery和okzoom.js文件。

<script src='js/jquery.js'></script>               
<script src='js/okzoom.js'></script>               

然后在你想要制作放大镜效果的图片上使用下面的方法调用该插件:

$('img').okzoom({
  width: 200,
  height: 200,
  round: true,
  background: "#fff",
  backgroundRepeat: "repeat",
  shadow: "0 0 5px #000",
  border: "1px solid black"
});              

配置参数

下面是该图片放大镜插件的可用配置参数:

参数 描述 默认值
width 放大镜的宽度,单位像素。 150
height 放大镜的高度,单位像素。 150
scaleWidth 缩放放大镜图片的尺寸 null
round 设置为true为圆形放大镜,反之为方形放大镜 true
background 图片放大镜的边缘颜色 #fff
backgroundRepeat 是否在放大镜内容重复图片 no-repeat
border 放大镜边框的颜色 0
shadow 放大镜的阴影 0 0 5px #000

Data属性

通常我们都在一幅尺寸被缩小的图片上使用这个图片放大镜效果,用于在放大镜中显示大尺寸的图片。如果你喜欢,可以使用HTML5 data属性data-okimage来替换放大镜中显示的内容。

在线预览 网盘下载

郑重声明:

1 本资源来源于互联网,资源的版权归资源原作者所持有,受《中华人民共和国著作权法》等相关法律保护。

2 由于无法和原作者取得联系,所以上传的部分资源无法先通过原作者的同意就分享给大家了,如本资源侵犯了您(原作者)的权益,请联系我们(微信号 xiaohaimei1989),我们会立马删除您的资源,并向您表达诚挚的歉意!

3 本站是一个公益型网站,分享资源的目的在于传播知识,分享知识,收取一点点打赏的辛苦费是用于网站的日常运营开支,并非用于商业用途。

4 本站资源只提供学习和参考研究使用,使用过后请在第一时间内删除。本站不承担资源被单位或个人商用带来的法律责任。

发表评论