当前位置：首页 > 资讯 > 技术文档

利用javascript实现的三种图片放大镜效果实例（附源码）

时间：2021-03-22 22:39 编辑：来源：阅读：
扫一扫，手机访问

摘要：利用javascript实现的三种图片放大镜效果实例（附源码）

本文实现的是一款简单的放大镜效果，有三种不同的样式，支持移动端；大家可以直接下载源码进行学习参考，下面来一起学习学习吧。 [b]实现效果如下[/b] [img]http://files.jb51.net/file_images/article/201701/201712384554391.jpg?201702384641[/img] 效果一 [img]http://files.jb51.net/file_images/article/201701/201712384700647.jpg?201702384720[/img] 效果二 [img]http://files.jb51.net/file_images/article/201701/201712384736849.jpg?201702384757[/img] 效果三 [b]调用代码如下[/b]

//前面是ID或者Class，后面有init里面参数分别有1,2,3代表三种不同的效果： 
zoom(‘#item').init(); //这里写0，或者不写都可以，默认0 
zoom(‘#item').init(1); //效果2 
zoom(‘#item').init(2); //效果3 
 
//另外还有一个参数，就是选择器后面写上true的话，就是给所有选择的元素添加放大镜效果，不写的话只有第一个有 
zoom(‘#item',true).init();

样式就通过css来定义，没有写进js里面。源码下载：[url=http://xiazai.jb51.net/201701/yuanma/picture_magnifier(jb51.net).rar]点击这里[/url] [b]总结[/b] 以上就是这篇文章的全部内容了，希望对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

全部评论(0)

上一篇：详解原生JavaScript实现jQuery中AJAX处理的方法
下一篇：实例讲解使用原生JavaScript处理AJAX请求的方法

资讯排行榜
更多>>