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


Posted in Javascript onJanuary 23, 2017

本文实现的是一款简单的放大镜效果,有三种不同的样式,支持移动端;大家可以直接下载源码进行学习参考,下面来一起学习学习吧。

实现效果如下

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

效果一

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

效果二

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

效果三

调用代码如下

//前面是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里面。

源码下载:点击这里

总结

以上就是这篇文章的全部内容了,希望对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
js 绑定带参数的事件以及手动触发事件
Apr 27 Javascript
jquery异步请求实例代码
Jun 21 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
Apr 04 Javascript
js实现兼容IE和FF的上下层的移动
May 04 Javascript
JavaScript检查数字是否为整数或浮点数的方法
Jun 09 Javascript
jquery控制页面部分刷新的方法
Jun 24 Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 Javascript
深入理解JavaScript函数参数(推荐)
Jul 26 Javascript
微信小程序组件 marquee实例详解
Jun 23 Javascript
Angular6 写一个简单的Select组件示例
Aug 20 Javascript
vue 查看dist文件里的结构(多种方式)
Jan 17 Javascript
vue中是怎样监听数组变化的
Oct 24 Javascript
Javascript Event(事件)的传播与冒泡
Jan 23 #Javascript
js选项卡的制作方法
Jan 23 #Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 #Javascript
详解javascript中对数据格式化的思考
Jan 23 #Javascript
JavaScript 栈的详解及实例代码
Jan 22 #Javascript
jQuery DateTimePicker 日期和时间插件示例
Jan 22 #Javascript
前端分页功能的实现以及原理(jQuery)
Jan 22 #Javascript
You might like
两种php去除二维数组的重复项方法
2015/11/04 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
2012/07/26 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
javascript结合fileReader 实现上传图片
2015/01/30 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
javascript拖拽效果延伸学习
2016/04/04 Javascript
js 连续赋值的简单实现
2016/06/13 Javascript
最全面的JS倒计时代码
2016/09/17 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
2017/01/04 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
2017/01/22 Javascript
Bootstrap 网格系统布局详解
2017/03/19 Javascript
js生成word中图片处理方法
2018/01/06 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
2018/08/12 Javascript
35个最好用的Vue开源库(史上最全)
2019/01/03 Javascript
使用RxJS更优雅地进行定时请求详析
2019/06/02 Javascript
Python函数的周期性执行实现方法
2016/08/13 Python
python中利用zfill方法自动给数字前面补0
2018/04/10 Python
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
django小技巧之html模板中调用对象属性或对象的方法
2018/11/30 Python
详解将Pandas中的DataFrame类型转换成Numpy中array类型的三种方法
2019/07/06 Python
Cpython解释器中的GIL全局解释器锁
2020/11/09 Python
详解css3 object-fit属性
2018/07/27 HTML / CSS
Expedia意大利旅游网站:酒店、机票和租车预订
2017/10/30 全球购物
意大利奢侈品购物网站:Giglio
2018/01/05 全球购物
全球在线商店:BerryLook
2019/04/14 全球购物
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
电气自动化大学生求职信
2013/10/16 职场文书
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
社会学专业求职信
2014/07/17 职场文书
2014国庆节主题活动方案:快乐的国庆节
2014/09/16 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
新年寄语2016
2015/08/17 职场文书
python实现简单的名片管理系统
2021/04/26 Python
Python数据分析入门之教你怎么搭建环境
2021/05/13 Python