web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置：
首页
>
网页特效
>
图片特效
jQuery超酷图片放大镜特效插件
分类：
图片特效
日期：
2024-05-14
点击(0)
评论(0)
演 示
免费下载
简介
使用该图片放大镜插件首先要引入jQuery和okzoom.js文件。 ```html <script src='js/jquery.js'></script> <script src='js/okzoom.js'></script> ``` 然后在你想要制作放大镜效果的图片上使用下面的方法调用该插件： ```html $('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来替换放大镜中显示的内容。
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告
